@charset "UTF-8";
/*
 * Web Starter Kit
 *
 * Multi-screen layout styles for your page. Brought to you by the
 * Web Starter Kit team.
 *
 */
/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

a {
    color: #00e;
}

a:visited {
    color: #551a8b;
}

a:hover {
    color: #06e;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */
img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
    resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* ==========================================================================
   Helper classes
   ========================================================================== */
/* Prevent callout */
.nocallout {
    -webkit-touch-callout: none;
}

.pressed {
    background-color: rgba(0, 0, 0, 0.7);
}

/* A hack for HTML5 contenteditable attribute on mobile */
textarea[contenteditable] {
    -webkit-appearance: none;
}

/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if
   they have been set as display: none */
.gifhidden {
    position: absolute;
    left: -100%;
}

/*
 * Image replacement
 */
.ir {
    background-color: transparent;
    background-repeat: no-repeat;
    border: 0;
    direction: ltr;
    display: block;
    overflow: hidden;
    text-align: left;
    text-indent: -999em;
}

.ir br {
    display: none;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */
.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible {
    visibility: hidden;
}

/**
 * Clearfix helper
 * Used to contain floats: h5bp.com/q
 */
.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}

.clearfix::after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 800px) {
    /* Style adjustments for viewports that meet the condition */
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
    /* Style adjustments for viewports that meet the condition */
}
/*
 * Visual Style Guide styles
 * Remove if you prefer to use a CSS library, like Bootstrap
 */
/**
*
* Main Stylesheet For Visual Style Guide
*
**/
/**
*
* Utils
*
**/
/*==========  VARIABLES  ==========*/
/*==========  FUNCTIONS  ==========*/
/*==========  MIXINS  ==========*/
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
a:hover, a:visited, a:link, a:active {
    text-decoration: none;
}

html {
    font-family: sans-serif;
    /* 1 */
    -ms-text-size-adjust: 100%;
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

/**
 * Remove default margin.
 */
body {
    margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
    display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
    display: inline-block;
    /* 1 */
    vertical-align: baseline;
    /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
    display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
    background: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
    outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
    font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
    font-style: italic;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
    background: #ff0;
    color: #000;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
    border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
    overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Remove margin
 */
figure {
    margin: 0;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
    box-sizing: content-box;
    height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
    overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
    color: inherit;
    /* 1 */
    font: inherit;
    /* 2 */
    margin: 0;
    /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
    overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    /* 2 */
    cursor: pointer;
    /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
    line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
    border: 0;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
    overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
    font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 0;
}

/* Blockquote
   ========================================================================== */
blockquote {
    margin: 0;
}

/**
*
* Global
*
**/
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body,
button {
    -moz-osx-font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

body {
    font-family: "Verdana";
    font-size: 16px;
    line-height: 1.2em;
    font-weight: 300;
    color: #404040;
    position: relative;
}
body::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: 9;
    display: none;
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.15) 95%, rgba(0, 0, 0, 0.15) 100%);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 95%, rgba(0, 0, 0, 0.15) 100%);
    background-size: 100% 26px;
}
body.debug::after {
    display: block;
    pointer-events: none;
}

pre {
    background: #F2F2F2;
    padding: 13px;
}

.main-container {
    box-sizing: content-box;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
@media only screen and (min-width: 620px) {
    .main-container {
        max-width: 688px;
    }
}
@media only screen and (min-width: 800px) {
    .main-container {
        padding-left: 4.4%;
        padding-right: 4.4%;
        max-width: 990px;
    }
}

.container {
    box-sizing: content-box;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
@media only screen and (min-width: 620px) {
    .container {
        max-width: 688px;
    }
}
@media only screen and (min-width: 800px) {
    .container {
        padding-left: 4.4%;
        padding-right: 4.4%;
        max-width: 990px;
    }
}

@media only screen and (min-width: 620px) {
    .container-medium {
        box-sizing: content-box;
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }
}
@media only screen and (min-width: 620px) and (min-width: 620px) {
    .container-medium {
        max-width: 688px;
    }
}
@media only screen and (min-width: 620px) and (min-width: 800px) {
    .container-medium {
        padding-left: 4.4%;
        padding-right: 4.4%;
        max-width: 990px;
    }
}

@media only screen and (max-width: 619px) {
    .container-small {
        box-sizing: content-box;
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }
}
@media only screen and (max-width: 619px) and (min-width: 620px) {
    .container-small {
        max-width: 688px;
    }
}
@media only screen and (max-width: 619px) and (min-width: 800px) {
    .container-small {
        padding-left: 4.4%;
        padding-right: 4.4%;
        max-width: 990px;
    }
}

@media only screen and (min-width: 800px) {
    .content {
        margin-right: 25.9%;
    }
    .content pre {
        margin-right: -25.9%;
    }
}

@font-face {
    font-family: icons;
    src: url(../images/icons/icons.eot);
    src: url(../images/icons/icons.eot?#iefix) format("embedded-opentype"), url(../images/icons/icons.woff2) format("woff2"), url(../images/icons/icons.woff) format("woff"), url(../images/icons/icons.ttf) format("truetype"), url(../images/icons/icons.svg?#icons) format("svg");
    font-weight: normal;
    font-style: normal;
}
.icon {
    font-family: 'icons';
    display: inline-block;
    vertical-align: top;
    line-height: 1;
    font-weight: normal;
    font-style: normal;
    speak: none;
    text-decoration: inherit;
    text-transform: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-bullet::before, ul li::before, ul.list-links a::before, .list-anchor a::before {
    content: "\e001";
}

.icon-chevron-down::before {
    content: '\e002';
}

.icon-chevron-large::before {
    content: '\e003';
}

.icon-chevron-left::before, .article-nav-link--prev::before {
    content: '\e004';
}

.icon-chevron-right::before, .article-nav-link--next::before, ul.list-links.list-links--primary a::before {
    content: '\e005';
}

.icon-chevron-up::before {
    content: '\e006';
}

.icon-close::before {
    content: '\e007';
}

.icon-cog::before {
    content: '\e008';
}

.icon-diamond::before {
    content: '\e009';
}

.icon-exclamation::before {
    content: '\e00a';
}

.icon-google-dev::before {
    content: '\e00b';
}

.icon-hash::before {
    content: '\e00c';
}

.icon-introduction-to-media::before {
    content: '\e00d';
}

.icon-lessons::before {
    content: '\e00e';
}

.icon-menu::before {
    content: '\e00f';
}

.icon-minus::before {
    content: '\e010';
}

.icon-multi-device-layouts::before {
    content: '\e011';
}

.icon-performance::before {
    content: '\e012';
}

.icon-plus::before {
    content: '\e013';
}

.icon-question::before {
    content: '\e014';
}

.icon-slash::before {
    content: '\e015';
}

.icon-star::before {
    content: '\e016';
}

.icon-tick::before {
    content: '\e017';
}

.icon-user-input::before {
    content: '\e018';
}

/**
*
* Material design color palettes.
* @see http://www.google.com/design/spec/style/color.html
*
**/
/* ==========  Blacks  ========== */
/* ==========  Color Palettes  ========== */
/* ==========  Color definitions  ========== */
/**
*
* Highlight
*
**/
.highlight-module {
    overflow: hidden;
    margin-top: 52px;
    margin-bottom: 26px;
    position: relative;
}
.highlight-module::after {
    background: #F2F2F2;
    content: '';
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
    width: 100%;
    right: 0;
    left: 0;
}
.highlight-module ul,
.highlight-module ol {
    padding-left: 0;
}

.highlight-module__container {
    box-sizing: content-box;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 78px;
    z-index: 1;
    position: relative;
}
@media only screen and (min-width: 620px) {
    .highlight-module__container {
        max-width: 688px;
    }
}
@media only screen and (min-width: 800px) {
    .highlight-module__container {
        padding-left: 4.4%;
        padding-right: 4.4%;
        max-width: 990px;
    }
}
.highlight-module__container::before {
    display: none;
}
@media only screen and (min-width: 620px) {
    .highlight-module__container::before {
        display: block;
        position: absolute;
        top: 106px;
        right: 45px;
        font-family: "icons";
        font-size: 130px;
        line-height: 1px;
        text-align: center;
        height: 100%;
        width: 30.3%;
        color: #ffffff;
    }
}
.highlight-module--left .highlight-module__container::before {
    right: auto;
    left: 45px;
}
@media only screen and (min-width: 800px) {
    .highlight-module__container::before {
        top: 134px;
        width: 22.2%;
        font-size: 180px;
    }
    .highlight-module--large .highlight-module__container::before {
        font-size: 430px;
    }
}
@media only screen and (min-width: 620px) {
    .highlight-module__container {
        padding-bottom: 52px;
    }
}
@media only screen and (min-width: 800px) {
    .highlight-module__container {
        min-height: 208px;
    }
}

.highlight-module__title {
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    font-size: 68px;
    font-weight: 300;
    line-height: 1.1471em;
    /* 78px */
    padding-top: 0.3824em;
    padding-bottom: 0;
    padding-top: 26px;
}
@media only screen and (min-width: 800px) {
    .highlight-module__title {
        font-family: "Roboto Condensed", Helvetica, sans-serif;
        font-size: 110px;
        font-weight: 300;
        line-height: 1.19em;
        /* 130px */
        padding-top: 0.2364em;
        padding-bottom: 0;
    }
}
@media only screen and (min-width: 800px) {
    .highlight-module__title {
        font-family: "Roboto Condensed", Helvetica, sans-serif;
        font-size: 42px;
        font-weight: 300;
        line-height: 1.2381em;
        /* 52px */
        padding-top: 0.6190em;
        padding-bottom: 0;
    }
}
@media only screen and (min-width: 800px) and (min-width: 800px) {
    .highlight-module__title {
        font-family: "Roboto Condensed", Helvetica, sans-serif;
        font-size: 68px;
        font-weight: 300;
        line-height: 1.1471em;
        /* 78px */
        padding-top: 0.3824em;
        padding-bottom: 0;
    }
}

.highlight-module__cta {
    display: block;
}

/*==========  LEARNING  ==========*/
.highlight-module--learning {
    color: #ffffff;
}
.highlight-module--learning::after {
    background-color: #da2e75;
}
.highlight-module--learning a {
    color: #ffffff;
    text-decoration: underline;
}

/*==========  REMEMBER  ==========*/
.highlight-module--remember {
    color: #ffffff;
}
.highlight-module--remember::after {
    background-color: #09829a;
}
.highlight-module--remember a {
    color: #ffffff;
    text-decoration: underline;
}

/*==========  CODE  ==========*/
.highlight-module--code {
    overflow: visible;
    margin-bottom: 52px;
}
.highlight-module--code pre {
    margin: 0;
    padding-top: 26px;
    font-size: 14px;
    line-height: 26px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}
.highlight-module--code pre span {
    margin: 0;
    padding: 0;
    display: inline-block;
}
.highlight-module--code code {
    margin: 0;
    padding: 0;
    word-spacing: -2px;
    display: block;
}
.highlight-module--code .highlight-module__container {
    padding-bottom: 0;
}
.highlight-module--code .highlight-module__cta {
    position: absolute;
    bottom: -26px;
}

/*==========  LEFT  ==========*/
@media only screen and (min-width: 800px) {
    .highlight-module--left::after {
        width: 80%;
        right: 20%;
    }
}

/*==========  RIGHT  ==========*/
@media only screen and (min-width: 800px) {
    .highlight-module--right::after {
        width: 80%;
        left: 20%;
    }
}
@media only screen and (min-width: 800px) {
    .highlight-module--right.highlight-module--code::after {
        width: 100%;
        left: 0;
    }
}

/*==========  INLINE  ==========*/
.highlight-module--inline {
    color: #404040;
    overflow: visible;
    margin: 26px 0 0;
}
.highlight-module--inline .highlight-module__container {
    padding-bottom: 0;
}
.highlight-module--inline .highlight-module__container::before {
    display: none;
}
.highlight-module--inline .highlight-module__content {
    border-color: #e0e0e0;
    border-style: solid;
    border-width: 1px;
    border-left-width: 0;
    border-right-width: 0;
    margin-bottom: -2px;
    padding: 0 0 26px;
}
.highlight-module--inline .highlight-module__title {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.3000em;
    /* 26px */
    padding-top: 1.3000em;
    padding-bottom: 0;
}
@media only screen and (min-width: 800px) {
    .highlight-module--inline .highlight-module__title {
        font-family: "Roboto Condensed", Helvetica, sans-serif;
        font-size: 26px;
        font-weight: 300;
        line-height: 1.0000em;
        /* 26px */
        padding-top: 1.0000em;
        padding-bottom: 0;
    }
}
.highlight-module--inline.highlight-module--remember .highlight-module__title, .highlight-module--inline.highlight-module--remember li::before {
    color: #09829a;
}
.highlight-module--inline.highlight-module--learning .highlight-module__title, .highlight-module--inline.highlight-module--learning li::before {
    color: #da2e75;
}
.highlight-module--inline::after {
    display: none !important;
}

/*==========  COLORS  ==========*/
div.highlight > pre > code, code .highlight {
    background: transparent;
}

div.highlight > pre > code .c, code .highlight .c {
    color: #999988;
    font-style: italic;
}

/* Comment */
div.highlight > pre > code .err, code .highlight .err {
    color: #a61717;
    background-color: #e3d2d2;
}

/* Error */
/* Keyword */
/* Operator */
div.highlight > pre > code .cm, code .highlight .cm {
    color: #999988;
    font-style: italic;
}

/* Comment.Multiline */
div.highlight > pre > code .cp, code .highlight .cp {
    color: rgba(51, 51, 51, 0.54);
}

/* Comment.Preproc */
div.highlight > pre > code .c1, code .highlight .c1 {
    color: #999988;
    font-style: italic;
}

/* Comment.Single */
div.highlight > pre > code .cs, code .highlight .cs {
    color: rgba(51, 51, 51, 0.54);
    font-style: italic;
}

/* Comment.Special */
div.highlight > pre > code .gs, code .highlight .gd {
    color: #000000;
    background-color: #ffdddd;
}

/* Generic.Deleted */
div.highlight > pre > code .gd .x, code .highlight .gd .x {
    color: #000000;
    background-color: #ffaaaa;
}

/* Generic.Deleted.Specific */
div.highlight > pre > code .ge, code .highlight .ge {
    font-style: italic;
}

/* Generic.Emph */
div.highlight > pre > code .gr, code .highlight .gr {
    color: #aa0000;
}

/* Generic.Error */
div.highlight > pre > code .gh, code .highlight .gh {
    color: rgba(51, 51, 51, 0.54);
}

/* Generic.Heading */
div.highlight > pre > code .gi, code .highlight .gi {
    color: #000000;
    background-color: #ddffdd;
}

/* Generic.Inserted */
div.highlight > pre > code .gi .x, code .highlight .gi .x {
    color: #000000;
    background-color: #aaffaa;
}

/* Generic.Inserted.Specific */
div.highlight > pre > code .go, code .highlight .go {
    color: #888888;
}

/* Generic.Output */
div.highlight > pre > code .gp, code .highlight .gp {
    color: #555555;
}

/* Generic.Prompt */
/* Generic.Strong */
div.highlight > pre > code .gu, code .highlight .gu {
    color: #aaaaaa;
}

/* Generic.Subheading */
div.highlight > pre > code .gt, code .highlight .gt {
    color: #aa0000;
}

/* Generic.Traceback */
/* Keyword.Constant */
/* Keyword.Declaration */
/* Keyword.Pseudo */
/* Keyword.Reserved */
div.highlight > pre > code .kt, code .highlight .kt {
    color: #445588;
}

/* Keyword.Type */
div.highlight > pre > code .m, code .highlight .m {
    color: #009999;
}

/* Literal.Number */
div.highlight > pre > code .s, code .highlight .s {
    color: #da2e75;
}

/* Literal.String */
div.highlight > pre > code .na, code .highlight .na {
    color: #008080;
}

/* Name.Attribute */
div.highlight > pre > code .nb, code .highlight .nb {
    color: #0086B3;
}

/* Name.Builtin */
div.highlight > pre > code .nc, code .highlight .nc {
    color: #445588;
}

/* Name.Class */
div.highlight > pre > code .no, code .highlight .no {
    color: #008080;
}

/* Name.Constant */
div.highlight > pre > code .ni, code .highlight .ni {
    color: #800080;
}

/* Name.Entity */
div.highlight > pre > code .ne, code .highlight .ne {
    color: #990000;
}

/* Name.Exception */
div.highlight > pre > code .nf, code .highlight .nf {
    color: #990000;
}

/* Name.Function */
div.highlight > pre > code .nn, code .highlight .nn {
    color: #555555;
}

/* Name.Namespace */
div.highlight > pre > code .nt, code .highlight .nt {
    color: #09829a;
}

/* Name.Tag */
div.highlight > pre > code .nv, code .highlight .nv {
    color: #008080;
}

/* Name.Variable */
/* Operator.Word */
div.highlight > pre > code .w, code .highlight .w {
    color: #bbbbbb;
}

/* Text.Whitespace */
div.highlight > pre > code .mf, code .highlight .mf {
    color: #009999;
}

/* Literal.Number.Float */
div.highlight > pre > code .mh, code .highlight .mh {
    color: #009999;
}

/* Literal.Number.Hex */
div.highlight > pre > code .mi, code .highlight .mi {
    color: #009999;
}

/* Literal.Number.Integer */
div.highlight > pre > code .mo, code .highlight .mo {
    color: #009999;
}

/* Literal.Number.Oct */
div.highlight > pre > code .sb, code .highlight .sb {
    color: #da2e75;
}

/* Literal.String.Backtick */
div.highlight > pre > code .sc, code .highlight .sc {
    color: #da2e75;
}

/* Literal.String.Char */
div.highlight > pre > code .sd, code .highlight .sd {
    color: #da2e75;
}

/* Literal.String.Doc */
div.highlight > pre > code .s2, code .highlight .s2 {
    color: #da2e75;
}

/* Literal.String.Double */
div.highlight > pre > code .se, code .highlight .se {
    color: #da2e75;
}

/* Literal.String.Escape */
div.highlight > pre > code .sh, code .highlight .sh {
    color: #da2e75;
}

/* Literal.String.Heredoc */
div.highlight > pre > code .si, code .highlight .si {
    color: #da2e75;
}

/* Literal.String.Interpol */
div.highlight > pre > code .sx, code .highlight .sx {
    color: #da2e75;
}

/* Literal.String.Other */
div.highlight > pre > code .sr, code .highlight .sr {
    color: #009926;
}

/* Literal.String.Regex */
div.highlight > pre > code .s1, code .highlight .s1 {
    color: #da2e75;
}

/* Literal.String.Single */
div.highlight > pre > code .ss, code .highlight .ss {
    color: #990073;
}

/* Literal.String.Symbol */
div.highlight > pre > code .bp, code .highlight .bp {
    color: rgba(51, 51, 51, 0.54);
}

/* Name.Builtin.Pseudo */
div.highlight > pre > code .vc, code .highlight .vc {
    color: #008080;
}

/* Name.Variable.Class */
div.highlight > pre > code .vg, code .highlight .vg {
    color: #008080;
}

/* Name.Variable.Global */
div.highlight > pre > code .vi, code .highlight .vi {
    color: #008080;
}

/* Name.Variable.Instance */
div.highlight > pre > code .il, code .highlight .il {
    color: #009999;
}

/* Literal.Number.Integer.Long */
/**
*
* Editorial Header
*
**/
.editorial-header {
    overflow: hidden;
    background-color: #ffffff;
}
.editorial-header .breadcrumbs {
    color: #3372df;
}
.editorial-header .breadcrumbs a {
    color: #3372df;
}
@media only screen and (min-width: 620px) {
    .editorial-header .container {
        position: relative;
    }
    .editorial-header .container::before {
        content: "";
        font-family: "icons";
        font-size: 1000px;
        line-height: 0;
        display: block;
        position: absolute;
        top: 0;
        right: 100%;
        color: #F2F2F2;
        margin: 168px -35px 0 0;
    }
}

.editorial-header__excerpt {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.3000em;
    /* 26px */
    padding-top: 1.3000em;
    padding-bottom: 0;
    text-align: left;
    width: 650px;
    color: #505050;
    letter-spacing: .01em;
    font-weight: 200;
    font-style: normal;
    line-height: 1.5;
}

.editorial-header__excerpt p {
    font-size: 16px;
    color: #505050;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.tags-author {
    display: block;
    padding-bottom: 10px;
    margin-left: 2%;
    margin-right: 2%;
    border-bottom: 2px solid #F2F2F2;
}

.tags span {
    font-size: 12px;
}

.tags span code {
    color: #333333;
}

.tags span code a {
    color: #333333;
}

.tags span code:hover {
    background-color: #333333;
    color: #fff;
}

.tags span code a:hover {
    color: #fff;
}

.author {
    float: right;
    padding-top: 4.5em;
    font-weight: 300;
}

.source {
    padding-right: 1em;
}

.napomena {
    margin-left: 2%;
    margin-right: 2%;
    border-bottom: 1px solid #F2F2F2;
    padding-bottom: 20px;
}

.napomena p {
    font-size: 12px;
    letter-spacing: .01em;
    font-weight: 200;
    font-style: normal;
    line-height: 1.5;
}

.komentari-naslovna {
    border-bottom: 4px solid #1C5BB1;
    margin-left: 2%;
    margin-right: 2%;
}

.komentari-naslovna p {
    padding-bottom: 20px;
}

.editorial-header .tag {
    padding-top: 10px;
}
.editorial-header__subtitle_under {
    font-size: 16px;
    padding-top: 0;
    letter-spacing: .01em;
    font-weight: bold;
    line-height: 1;
    padding-top: 0;
    padding-bottom: 0px;
    padding-top: 15px;
    color: #333;
    padding-left: 2%;
}

.editorial-header__subtitle {
    font-size: 27px;
    padding-top: 0;
    letter-spacing: .01em;
    line-height: 1.5;
    padding-top: 0;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 2%;
    padding-right: 2%;
    font-weight: bold;
    font-style: normal;
    line-height: 34px;
}

.editorial-header__intro {
    padding-left: 2%;
    padding-right: 2%;
    font-size: 16px;
    padding-bottom: 20px;
    text-align: left;
    letter-spacing: .01em;
    line-height: 1.5;
    color: #505050;
    width: 650px;
}

.editorial-header__intro p {
    padding-top: 0em;
    font-size: 15px !important;
    padding-top: 0em;
    padding-bottom: 0.5em;
    font-weight: bold !important;
}

.editorial-header__toc {
    margin-top: 26px;
}
.editorial-header__toc ol {
    padding-top: 0;
}
@media only screen and (min-width: 620px) {
    .editorial-header__toc ol {
        padding-top: 0;
    }
}

.editorial-header__toc-title {
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 13px;
    padding-bottom: 13px !important;
    color: #3372df;
}

.fotorama--helper > .fotorama {
    float: left;
    padding-right: 2%;
    width: 50%;
}

.fotorama--helper > p {
    padding-top: 0;
    padding-bottom: 1.5em;
}

.no-comment {
    width: 96%;
    border: 1px solid;
    border-radius: 6px;
    margin-left: 1em;
    margin-bottom: 1em;
}

.no-comment p {
    padding: .3em .3em .3em 1em;
    font-size: 15px;
}

@media all and (max-width: 667px) {
    .editorial-header__subtitle {
        font-size: 23px;
    }
}
@media all and (max-width: 667px) {
    .editorial-header__excerpt {
        padding-left: 2%;
        padding-right: 2%;
    }

    .editorial-header__intro, .editorial-header__excerpt {
        width: 100%;
    }
}
@media (orientation: landscape) and (min-width: 667px) and (max-width: 768px) {
    #content_tab {
        display: none;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    #content_tab {
        display: none;
    }
}
@media only screen and (max-width: 799px) and (min-width: 620px) {
    .editorial-header__excerpt p {
        padding-left: 2%;
        width: 100%;
        padding-right: 2%;
    }
}
@media all and (min-width: 1024px) {
    .editorial-header__excerpt {
        padding-left: 2%;
        padding-right: 2%;
        font-size: 16px;
        padding-top: 0em;
    }

    .komentari-naslovna p {
        padding-top: 0em;
    }
}
/**
*
* Editorial Header
*
**/
.summary-header {
    background-color: #3372df;
    padding-bottom: 78px;
    color: #ffffff;
    margin-bottom: 26px;
    box-shadow: inset 0 2px 0 0 #fff;
}
.summary-header .breadcrumbs__link {
    color: #ffffff;
}

.summary-header__anchor-list {
    margin-top: 52px;
}

.summary-header__anchors-item a {
    color: #ffffff;
}

/**
*
* Related items
*
**/
.related-guides {
    margin-top: 78px;
    padding-bottom: 50px;
    border-top: 2px solid #e0e0e0;
    padding-top: 50px;
}

.related-guides__list .list-links {
    padding-top: 0;
}
.related-guides__list a {
    display: block;
}

.related-guides__title {
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    font-size: 26px;
    font-weight: 300;
    line-height: 1.0000em;
    /* 26px */
    padding-top: 1.0000em;
    padding-bottom: 0;
    padding-top: 0;
}
@media only screen and (min-width: 800px) {
    .related-guides__title {
        font-family: "Roboto Condensed", Helvetica, sans-serif;
        font-size: 42px;
        font-weight: 300;
        line-height: 1.2381em;
        /* 52px */
        padding-top: 0.6190em;
        padding-bottom: 0;
    }
}
@media only screen and (min-width: 620px) {
    .related-guides__title {
        padding-top: 0;
    }
}

.related-guides__main-link {
    text-transform: uppercase;
}
.related-guides__main-link::before {
    content: '#';
    display: inline-block;
    padding-right: 2px;
}

/**
*
* In this guide
*
**/
.in-this-guide {
    margin-top: -78px;
}

.in-this-guide__title {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.3000em;
    /* 26px */
    padding-top: 1.3000em;
    padding-bottom: 0;
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    margin-bottom: 26px;
}

/**
*
* Articles section
*
**/
.articles-section {
    background: #F2F2F2;
    text-align: center;
    padding: 26px 0 104px;
}

.articles-count {
    color: #3372df;
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    font-weight: 400;
}

.article-section__icon {
    top: -26px;
}
@media only screen and (min-width: 620px) {
    .article-section__icon {
        top: -39px;
    }
}

.guides-section {
    background: #F2F2F2;
    text-align: center;
    padding: 26px 0 104px;
}

/**
*
* Page header
*
**/
.page-header {
    text-align: center;
}
.page-header .breadcrumbs {
    text-align: left;
    color: #3372df;
}
.page-header .breadcrumbs a {
    color: #3372df;
}
.page-header h3 {
    color: rgba(51, 51, 51, 0.87);
    padding-top: 52px;
}

.page-header__excerpt {
    position: relative;
    padding-top: 0;
}
.page-header__excerpt:last-child {
    padding-bottom: 78px;
}

/**
*
* Editorial Header
*
**/
.featured-section {
    background: #F2F2F2;
}

/**
*
* Editorial Header
*
**/
.featured-spotlight {
    background: rgba(51, 51, 51, 0.87);
    color: #ffffff;
    overflow: hidden;
    padding-bottom: 77px;
    margin-top: 52px;
}
.featured-spotlight p {
    padding-bottom: 26px;
}
.featured-spotlight .cta--primary {
    color: #ffffff;
}
.featured-spotlight .cta--primary:hover {
    color: #ffffff;
}

.featured-spotlight__container {
    position: relative;
}

@media only screen and (max-width: 619px) {
    .featured-spotlight__img {
        padding-top: 58.4%;
        padding-bottom: 0;
        height: 0;
        overflow: hidden;
        position: relative;
        width: 100%;
    }
}
.featured-spotlight__img img {
    margin: 0 auto;
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
}
@media only screen and (min-width: 620px) {
    .featured-spotlight__img img {
        width: auto;
        max-width: none;
        left: 109%;
    }
}
@media only screen and (min-width: 800px) {
    .featured-spotlight__img img {
        left: 107.4%;
    }
}

blockquote {
    background: #f9f9f9;
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: .5em 10px;
    quotes: "“" "”" "‘" "’";
}

blockquote:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: .1em;
    margin-right: .25em;
    vertical-align: -.4em;
}

blockquote p {
    display: inline;
}

/**
*
* Article nav
*
**/
.article-nav {
    overflow: hidden;
    position: relative;
}
.article-nav::before {
    content: '';
    border-left: 2px solid #e0e0e0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
}

.article-nav-link {
    padding: 26px 32px;
    float: left;
    width: 50%;
    position: relative;
}
.article-nav-link::before {
    position: absolute;
    top: 21px;
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 400;
}
@media only screen and (min-width: 620px) {
    .article-nav-link::before {
        top: 25px;
        font-size: 26px;
        display: block;
        padding: 13px 10px;
        color: #ffffff;
        background: #3372df;
    }
}

.article-nav p {
    padding: 0;
    margin: 0;
}

.article-nav-link--prev {
    text-align: right;
}
.article-nav-link--prev::before {
    font-family: "icons";
    left: 32px;
}
@media only screen and (min-width: 620px) {
    .article-nav-link--prev p {
        padding-left: 52px;
    }
}

.article-nav-link--next::before {
    font-family: "icons";
    right: 32px;
}
@media only screen and (min-width: 620px) {
    .article-nav-link--next p {
        padding-right: 52px;
    }
}

.article-nav-count {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.3000em;
    /* 26px */
    padding-top: 1.3000em;
    padding-bottom: 0;
    font-weight: 700;
}
@media only screen and (min-width: 800px) {
    .article-nav-count {
        font-family: "Roboto Condensed", Helvetica, sans-serif;
        font-size: 26px;
        font-weight: 300;
        line-height: 1.0000em;
        /* 26px */
        padding-top: 1.0000em;
        padding-bottom: 0;
    }
}
@media only screen and (min-width: 620px) {
    .article-nav-count {
        font-weight: 400;
    }
}

/**
*
* Text module
*
**/
@media only screen and (min-width: 620px) {
    .did-you-know ol {
        padding-top: 0 !important;
    }
}
.did-you-know .cta--primary {
    margin-top: 26px;
    font-weight: 500;
}
.did-you-know > .g--half {
    position: relative;
    padding-left: 0;
}
@media only screen and (min-width: 620px) {
    .did-you-know > .g--half {
        padding-left: 32px;
    }
}

.did-you-know__symbol {
    padding-bottom: 312px;
}
@media only screen and (min-width: 620px) {
    .did-you-know__symbol {
        padding-bottom: 26px;
    }
}
.did-you-know__symbol::after {
    content: "";
    color: #3372df;
    font-family: "icons";
    font-size: 300px;
    top: 150px;
    left: 30%;
    position: relative;
    display: block;
    width: 0;
}
@media only screen and (min-width: 620px) {
    .did-you-know__symbol::after {
        position: absolute;
        font-size: 400px;
        top: 200px;
        left: 110%;
    }
}
@media only screen and (min-width: 800px) {
    .did-you-know__symbol::after {
        position: absolute;
        font-size: 400px;
        top: 200px;
        left: 124%;
    }
}

/**
*
* Table of contents
*
**/
.toc__title {
    font-size: 16px;
    line-height: 1.6250em;
    /* 26px */
    padding-top: 1.6250em;
    padding-bottom: 0;
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    padding-bottom: 13px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
    padding-left: 2%;
}
@media only screen and (min-width: 800px) {
    .toc__title {
        font-size: 20px;
        font-weight: 300;
        line-height: 1.3000em;
        /* 26px */
        padding-top: 1.3000em;
        padding-bottom: 0;
    }
}
@media only screen and (min-width: 620px) {
    .toc__title {
        padding-bottom: 13px;
        margin-bottom: 13px;
    }
}

.toc__list {
    padding-top: 0;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 12px;
    margin-bottom: 13px;
    padding-left: 2% !important;
}
.toc__list a {
    display: block;
}

.toc__sublist {
    padding-top: 0;
}

/**
*
* Next Lessons
*
**/
.next-lessons {
    background: rgba(51, 51, 51, 0.87);
    padding: 26px 26px 52px;
    margin-top: 26px;
    color: #ffffff;
    position: relative;
}
@media only screen and (min-width: 620px) {
    .next-lessons h3 i {
        display: none;
    }
}
.next-lessons::before, .next-lessons::after {
    color: rgba(255, 255, 255, 0.5);
    position: absolute;
    display: none;
}
@media only screen and (min-width: 620px) {
    .next-lessons::before, .next-lessons::after {
        display: inline-block;
    }
}
@media only screen and (min-width: 620px) {
    .next-lessons::before {
        content: attr(data-current-lesson);
        font-family: "Roboto Condensed", Helvetica, sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 1;
        background: rgba(51, 51, 51, 0.87);
        display: inline-block;
        padding: 5px 7px;
        right: 127px;
        top: 143px;
        z-index: 1;
        color: rgba(255, 255, 255, 0.5);
    }
}
@media only screen and (min-width: 800px) {
    .next-lessons::before {
        font-size: 20px;
        padding-left: 15px;
        padding-right: 15px;
        top: 126px;
        right: 230px;
    }
}
@media only screen and (min-width: 620px) {
    .next-lessons::after {
        content: "";
        font-family: "icons";
        font-size: 150px;
        right: 40px;
        top: 185px;
    }
}
@media only screen and (min-width: 800px) {
    .next-lessons::after {
        font-size: 210px;
        right: 120px;
    }
}

.last-news {
    content: '';
    display: inline-block;
    height: 250px;
    float: left;
    background-color: #ffffff;
    margin-bottom: 20px;
}

.last-news--paragraph {
    display: block;
    float: left;
    border-bottom: 1px solid #F2F2F2;
    overflow: hidden;
}

.last-news--paragraph:hover .last-news--paragraph__content h4 {
    color: #1C5BB1;
    -webkit-transition: all .3s ease-in-out,all .3s ease-out;
    transition: all .3s ease-in-out,all .3s ease-out;
}
.last-news--paragraph:hover .last-news--paragraph__image img {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.8;
    -webkit-transition: all .3s ease-in-out,all .3s ease-out;
    transition: all .3s ease-in-out,all .3s ease-out;
}

.last-news--paragraph__image {
    margin: 0 auto;
    width: 60px;
    height: 60px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.last-news--paragraph__image img {
    height: 100%;
    position: relative;
    left: 100%;
    margin-left: -200%;
    -webkit-transition: all .3s ease-in-out,all .3s ease-out;
    transition: all .3s ease-in-out,all .3s ease-out;
}

.last-news--paragraph__content {
    display: block;
}

.last-news--paragraph__content h4 {
    text-align: left;
    padding-top: 5px;
    width: auto;
    font-size: 13px;
    margin: 0 auto;
    color: #505050;
    overflow: hidden;
    font-family: "Roboto Draft",Helvetica,sans-serif;
    letter-spacing: .01em;
    font-weight: 200;
    font-style: normal;
    line-height: 1.5;
}

.news-category--paragraph__image {
    margin: 0 auto;
    width: 60px;
    height: 60px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.news-category--paragraph__image img {
    height: 100%;
    position: relative;
    left: 100%;
    margin-left: -200%;
}

.news-category--paragraph__content {
    display: block;
}

.news-category--paragraph__content h4 {
    text-align: left;
    padding-top: 1px;
    width: auto;
    font-size: 13px;
    margin: 0 auto;
    color: #505050;
    overflow: hidden;
    letter-spacing: .01em;
    font-weight: 200;
    font-style: normal;
    line-height: 1.5;
}

.news-featured {
    content: '';
    display: block;
    width: 100%;
    height: 350px;
    float: left;
    margin-right: 2%;
    margin-bottom: 2%;
    background-color: transparent;
}

.news-category {
    content: '';
    display: block;
    width: 38%;
    height: 250px;
    float: left;
    height: 350px;
    background-color: #ffffff;
}

.news-category--header {
    background-color: #333333;
    color: #ffffff;
    text-align: left;
    padding: 0;
    margin: 0 auto;
    letter-spacing: .01em;
    font-weight: 200;
    font-style: normal;
    line-height: 1.5;
    padding: 10px 0 10px 5%;
}

.news-category--header h4 {
    font-size: 17px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-transform: uppercase;
}

.news-category--paragraph {
    display: block;
    float: left;
    border-bottom: 1px solid #F2F2F2;
    overflow: hidden;
    padding-top: .35em;
    padding-bottom: .35em;
}

.news-category--paragraph:hover .news-category--paragraph__content h4 {
    color: #1C5BB1;
}
.news-category--paragraph:hover .news-category--paragraph__image img {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.8;
    -webkit-transition: all .3s ease-in-out,all .3s ease-out;
    transition: all .3s ease-in-out,all .3s ease-out;
}

.news-category--paragraph__image img {
    -webkit-transition: all .3s ease-in-out,all .3s ease-out;
    transition: all .3s ease-in-out,all .3s ease-out;
}

.news-category--paragraph:last-child {
    /*border: transparent;*/
}

.news-category--paragraph__image {
    margin-left: 0.4em;
    padding-top: .4em;
    margin-right: .4em;
}

.news-category--paragraph__content {
    display: block;
    width: 245px;
}

.news-category--paragraph__content h4 {
    text-align: left;
    padding-top: 5px;
    font-weight: 500;
    width: auto;
    font-size: 13px;
    margin: 0 auto;
    color: #505050;
    overflow: hidden;
    letter-spacing: .01em;
    font-weight: 200;
    font-style: normal;
    line-height: 1.5;
}

.news-category-headline {
    position: relative;
    float: left;
    background-color: #ffffff;
}

.news-category-headline__image {
    margin: 0 auto;
    width: 411px;
    height: 240px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.news-category-headline__image img {
    position: relative;
    left: 100%;
    margin-left: -200%;
    width: 100%;
}

.news-category-headline__content {
    display: block;
    padding-top: 240px;
    height: 350px;
}

.nch__content--main {
    width: 410px;
}

.nch__content--main h4 {
    text-align: left;
    padding-top: 5px;
    padding-left: 10px;
    padding-bottom: 10px;
    width: auto;
    font-size: 95%;
    margin: 0 auto;
    color: #505050;
    overflow: hidden;
    letter-spacing: .01em;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5;
}

.nch__content--desc {
    height: 50px;
    overflow: hidden;
}

.nch__content--desc h5 {
    text-align: left;
    padding-top: 5px;
    padding-left: 10px;
    padding-bottom: 10px;
    width: auto;
    font-size: 85%;
    margin: 0 auto;
    color: #505050;
    letter-spacing: .01em;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
}

.helper-right {
    right: 0;
}

.overlay-category {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 15px 0;
    background: #ffffff;
}

.overlay-category--header {
    position: absolute;
    top: 10px;
    background: rgba(239, 239, 239, 0.4);
    padding: 6px 18px;
    z-index: 10;
}

.overlay-category p {
    color: #505050;
    padding-top: 0em;
    padding-bottom: 0em;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
    font-size: 100%;
}

.class-red {
    background: #E45959;
}
.class-sport {
    background-color: #318445
}
.class-4-tocka {
    background: rgb(234, 74, 80);
}

.class-sexy {
    background: #CA529F;
}

.class-blue {
    background-color: #2F6AB2;
}

.title-space {
    display: block;
    width: 100%;
    height: 110px;
    background-color: #ffffff;
}

.space--title-category {
    display: block;
    width: 100%;
    background-color: #ffffff;
    height: 42%;
    border: 1px solid #F2F2F2;
}

.overlay-category--description {
    display: block;
    padding: 12px 18px;
}

.overlay-category--description p {
    font-weight: 400;
    font-size: 13px;
    padding-top: 0em;
    color: #505050;
}

.overlay-category--header p {
    font-size: 15px;
}

.overlay-category--header p {
    color: #ffffff;
    padding-top: 0em;
    letter-spacing: .01em;
    font-weight: 200;
    font-style: normal;
    line-height: 1.5;
}

.overlay-category--header p:hover {
    color: #333333;
}

#responsive-right {
    float: left;
}

.related-news {
    display: block;
    height: auto;
    width: 100%;
    margin-bottom: 0.5em;
}

.related-news--title {
    background-color: #333333;
}

.related-news--title p {
    color: #ffffff;
    padding-bottom: 5px;
    margin: 0px;
    padding-left: 5%;
    padding-top: 5px;
}

.related-news--img {
    margin: 0 auto;
    width: 60px;
    height: 60px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.related-news--img img {
    height: 100%;
    position: relative;
    left: 100%;
    margin-left: -200%;
    -webkit-transition: all .3s ease-in-out,all .3s ease-out;
    transition: all .3s ease-in-out,all .3s ease-out;
}

.related-news--content {
    display: block;
    width: 300px;

}

.related-news--content h4 {
    text-align: left;
    padding-top: 5px;
    width: auto;
    font-size: 12px;
    margin: 0 auto;
    color: #505050;
    overflow: hidden;
    letter-spacing: .01em;
    font-weight: 200;
    font-style: normal;
    line-height: 1.5;
}

.related-news--paragraph {
    display: block;
    float: left;
    background-color: #ffffff;
    border-bottom: 1px solid #F2F2F2;
}

.related-news--paragraph:hover .related-news--content h4 {
    color: #1C5BB1;
}
.related-news--paragraph:hover .related-news--img img {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.8;
    -webkit-transition: all .3s ease-in-out,all .3s ease-out;
    transition: all .3s ease-in-out,all .3s ease-out;
}

.mobile--related-news {
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

.picture, .video, .pic-video {
    position: absolute;
    z-index: 1;
    background-color: #fff;
    font-size: 8px;
    color: #333;
    padding: 6px 4px 3px 6px;
}

/** Mobitel **/
@media (orientation: portrait) and (max-width: 667px) {
    .picture, .video, .pic-video {
        margin: 1em;
    }

    .news-category {
        -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        border-radius: 2px;
        /* future proofing */
    }

    .news-category-headline {
        border-radius: 2px;
        /* future proofing */
    }

    .news-category-headline {
        display: block;
        width: 96%;
        height: auto;
        background-color: #fff;
        padding-bottom: 10px;
        margin-bottom: 10px;
        margin-left: 2%;
        margin-right: 2%;
    }

    .last-news {
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
    }

    .last-news--paragraph p {
        font-size: 13px;
    }

    .news-category {
        height: auto;
    }

    .news-featured {
        height: 320px;
    }

    .news-category--paragraph {
        width: 100%;
        padding-left: 2%;
    }

    .news-category--paragraph__image {
        width: 75px;
        height: 75px;
    }

    .news-category--paragraph__image img {
        height: 100%;
        position: relative;
        left: 100%;
        margin-left: -200%;
    }

    .news-category--paragraph__content {
        display: block;
        width: 100%;
    }

    .news-category--paragraph__content h4 {
        padding-top: 15px;
        font-weight: 500;
        width: auto;
        font-size: .95rem;
        line-height: 1.5;
        color: #505050;
        letter-spacing: .03em;
        font-family: "Roboto Draft",Helvetica,sans-serif;
    }

    .helper-right {
        left: 0% !important;
        right: 75%;
    }

    .overlay-category--description {
        display: none;
    }

    .news-category--header {
        display: none;
    }

    .overlay-category--header {
        right: 0;
        top: 0px;
        left: 0;
    }

    .related-news--paragraph {
        width: 100%;
        padding-right: 2%;
    }

    .related-news--img {
        margin: 1em;
    }

    .related-news--content h4 {
        padding-top: 15px;
        font-weight: 400;
    }

    .news-category-headline__image {
        width: 100%;
    }
}
@media (orientation: portrait) and (max-width: 667px) {
    .picture, .video, .pic-video {
        margin: 1em;
    }

    .overlay-category--header {
        margin-left: 0;
        margin-right: 0;
    }

    .news-category {
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
    }

    .news-category--paragraph {
        padding: 0;
    }

    .last-news {
        height: auto;
        border-radius: 2px;
    }

    .last-news--paragraph__content h4 {
        padding-top: 10px;
        font-weight: 400;
        width: auto;
        font-size: .95rem;
        line-height: 1.5;
        color: #505050;
        letter-spacing: .03em;
        font-family: "Roboto Draft",Helvetica,sans-serif;
    }

    .news-category--paragraph__image, .last-news--paragraph__image {
        width: 75px;
        height: 75px;
        margin: 1em;
    }

    .nch__content--main {
        width: 100%;
    }

    .mobile--related-news {
        float: left;
        width: 100%;
        margin-left: 2%;
        margin-right: 2%;
        padding-bottom: 20px;
    }

    .desktop--related-news {
        display: none;
    }
}
@media (orientation: landscape) and (max-width: 667px) {
    .news-category {
        width: 48%;
        float: left;
    }

    .last-news--paragraph p {
        font-size: 13px;
    }

    .news-category-headline__image {
        width: 100%;
    }

    .nch__content--main {
        width: 100%;
    }

    .mobile--related-news {
        display: block;
        float: left;
        width: 100%;
        padding-bottom: 20px;
    }

    .mobile--related-news .related-news--paragraph {
        width: 50%;
    }

    .mobile--related-news .related-news--img {
        margin: 1em;
    }

    .mobile--related-news .related-news--content h4 {
        font-weight: 400;
        padding-top: 10px;
    }

    .desktop--related-news {
        display: none;
    }
}
@media (orientation: landscape) and (max-width: 667px) {
    .news-featured {
        height: 318px;
    }

    .last-news--paragraph__content h4 {
        padding-top: 10px;
        font-weight: 400;
        width: auto;
        font-size: .85rem;
        line-height: 1.5;
        color: #505050;
        letter-spacing: .03em;
    }

    .last-news--paragraph__image {
        margin: 1em;
    }

    .last-news {
        width: 96%;
        height: 100%;
        margin-left: 2%;
        margin-right: 2%;
    }

    .last-news--paragraph {
        width: 50%;
    }

    .news-category {
        width: 96%;
        margin-right: 2%;
        margin-left: 2%;
        height: auto;
    }

    .news-category--paragraph {
        width: 50%;
    }

    .news-category--paragraph__image {
        margin: 1em;
        padding-top: 0em;
    }

    .news-category--paragraph__content {
        width: 100%;
    }

    .news-category--paragraph__content h4 {
        padding-top: 10px;
        font-size: .85rem;
        font-weight: 400;
    }

    .news-category-headline {
        margin-bottom: 10px;
        width: 96%;
        margin-right: 2%;
        margin-left: 2%;
    }

    .picture, .video, .pic-video {
        margin: 1em;
    }
}
@media (orientation: portrait) and (min-width: 667px) and (max-width: 768px) {
    .tabs {
        display: none;
    }

    .tab_container {
        display: none;
    }

    .news-category-headline {
        width: 48%;
        margin-right: 4%;
    }

    .news-category {
        width: 44%;
    }

    .news-category-headline {
        height: 350px;
    }

    .related-news--img {
        margin: 1em;
    }

    .related-news--content {
        padding-top: 6px;
    }

    .desktop--related-news {
        display: none;
    }

    .mobile--related-news {
        display: block;
        float: left;
        width: 100%;
        padding-bottom: 20px;
    }

    .picture, .video, .pic-video {
        margin: 1em;
    }
}
@media (orientation: landscape) and (min-width: 667px) and (max-width: 768px) {
    .news-featured {
        width: 96%;
        margin-left: 2%;
    }

    .news-category-headline {
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
    }

    .news-category {
        width: 96%;
        height: auto;
        margin-top: 10px;
        margin-left: 2%;
        margin-right: 2%;
    }

    .news-category-headline__image {
        width: 100%;
    }

    .news-category-headline__content {
        width: 100%;
    }

    .nch__content--main, .nch__content--desc {
        width: 100%;
    }

    .news-category--paragraph {
        width: 50%;
    }

    .news-category--paragraph__content {
        width: 100%;
        padding-top: 15px;
    }

    .news-category--paragraph__image {
        margin: 1em;
    }

    .last-news {
        width: 96%;
        margin-right: 2%;
        margin-left: 2%;
        float: left;
        height: auto;
    }

    .last-news--paragraph {
        width: 50%;
    }

    .last-news--paragraph__image {
        margin: 1em;
    }

    #responsive-right {
        float: left;
    }

    .helper-right {
        right: 70%;
        left: 0 !important;
        position: absolute;
    }

    .desktop--related-news {
        display: none;
    }

    .related-news--img {
        margin: 1em;
    }

    .related-news--content {
        padding-top: 6px;
    }

    .related-news--content p {
        font-weight: 400;
    }

    .mobile--related-news {
        display: block;
        float: left;
        width: 100%;
        padding-bottom: 20px;
    }

    .picture, .video, .pic-video {
        margin: 1em;
    }
}
@media all and (min-width: 769px) and (max-width: 1024px) {
    #responsive-right {
        float: right;
    }

    .last-news {
        width: 100%;
    }
}
@media all and (min-width: 1024px) {
    #responsive-right {
        float: right;
    }

    .last-news {
        width: 60%;
        margin-right: 2%;
    }

    .news-category-headline {
        width: 62%;
    }

    .news-category--paragraph__content h4 {
        font-weight: 400;
    }

    .last-news--paragraph__content h4 {
        font-weight: 400;
    }

    .last-news--paragraph__image {
        margin-left: .4em;
        padding-top: .4em;
        margin-right: .4em;
    }

    .last-news--paragraph__content {
        width: 392px;
    }

    .related-news--title {
        padding-bottom: 5px;
        margin: 0px;
        padding-left: 5%;
        padding-top: 5px;
    }

    .related-news--img {
        margin-left: .4em;
        padding-top: .4em;
        margin-right: .4em;
        margin-bottom: .16em;
    }

    .related-news--content h4 {
        font-weight: 400;
    }

    .mobile--related-news {
        display: none;
    }
}
.banner-board {
    padding-top: 30px;
    display: block;
    width: auto;
    height: 250px;
}

.banner-board > a img {
    float: none;
    margin: 0 auto;
    top: 50%;
    left: 10%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: relative;
    background-color: #ffffff;
}

.banner-rectanble, .promo {
    content: '';
    display: block;
    width: 300px;
    height: 250px;
    max-height: 400px;
    float: left;
    background-color: #ffffff;
}

.promo--header {
    background-color: #333333;
    color: #ffffff;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 auto;
}

.promo--header h4 {
    font-size: 17px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.promo--paragraph {
    display: block;
    float: left;
    border-bottom: 1px solid #F2F2F2;
}

.promo--paragraph:hover .promo--paragraph__content h4 {
    color: #1C5BB1;
}
.promo--paragraph:hover .promo--paragraph__image img {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.8;
    -webkit-transition: all .3s ease-in-out,all .3s ease-out;
    transition: all .3s ease-in-out,all .3s ease-out;
}

.promo--paragraph__image {
    margin: 0 auto;
    width: 60px;
    height: 60px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.promo--paragraph__image img {
    height: 100%;
    position: relative;
    left: 100%;
    margin-left: -200%;
    -webkit-transition: all .3s ease-in-out,all .3s ease-out;
    transition: all .3s ease-in-out,all .3s ease-out;
}

.promo--paragraph__content {
    display: block;
}

.promo--paragraph__content h4 {
    text-align: left;
    padding-top: 5px;
    width: auto;
    font-size: 13px;
    margin: 0 auto;
    color: #505050;
    overflow: hidden;
    letter-spacing: .01em;
    font-weight: 200;
    font-style: normal;
    line-height: 1.5;
}

#promo-text, #avlija-text {
    padding-right: 54%;
    padding-left: 15px;
    float: left;
}

.banner-poll {
    content: '';
    display: block;
    width: 38%;
    height: 250px;
    max-height: 400px;
    float: left;
    background-color: #ffffff;
}

.g-wide--1.g-wide--last.g-medium--half.g--last > .banner-poll {
    width: 100%;
}

.banner-poll--header {
    background-color: #333333;
    color: #ffffff;
    text-align: center;
    padding: 0;
    margin: 0 auto;
}

.banner-poll--header h4 {
    text-align: left;
    font-size: 14px;
    padding-top: 5px;
    padding-bottom: 5px;
    letter-spacing: .01em;
    font-weight: 200;
    font-style: normal;
    line-height: 1.5;
    padding-left: 5%;
}

.banner-poll--helper {
    width: 100%;
}

.banner-poll--content {
    display: block;
    text-align: center;
}

.banner-poll--choice {
    line-height: 1.88em;
    padding-left: 6%;
    height: 10.1em;
    width: 250px;
    margin-top: auto;
    display: table-cell;
    vertical-align: middle;
}

.custom-radio-label {
    padding-left: 10px;
    letter-spacing: .01em;
    font-weight: 200;
    font-style: normal;
    line-height: 1.5;
    font-size: 12px;
    width: 195px;
    height: 15px;
    overflow: hidden;
}

.banner-poll--footer {
    background-color: #333333;
    text-align: right;
    padding-right: 5%;
}

.banner-poll--footer__container {
    padding-top: 5px;
    padding-bottom: 5px;
}





input[type=checkbox]:not(old),
input[type=radio   ]:not(old){
    width     : 2em;
    margin    : 0;
    padding   : 0;
    font-size : 1em;
    opacity   : 0;
}
input[type=checkbox]:not(old) + label,
input[type=radio   ]:not(old) + label{
    display      : inline-block;
    margin-left  : -2.5em;
    line-height  : 1.5em;
}

input[type=checkbox]:not(old) + label > span,
input[type=radio   ]:not(old) + label > span{
    display          : inline-block;
    width            : 0.875em;
    height           : 0.875em;
    margin           : 0.25em 0.5em 0.25em 0.25em;
    border           : 0.0625em solid rgb(192,192,192);
    border-radius    : 0.25em;
    background       : rgb(224,224,224);
    background-image :    -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
    background-image :     -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
    background-image :      -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
    background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
    background-image :         linear-gradient(rgb(240,240,240),rgb(224,224,224));
    vertical-align   : bottom;
}

input[type=checkbox]:not(old):checked + label > span,
input[type=radio   ]:not(old):checked + label > span{
    background-image :    -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
    background-image :     -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
    background-image :      -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
    background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
    background-image :         linear-gradient(rgb(224,224,224),rgb(240,240,240));
}
input[type=checkbox]:not(old):checked + label > span:before{
    content     : '✓';
    display     : block;
    width       : 1em;
    color       : rgb(153,204,102);
    font-size   : 0.875em;
    line-height : 1em;
    text-align  : center;
    text-shadow : 0 0 0.0714em rgb(115,153,77);
    font-weight : bold;
}


input[type=radio]:not(old):checked + label > span > span{
    display          : block;
    width            : 0.5em;
    height           : 0.5em;
    margin           : 0.125em;
    border           : 0.0625em solid rgb(115,153,77);
    border-radius    : 0.125em;
    background       : rgb(153,204,102);
    background-image :    -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
    background-image :     -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
    background-image :      -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
    background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
    background-image :         linear-gradient(rgb(179,217,140),rgb(153,204,102));
}



.btn-poll {
    background-color: #333;
    color: #090;
    border: 0;
    font-size: 10px;
    font-weight: bold;
    padding: 5px 15px;
    border-radius: 2px;
    text-transform: uppercase;
}

.btn-poll:hover, .btn-poll:active, .btn-poll:focus {
    -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    outline: none;
}
.btn-vote:disabled {
    opacity: .5;
}
.btn-vote {
    background-color: #276DE2;
    color: #fff;
    font-weight: bold;
    font-size: 10px;
    padding: 5px 15px;
    line-height: 1.2em;
    border:#1C5BB1 solid 1px;
    box-shadow: 0px 0px 2px 1px #000;
    text-transform: uppercase;
}
.btn-vote:hover {
    background: #1C5BB1;
    color: #fff;
}
.banner-poll--score {
    background-color: #333;
    color: #fff;
    font-weight: bold;
    font-size: 10px;
    padding: 5px 15px;
    line-height: 1.2em;
    border:#666 solid 1px;
    box-shadow: 0px 0px 2px 1px #000;
    text-transform: uppercase;
}

.banner-poll--scorel, .banner-poll--score:visited {
    color: #ffffff;
    text-transform: uppercase;
    font-size: 12px;
    height: 162px;
    padding-left: 2%;
    padding-right: 2%;
}

.banner-poll--preview {
    padding-left: 2%;
    padding-right: 2%;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 12px;
    height: 162px;
}

.bar {
    margin: 1px 0px 1px 0px;
    height: 15px;
    font-size: 9px;
    position: relative;
}

.bar-answer p {
    font-size: 10px;
    padding-top: 0;
}

.bar > span {
    display: block;
    height: 100%;
    padding-left: 3px;
    background-color: #2F6AB4;
    position: relative;
    overflow: hidden;
    -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

@-webkit-keyframes expandWidth {
    0% {
        width: 0;
    }
    100% {
        width: auto;
    }
}
@keyframes expandWidth {
    0% {
        width: 0;
    }
    100% {
        width: auto;
    }
}
.horoskop {
    content: '';
    display: block;
    width: 300px;
    height: 350px;
    max-height: 400px;
    background-color: #fff;
    float: left;
}

.horoskop--header {
    background-color: #673FC7;
    color: #ffffff;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 auto;
}

.fb-like-box {
    background-color: #ffffff;
}

/** Larger Screens - desktops and tablets **/
@media all and (max-width: 736px) {
    .fb-like-box, .fb_iframe_widget, .modal--show  {
        display: none !important;
    }
}
@media all and (max-width: 667px) {
    .banner-board, .banner-poll, .banner-rectanble, .promo, .horoskop, .banner-rectanble, .banner--billboard, .banner--jumbo, .banner-skin-left, .banner-skin-right, .banner-rectanble , .box-partners, .modal--show{
        display: none;
    }
}
@media (min-width: 667px) and (max-width: 768px) {
    .promo, .banner-poll, .horoskop, .banner-rectanble, .banner--billboard, .banner--jumbo, .banner-skin-left, .banner-skin-right, .banner-rectanble , .box-partners, .modal--show {
        display: none;
    }
}
@media all and (min-width: 1024px) {
    .promo--paragraph__image {
        margin-left: .4em;
        padding-top: .4em;
        margin-right: .4em;
        margin-bottom: .16em;
    }

    .banner--jumbo {
        display: block;
        overflow: hidden;
        position: relative;
        background-color: #ffffff;
        width: 660px;
        height: 90px;
        float: left;
    }

    .banner--billboard {
        display: block;
        overflow: hidden;
        position: relative;
        background-color: #ffffff;
        width: 980px;
        height: 100px;
        float: left;
        text-align: center;
    }

    .banner-fixni {
        display: block;
        overflow: hidden;
        position: relative;
        background-color: #ffffff;
        width: 300px;
        height: 100px;
        float: left;
    }

    .banner-skin-left {
        background-color: #ffffff;
        width: 160px;
        height: 600px;
        position: absolute;
        margin-left: -170px;
        margin-top: 55px;
    }

    .banner-skin-right {
        background-color: #ffffff;
        width: 160px;
        height: 600px;
        position: absolute;
        margin-left: 990px;
        margin-top: 55px;
    }
}
has-overlay {
    overflow: hidden;
}
has-overlay > body {
    height: 100%;
    overflow-y: scroll;
}
@media screen and (max-width: 30em) {
    has-overlay > body {
        overflow: hidden;
    }
}

.modal--show {
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    display: none\9;
}
.modal--show:target, .is-active.modal--show {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    width: auto;
    height: auto;
    opacity: 1;
}
.is-active.modal--show {
    display: block\9;
    height: 100% \9;
    width: 100% \9;
}
.modal--show:target, .is-active.modal--show {
    display: block\9;
}
.modal--show .modal-inner {
    position: absolute;
    top: 150px;
    left: 50%;
    z-index: 20;
    margin-left: -240px;
    width: 480px;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
@media \0screen\,screen\9 {
    .modal--show .modal-inner {
        background: transparent;
    }
}
.modal--show .modal-inner > img,
.modal--show .modal-inner > video,
.modal--show .modal-inner > iframe {
    width: 100%;
    height: auto;
    min-height: 300px;
}
.modal--show .modal-inner > img {
    width: auto;
    max-width: 100%;
}
.modal--show .modal-inner header {
    line-height: 3em;
}
.modal--show .modal-content {
    position: relative;
    max-height: 400px;
    max-height: 80vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
@media \0screen\,screen\9 {
    .modal--show .modal-content {
        overflow: visible;
    }
}
.modal--show .modal-content > * {
    max-width: 100%;
}
.modal--show footer {
    border-top: 1px solid white;
    padding: 0 1.2em 18px;
    background: #f0f0f0;
    border-radius: 2px;
}
.modal--show .modal-close {
    display: block;
    height: 1px;
    clip: rect(0 0 0 0);
    margin: -1px;
    overflow: hidden;
}
.modal--show .modal-close:focus:after {
    outline: 1px dotted;
    outline: -webkit-focus-ring-color auto 5px;
}
.modal--show .modal-close:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}
.modal--show .modal-close:after {
    content: '\00d7';
    position: absolute;
    top: 125px;
    right: 50%;
    z-index: 20;
    margin-right: -240px;
}
@media screen and (max-width: 690px) {
    .modal--show .modal-inner {
        width: auto;
        left: 20px;
        right: 20px;
        margin-left: 0;
    }
    .modal--show .modal-close:after {
        margin-right: 0 !important;
        right: 20px;
    }
}
@media screen and (max-width: 30em) {
    .modal--show {
        -webkit-transform: translate(0, 400px);
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        -webkit-transition: opacity 1ms .25s;
        transition: opacity 1ms .25s;
        display: block;
        bottom: auto;
    }
    .modal--show:target, .is-active.modal--show {
        height: 100%;
    }
    .modal--show:before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 30;
    }
    .modal--show .modal-inner {
        box-sizing: border-box;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        overflow: auto;
    }
    .modal--show .modal-content {
        max-height: none;
        -ms-word-break: break-all;
        word-break: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }
    .modal--show .modal-close {
        right: auto;
    }
    .modal--show .modal-close:before {
        display: none;
    }
    .modal--show .modal-close:after {
        top: 5px !important;
        right: 5px;
        left: auto;
        z-index: 40;
        margin-left: 0;
    }
}
@media screen and (max-height: 46em) and (min-width: 30em) {
    .modal--show .modal-content {
        max-height: 340px;
        max-height: 50vh;
    }
}
@media screen and (max-height: 36em) and (min-width: 30em) {
    .modal--show .modal-content {
        max-height: 265px;
        max-height: 40vh;
    }
}
.is-stacked.modal--show {
    -webkit-transform: translate(0, 0) scale(1, 1);
    transform: translate(0, 0) scale(1, 1);
    opacity: 1;
}
.is-stacked.modal--show .modal-inner {
    -webkit-animation: scaleDown .7s ease both;
    animation: scaleDown .7s ease both;
}
.is-stacked.modal--show .modal-close {
    opacity: 0;
}
@media screen and (max-width: 30em) {
    .is-stacked.modal--show {
        -webkit-animation: scaleDown .7s ease both;
        animation: scaleDown .7s ease both;
    }
    .is-stacked.modal--show .modal-inner {
        -webkit-animation: none;
        animation: none;
    }
    .is-stacked.modal--show .modal-close {
        opacity: 1;
    }
}

.modal--show {
    color: #222;
    line-height: 1.3;
}
.modal--show .modal-inner {
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
    max-width: 100%;
    -webkit-transition: max-width 0.25s linear, margin-left 0.125s linear;
    transition: max-width 0.25s linear, margin-left 0.125s linear;
}
.modal--show header {
    border-bottom: 1px solid #ddd;
    padding: 0 1.2em;
}
.modal--show header > h2 {
    margin: 0.5em 0;
}
.modal--show .modal-content {
    border-bottom: 1px solid #ddd;
    padding: 15px 1.2em;
}
.modal--show footer {
    border-top: 1px solid white;
    padding: 0 1.2em 18px;
    background: #f0f0f0;
    border-radius: 2px;
}
.modal--show .modal-close {
    text-indent: -100px;
}
.modal--show .modal-close:before {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAEUlEQVQoz2NgeEYAjioYSQoAzOTmAXhPhyoAAAAASUVORK5CYII=");
}
.modal--show .modal-close:after {
    content: '\00d7';
    background: #fff;
    border-radius: 2px;
    padding: 2px 8px;
    font-size: 1.2em;
    text-decoration: none;
    text-indent: 0;
}
@media screen and (max-width: 30em) {
    .modal--show:before {
        background-color: #27aae2;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#27aae2), to(#1c9cd3));
        background-image: -webkit-linear-gradient(top, #27aae2, #1c9cd3);
        background-image: linear-gradient(to bottom, #27aae2, #1c9cd3);
        height: 3em;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    }
    .modal--show .modal-inner {
        padding-top: 3em;
        box-shadow: none;
    }
    .modal--show .modal-close {
        text-decoration: none;
    }
    .modal--show .modal-close:after {
        content: attr(data-close);
        font-size: 1em;
        padding: 0.5em 1em;
    }
}

/*
 * Plain Screen Theme Styles
 */
/**
*
* Grid
*
**/
@media only screen and (min-width: 620px) and (max-width: 799px) {
    .g-medium--1 {
        float: left;
        margin-right: 4.5%;
        width: 30.3%;
    }

    .g-medium--push-1 {
        margin-left: 34.8%;
    }

    .g-medium--pull-1 {
        margin-right: 34.8%;
    }

    .g-medium--2 {
        float: left;
        margin-right: 4.5%;
        width: 65.1%;
    }

    .g-medium--push-2 {
        margin-left: 69.6%;
    }

    .g-medium--pull-2 {
        margin-right: 69.6%;
    }

    .g-medium--3 {
        float: left;
        margin-right: 4.5%;
        width: 99.9%;
        margin-right: 0;
    }

    .g-medium--full {
        float: left;
        margin-right: 4.5%;
        margin-right: 0;
        width: 100%;
    }

    .g--third {
        float: left;
        margin-right: 4.5%;
        width: 30.3%;
    }

    .g--half,
    .g-medium--half {
        float: left;
        margin-right: 4.5%;
        width: 47.75%;
    }

    .g-medium--last {
        margin-right: 0;
    }

    .g-medium--last + .g-medium--half {
        clear: left;
    }

    .g--pull-half {
        margin-right: 52.25%;
    }
}
@media only screen and (min-width: 800px) {
    .g-wide--1 {
        float: left;
        margin-right: 3.7%;
        width: 22.2%;
    }

    .g-wide--push-1 {
        margin-left: 25.9%;
    }

    .g-wide--pull-1 {
        margin-right: 25.9%;
    }

    .g-wide--3 {
        float: left;
        margin-right: 1.7%;
        width: 67%;
    }

    .g-wide--1 {
        float: left;
        margin-right: 3.7%;
        width: 30.3%;
    }

    .g-wide--2 {
        float: left;
        margin-right: 3.7%;
        width: 48.1%;
    }

    .g-wide--push-2 {
        margin-left: 51.8%;
    }

    .g-wide--pull-2 {
        margin-right: 51.8%;
    }

    .g-wide--3 {
        float: left;
        margin-right: 1.7%;
        width: 67%;
    }

    .g-wide--1 {
        float: left;
        margin-right: 3.7%;
        width: 30.3%;
    }

    .g-wide--3 {
        float: left;
        margin-right: 3.7%;
        width: 74%;
    }

    .g-wide--push-3 {
        margin-left: 77.7%;
    }

    .g-wide--pull-3 {
        margin-right: 77.7%;
    }

    .g-wide--3 {
        float: left;
        margin-right: 1.7%;
        width: 67%;
    }

    .g-wide--1 {
        float: left;
        margin-right: 3.7%;
        width: 30.3%;
    }

    .g-wide--4 {
        float: left;
        margin-right: 3.7%;
        width: 99.9%;
        margin-right: 0;
    }

    .g-wide--3 {
        float: left;
        margin-right: 1.7%;
        width: 67%;
    }

    .g-wide--1 {
        float: left;
        margin-right: 3.7%;
        width: 30.3%;
    }

    .g-wide--last {
        margin-right: 0;
    }

    .g-wide--full {
        float: left;
        margin-right: 3.7%;
        margin-right: 0;
        width: 100%;
    }

    .g--third {
        float: left;
        margin-right: 3.7%;
        width: 30.8%;
    }

    .g--half,
    .g-wide--half {
        float: left;
        margin-right: 3.7%;
        width: 48.15%;
    }

    .g--pull-half {
        margin-right: 51.85%;
    }
}
.g--last {
    margin-right: 0;
}

.g--centered {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.grid-overlay {
    display: none;
    pointer-events: none;
}
.debug .grid-overlay {
    box-sizing: content-box;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    display: block;
}
@media only screen and (min-width: 620px) {
    .debug .grid-overlay {
        max-width: 688px;
    }
}
@media only screen and (min-width: 800px) {
    .debug .grid-overlay {
        padding-left: 4.4%;
        padding-right: 4.4%;
        max-width: 990px;
    }
}
.debug .grid-overlay [class*="g-"] {
    height: 100%;
    background-color: rgba(89, 89, 89, 0.2);
}
@media only screen and (min-width: 620px) and (max-width: 799px) {
    .debug .grid-overlay .g-wide--last {
        display: none;
    }
}
@media only screen and (max-width: 619px) {
    .debug .grid-overlay {
        display: none;
    }
}

/**
*
* Typography
*
**/
h1, h2, h3, h4, h5, p {
    margin: 0;
}

.small,
small {
    font-size: 13px;
    line-height: 2.0000em;
    /* 26px */
    padding-top: 2.0000em;
    padding-bottom: 0;
}

.base,
p,
ul,
ol {
    font-size: 16px;
    line-height: 1.6250em;
    /* 26px */
    padding-top: 1.6250em;
    padding-bottom: 0;
}

.medium,
h4 {
    font-size: 16px;
    line-height: 1.6250em;
    /* 26px */
    padding-top: 1.6250em;
    padding-bottom: 0;
}
@media only screen and (min-width: 800px) {
    .medium,
    h4 {
        font-size: 20px;
        font-weight: 300;
        line-height: 1.3000em;
        /* 26px */
        padding-top: 1.3000em;
        padding-bottom: 0;
    }
}

.large,
h3 {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.3000em;
    /* 26px */
    padding-top: 1.3000em;
    padding-bottom: 0;
}
@media only screen and (min-width: 800px) {
    .large,
    h3 {
        font-family: "Roboto Condensed", Helvetica, sans-serif;
        font-size: 26px;
        font-weight: 300;
        line-height: 1.0000em;
        /* 26px */
        padding-top: 1.0000em;
        padding-bottom: 0;
    }
}

.xlarge,
h2 {
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    font-size: 26px;
    font-weight: 300;
    line-height: 1.0000em;
    /* 26px */
    padding-top: 1.0000em;
    padding-bottom: 0;
}
@media only screen and (min-width: 800px) {
    .xlarge,
    h2 {
        font-family: "Roboto Condensed", Helvetica, sans-serif;
        font-size: 42px;
        font-weight: 300;
        line-height: 1.2381em;
        /* 52px */
        padding-top: 0.6190em;
        padding-bottom: 0;
    }
}

.xxlarge,
h1 {
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    font-size: 42px;
    font-weight: 300;
    line-height: 1.2381em;
    /* 52px */
    padding-top: 0.6190em;
    padding-bottom: 0;
}
@media only screen and (min-width: 800px) {
    .xxlarge,
    h1 {
        font-family: "Roboto Condensed", Helvetica, sans-serif;
        font-size: 68px;
        font-weight: 300;
        line-height: 1.1471em;
        /* 78px */
        padding-top: 0.3824em;
        padding-bottom: 0;
    }
}

.huge {
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    font-size: 68px;
    font-weight: 300;
    line-height: 1.1471em;
    /* 78px */
    padding-top: 0.3824em;
    padding-bottom: 0;
}
@media only screen and (min-width: 800px) {
    .huge {
        font-family: "Roboto Condensed", Helvetica, sans-serif;
        font-size: 110px;
        font-weight: 300;
        line-height: 1.19em;
        /* 130px */
        padding-top: 0.2364em;
        padding-bottom: 0;
    }
}

li > p {
    padding-top: 0;
}

/**
*
* Button
*
**/
.button, .button--primary, .button--secondary, .button--secondary-variation {
    display: inline-block;
    padding: 12px 32px;
    margin-bottom: 13px;
    margin-top: 13px;
    min-height: 26px;
    text-align: center;
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    font-weight: 600;
    text-decoration: none;
    outline: 0;
    -webkit-transition: none;
    transition: none;
}
.button:hover, .button--primary:hover, .button--secondary:hover, .button--secondary-variation:hover {
    background: #4d4d4d;
    color: #ffffff;
    border: 1px solid #4d4d4d;
    text-decoration: none;
}

.button--primary {
    background: #4285f4;
    color: #ffffff;
    border: 1px solid #1266f1;
}

.button--secondary {
    background: #ffffff;
    color: #3372df;
    border: 1px solid #e6e6e6;
}

.button--secondary-variation {
    background: #ffffff;
    color: #3372df;
    border: 1px solid #e6e6e6;
    border-color: transparent;
}

.button-size {
    width: 103px;
    height: 35px;
}

.button-size-small {
    width: 35px;
    height: 35px;
}

.social-button {
    margin-left: 2%;
    width: 3em;
}

.social-button-logo-container {
    width: 100%;
    height: 100%;
    bottom: 200%;
    -webkit-transform-origin: bottom;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform .5s ease;
    -webkit-transform: translateY(0) rotateX(0);
    -moz-transform: translate(0);
    position: relative;
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
    -webkit-transition: all .3s ease-in-out,all .3s ease-out;
    transition: all .3s ease-in-out,all .3s ease-out;
}

.social-button:hover .social-button-logo-container {
    -webkit-transform: translateY(5px) rotateX(-120deg);
    -moz-transform: translate(0px, 35px);
}

.navdrawer-container ul li a.facebook-font {
    text-align: center;
    line-height: 35px;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    font-size: .8em;
    font-weight: 800;
    letter-spacing: -0.1em;
    font-size: 12px;
}

.facebook-logo {
    width: 100%;
    height: 100%;
    border: none;
    color: white;
    font-size: 1.25em;
    font-weight: 800;
    letter-spacing: -0.1em;
    position: absolute;
}

.facebook-blue {
    background-color: #1C5BB1;
}

.reverse-logo {
    -webkit-transform: rotateX(-180deg) translateZ(5px);
}

.facebook-font-blue {
    color: #1C5BB1;
    font-size: 12px;
}

.facebook-font-white {
    color: #ffffff;
    font-size: 12px;
    padding-top: 10px !important;
}

.social-button-sides {
    position: absolute;
    width: 100%;
    height: 5px;
    top: 0;
    left: 0;
    -webkit-transform-origin: top;
    -webkit-transform: rotateX(-90deg);
    -webkit-transition: background-color .5s ease-out;
    -moz-transform-origin: top;
    -moz-transform: rotateX(-90deg);
    -moz-transition: background-color .5s ease-out;
}

.twitter-font-blue {
    color: #00A0D1;
}

.twitter-background {
    background-color: #00A0D1;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00A0D1), to(#008DB8));
}

.tweet-text {
    text-align: right;
    padding-right: 10px;
}

.twitter-logo {
    width: 100%;
    height: 100%;
    border: none;
    color: white;
    font-size: 1.25em;
    font-weight: 800;
    letter-spacing: -0.1em;
    position: absolute;
    background: #00A0D1 url("https://twitter.com/images/resources/twitter-bird-dark-bgs.png") no-repeat;
    background-size: contain;
}

.social--mobile, .social--mobile--bottom {
    display: none;
}

.btn-top {
    position: fixed;
    margin-left: 1000px;
    bottom: 20px;
    background-color: #F6F6F6;
    padding: .1em .5em;
    border-radius: 3px;
    font-size: 20px;
    border: none;
}

@media all and (max-width: 667px) {
    .social-buttons {
        display: none;
    }

    .social--mobile, .social--mobile--bottom {
        display: block;
    }

    .social--mobile--bottom {
        padding-top: 20px;
    }

    .social--mobile .share {
        position: relative;
        top: 0;
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
        padding-top: 0px;
    }

    .social--mobile .share a, .social--mobile--bottom .share a {
        padding-top: 0em;
        padding-bottom: 10px;
    }

    .social--mobile--bottom .share {
        position: relative;
        top: 0;
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
        padding-top: 0px;
    }
}
@media (orientation: landscape) and (min-width: 667px) and (max-width: 768px) {
    .social-buttons {
        display: none;
    }

    .social--mobile, .social--mobile--bottom {
        display: block;
    }

    .social--mobile .share, .social--mobile--bottom .share {
        position: relative;
        top: 0%;
        left: 75%;
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
    }

    .social--mobile .share a, .social--mobile--bottom .share a {
        padding-top: 0em;
        padding-bottom: 10px;
    }

    .social--mobile--bottom .share a {
        padding-top: 20px;
    }
}
@media (orientation: portrait) and (min-width: 667px) and (max-width: 768px) {
    .social-buttons {
        display: none;
    }

    .social--mobile {
        display: block;
    }

    .social--mobile .share, .social--mobile--bottom .share {
        position: relative;
        top: 0%;
        left: 75%;
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
    }

    .social--mobile .share a, .social--mobile--bottom .share a {
        padding-top: 0em;
        padding-bottom: 10px;
    }
}
@media all and (min-width: 768px) and (max-width: 1024px) {
    .social--mobile--bottom {
        display: block;
    }

    .social--mobile .share a {
        padding-top: 0em;
        padding-bottom: 10px;
    }

    .social--mobile--bottom .share a {
        padding-top: 20px;
    }
}
@media all and (max-width: 1024px) {
    .btn-top {
        display: none;
    }
}
@media all and (min-width: 1024px) {
    .social--mobile--bottom {
        display: block;
    }

    .social--mobile--bottom .share {
        position: relative;
        top: 0%;
        left: 75%;
        -webkit-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
    }

    .social--mobile--bottom .share a {
        padding-top: 0px;
        margin-bottom: -30px;
    }
}
/**
*
* List
*
**/
ul,
ol {
    list-style: none;
    margin: 0;
}
@media only screen and (max-width: 619px) {
    ul,
    ol {
        padding-left: 0;
    }
}

ul li {
    position: relative;
    padding-left: 16px;
}
ul li::before {
    font-family: "icons";
    font-size: 13px;
    display: block;
    font-weight: 400;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 26px;
}
ul li::before {
    font-size: 4px;
}

ol {
    counter-reset: list;
}
ol > li {
    position: relative;
    padding-left: 32px;
}
ol > li::before {
    counter-increment: list;
    content: "0" counter(list);
    color: inherit;
    font-weight: 400;
    display: inline-block;
    position: absolute;
    left: 0;
}
ol > li:nth-child(10n) ~ li::before, ol > li:nth-child(10n)::before {
    content: counter(list);
}

ul ol,
ol ul {
    padding-top: 0;
}

/*==========  LIST LINKS  ==========*/
ul.list-links li::before {
    display: none;
}
ul.list-links a {
    font-weight: 400;
}
ul.list-links a::before {
    font-family: "icons";
    font-size: 13px;
    display: block;
    font-weight: 400;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 26px;
}
ul.list-links a::before {
    font-size: 4px;
}
ul.list-links.list-links--primary a {
    font-weight: 400;
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    line-height: 1;
    text-decoration: none;
}
ul.list-links.list-links--primary a::before {
    font-family: "icons";
    font-size: 13px;
    display: block;
    font-weight: 400;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 26px;
}

ol.list-links li::before {
    display: none;
}
ol.list-links li a {
    display: inline-block;
    font-weight: 300;
}
ol.list-links li a::before {
    counter-increment: list;
    content: "0" counter(list);
    color: inherit;
    font-weight: 400;
    display: inline-block;
    position: absolute;
    left: 0;
}
ol.list-links li:nth-child(10n) ~ li a::before, ol.list-links li:nth-child(10n) a::before {
    content: counter(list);
}
ol.list-links.list-links--secondary a::before {
    display: none;
}

.list-links--secondary {
    font-size: 16px;
    line-height: 1.6250em;
    /* 26px */
    padding-top: 1.6250em;
    padding-bottom: 0;
    padding-left: 0;
}
.list-links--secondary li {
    padding-left: 0;
}

/*==========  ANCHOR LIST  ==========*/
.list-anchor {
    padding-left: 0;
}
.list-anchor li {
    font-size: 16px;
    line-height: 1.6250em;
    /* 26px */
    padding-top: 1.6250em;
    padding-bottom: 0;
    padding-top: 0;
    padding-left: 0;
}
.list-anchor li::before {
    display: none;
}
.list-anchor a {
    line-height: 1;
    display: inline-block;
    padding-left: 16px;
}
.list-anchor a::before {
    font-family: "icons";
    font-size: 13px;
    display: block;
    font-weight: 400;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 26px;
}
.list-anchor a::before {
    font-size: 4px;
}

/*==========  SMALL LIST  ==========*/
@media only screen and (min-width: 620px) {
    .list-small li {
        font-size: 13px;
        line-height: 2.0000em;
        /* 26px */
        padding-top: 2.0000em;
        padding-bottom: 0;
        padding-top: 0;
    }
}

/*==========  CENTERED LIST  ==========*/
.list-centered {
    text-align: center;
    padding-left: 0;
}

/*==========  FEATURED LIST  ==========*/
.featured-list {
    padding-top: 78px;
    padding-bottom: 78px;
}

.featured-list__item {
    background: #ffffff;
    padding-left: 0;
    padding-top: 26px;
    padding-bottom: 26px;
    margin-top: 26px;
}
@media only screen and (min-width: 620px) {
    .featured-list__item {
        min-height: 338px;
        padding: 52px 32px;
    }
}
.featured-list__item:first-child {
    margin-top: 0;
}
.featured-list__item p {
    margin-bottom: 26px;
}

.featured-list__img-wrapper {
    display: none;
    position: relative;
    padding-top: 26px;
    margin: 0 -5%;
}
@media only screen and (min-width: 620px) {
    .featured-list__img-wrapper {
        display: block;
        padding-top: 0;
        margin: 0;
    }
}

@media only screen and (min-width: 620px) {
    .featured-list__img {
        padding-top: 60.8%;
        padding-bottom: 0;
        height: 0;
        overflow: hidden;
        position: absolute;
        width: 100%;
    }
}
.featured-list__img img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}
@media only screen and (min-width: 620px) {
    .featured-list__img img {
        margin: 0;
        position: absolute;
        top: 0;
        height: 100%;
        width: 100%;
        left: 0;
    }
}

/*==========  RELATED GUIDES LIST  ==========*/
.related-guides-list {
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    padding-top: 0;
    padding-left: 0;
}
@media only screen and (min-width: 620px) {
    .related-guides-list {
        padding-top: 26px;
    }
}
@media only screen and (min-width: 800px) {
    .related-guides-list {
        padding-top: 0;
    }
}
.related-guides-list p {
    padding-top: 0;
}
.related-guides-list .tag {
    padding-top: 0;
}
.related-guides-list li {
    padding-top: 26px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e0e0e0;
}
.related-guides-list li:last-child {
    border-color: transparent;
}
@media only screen and (min-width: 620px) {
    .related-guides-list li {
        padding-top: 0;
        padding-bottom: 0;
        border-color: transparent;
    }
}

/*==========  LIST RESET  ==========*/
.list--reset {
    padding-left: 0;
}
.list--reset li {
    padding-left: 0;
}
.list--reset.list-links a::before, .list--reset li::before {
    display: none !important;
}

/*==========  LESSONS  ==========*/
.list-lessons {
    padding-left: 0;
}
.list-lessons a {
    color: #ffffff;
}
.list-lessons .current,
.list-lessons .current a {
    text-decoration: none;
    cursor: default;
}
.list-lessons .current .icon {
    font-size: 13px;
    display: inline-block;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 100%;
    width: 26px;
    line-height: 26px;
    text-align: center;
    margin-left: 7px;
}

/*==========  GUIDES INTO - used on homepage  ==========*/
.list-guides-intro {
    margin-bottom: 52px;
}
@media only screen and (max-width: 619px) {
    .list-guides-intro {
        padding-top: 52px;
    }
}
.list-guides-intro li {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 51px;
    margin-bottom: 52px;
}
@media only screen and (min-width: 620px) {
    .list-guides-intro li {
        border-color: transparent;
        padding-bottom: 0;
    }
}
.list-guides-intro li:last-child {
    border-bottom: transparent;
    margin-bottom: 0;
}

/**
*
* Link
*
**/
a {
    color: #3372df;
}

a:hover {
    text-decoration: none;
}

.cta--primary {
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    color: #3372df;
    font-weight: 400;
    display: inline-block;
    line-height: 1;
    text-decoration: none;
}
.cta--primary:hover {
    color: rgba(51, 51, 51, 0.87);
}
.cta--primary::before {
    display: inline-block;
    padding-right: 10px;
    font-family: "icons";
    line-height: 25px;
    font-size: 13px;
    content: "";
}

.cta--secondary {
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    color: #3372df;
    font-weight: 400;
    display: inline-block;
    line-height: 1;
}
.cta--secondary:hover {
    color: rgba(51, 51, 51, 0.87);
}

/**
*
* Table
*
**/
table {
    width: 100%;
}
table thead {
    background: #3372df;
    color: #ffffff;
}
table th {
    text-align: center;
    display: none;
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6250em;
    /* 26px */
    padding-top: 1.6250em;
    padding-bottom: 0;
}
@media only screen and (min-width: 800px) {
    table th {
        font-size: 20px;
        font-weight: 300;
        line-height: 1.3000em;
        /* 26px */
        padding-top: 1.3000em;
        padding-bottom: 0;
    }
}
table tbody {
    background: transparent;
}
table td {
    display: block;
    padding: 0px 3px 3px;
}
table td::before {
    content: attr(data-th) " :";
    display: inline-block;
    color: #ffffff;
    background: #3372df;
    border-right: 2px solid #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100px;
    max-height: 100%;
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
}
@media only screen and (min-width: 620px) {
    table td::before {
        display: none;
    }
}
table th,
table td {
    position: relative;
}
@media only screen and (min-width: 620px) {
    table th,
    table td {
        display: table-cell;
    }
}
@media only screen and (min-width: 620px) {
    table th {
        padding: 26px;
        padding-top: 13px;
        padding-bottom: 12px;
    }
}

td:last-child::after {
    content: "";
    display: block;
    background: #ffffff;
    height: 1px;
    left: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}
@media only screen and (min-width: 620px) {
    td:last-child::after {
        display: none;
    }
}

.table-2 col {
    width: 344px;
}
@media only screen and (min-width: 800px) {
    .table-2 col {
        width: 495px;
    }
}
@media only screen and (min-width: 620px) {
    .table-2 th:first-child,
    .table-2 td:first-child {
        border-right: 2px solid #ffffff;
    }
}

.table-3 col {
    width: 229.3333333333px;
}
@media only screen and (min-width: 800px) {
    .table-3 col {
        width: 330px;
    }
}
@media only screen and (min-width: 620px) {
    .table-3 th:nth-child(2),
    .table-3 td:nth-child(2) {
        border-left: 2px solid #ffffff;
        border-right: 2px solid #ffffff;
    }
}

.table-4 col {
    width: 172px;
}
@media only screen and (min-width: 800px) {
    .table-4 col {
        width: 247.5px;
    }
}
@media only screen and (min-width: 620px) {
    .table-4 th:nth-child(2), .table-4 th:nth-child(3),
    .table-4 td:nth-child(2),
    .table-4 td:nth-child(3) {
        border-left: 2px solid #ffffff;
        border-right: 2px solid #ffffff;
    }
}

/**
*
* Media - imgs/videos
*
**/
video,
object {
    max-width: 100%;
}

.content img {
    margin-top: 26px;
    margin-bottom: 26px;
}

aricle iframe {
    width: 106%;
    margin-left: -2%;
}

@media (max-width: 992px) {
  iframe {
    width: 100%;
  }
}

.fb-comments {
    display: inline-block;
    margin-left: 0%;
}

/**
*
* Breadcrumb
*
**/
.breadcrumbs {
    list-style: none;
    margin: 0 auto;
    padding-left: 2%;
}

.breadcrumbs li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    float: left;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 20px;
    color: #333333;
}

.breadcrumbs li a {
    display: block;
    padding: 0 40px 0 0px;
    color: #3372df;
    text-decoration: none;
    height: 20px;
    position: relative;
    -webkit-perspective: 700px;
    perspective: 700px;
}

.breadcrumbs li a:after {
    content: '';
    width: 15px;
    height: 15px;
    border-color: #184E98;
    border-style: solid;
    border-width: 1px 1px 0 0;
    -webkit-backface-visibility: hidden;
    outline: 1px solid transparent;
    position: absolute;
    right: 20px;
    -webkit-transition: all .15s ease;
    transition: all .15s ease;
    -webkit-transform: rotateZ(45deg) skew(10deg, 10deg);
    transform: rotateZ(45deg) skew(10deg, 10deg);
}

.breadcrumbs li a:hover:after {
    right: 15px;
    -webkit-transform: rotateZ(45deg) skew(-10deg, -10deg);
    transform: rotateZ(45deg) skew(-10deg, -10deg);
}

@media all and (max-width: 1024px) {
    .breadcrumbs {
        display: none;
    }
}
.date {
    padding-left: 2%;
    font-size: 12px;
    line-height: 1.6em;
    display: inline-block;
    margin-top: 15px !important;
}

.share {
    position: absolute;
    top: 50%;
    left: 55%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.share > a {
    padding-top: 9.2em;
    margin-right: 20px;
    display: inline-block;
    overflow: hidden;
}

.share > a:last-child {
    margin-right: 0px;
}

.getshare input[type="checkbox"] {
    display: none;
}

label {
    cursor: pointer;
    display: inline-block;
}

label:before {
    position: relative;
    display: inline-block;
    line-height: 24px;
    padding: 0px 9px 0px 9px;
    border-radius: 3px;
    color: #fff;
}

.twitter .getshare-counter {
    background: #0b89b7;
}

.twitter .getshare-counter:after {
    background: #0b89b7;
}

.twitter label {
    border-radius: 2px;
    background: #00acee;
}

.twitter label:before {
    content: '';
    background: #00acee url("http://andreasstorm.com/lib/twitter.svg") no-repeat 6px 6px;
    background-size: 16px;
    width: 30px;
    height: 20px;
}

.facebook .getshare-counter {
    background: #2c487f;
}

.facebook .getshare-counter:after {
    background: #2c487f;
}

.facebook label {
    border-radius: 2px;
    background: #3b5998;
}

.facebook label:before {
    content: '';
    background: #3b5998 url("http://andreasstorm.com/lib/facebook.svg") no-repeat 8px 6px;
    background-size: 8px;
    width: 30px;
    height: 20px;
}

.google .getshare-counter {
    background: #b22d1e;
}

.google .getshare-counter:after {
    background: #b22d1e;
}

.google label {
    border-radius: 2px;
    background: #cd3c2b;
}

.google label:before {
    content: '';
    background: #cd3c2b url("http://andreasstorm.com/lib/googleplus.svg") no-repeat 8px 6px;
    background-size: 16px;
    width: 30px;
    height: 20px;
}

.getshare-counter {
    padding: 0px 8px;
    color: #fff;
    line-height: 20px;
    display: inline-block;
    border-radius: 2px;
    position: relative;
    left: -3px;
    top: -3px;
    cursor: pointer;
    font-size: 12px;
}

.getshare-counter:after {
    content: "";
    display: block;
    position: absolute;
    pointer-events: none;
    width: 5px;
    height: 5px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    left: -2px;
    top: 7px;
}

@media (orientation: landscape) and (min-width: 769px) and (max-width: 1024px) {
    .breadcrumbs {
        display: block;
    }
}
/**
*
* subsection__title
*
**/
.subsection-title {
    color: rgba(51, 51, 51, 0.87);
    margin-top: 52px;
}

.subsection-number {
    font-size: 16px;
    line-height: 1.6250em;
    /* 26px */
    padding-top: 1.6250em;
    padding-bottom: 0;
    padding-top: 0;
    display: block;
}

/**
*
* Articles list
*
**/
.articles-list {
    padding-left: 0;
}

.articles-list__item {
    padding-bottom: 52px;
    padding-left: 0;
}
.articles-list__item:last-child {
    padding-bottom: 53px;
}
.articles-list__item::before {
    content: "";
    display: block;
    width: 40%;
    height: 1px;
    box-shadow: inset 0 1px 0 0 #e0e0e0;
    margin-right: 0;
    margin-left: 30%;
}
.articles-list__item h3 a:hover {
    text-decoration: none;
}
.articles-list__item p {
    margin-top: 26px;
    margin-bottom: 26px;
}
.articles-list__item:first-child {
    padding-top: 0;
}
@media only screen and (min-width: 620px) {
    .articles-list__item:first-child {
        padding-top: 24px;
    }
}
.articles-list__item:first-child::before {
    display: none;
}

/**
*
* Guides List
*
**/
.guides-list {
    overflow: hidden;
}
@media only screen and (min-width: 620px) {
    .guides-list {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-top: 52px;
    }
}

.guides-list__item {
    padding: 0;
    background: #ffffff;
    margin-top: 26px;
    margin-bottom: 0;
}
@media only screen and (min-width: 620px) {
    .guides-list__item {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}
.guides-list__item h3 {
    margin: 0 32px;
}
.guides-list__item p {
    margin: 26px 32px 0;
}
@media only screen and (min-width: 620px) {
    .guides-list__item .primary-content {
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }
}
.guides-list__item .secondary-content {
    position: relative;
    margin-top: 51px;
    border-top: 1px solid #e0e0e0;
}
@media only screen and (min-width: 620px) {
    .guides-list__item .secondary-content {
        width: 100%;
    }
}
.guides-list__item .secondary-content .icon-circle {
    position: absolute;
    top: -28px;
    left: 50%;
    margin-left: -21px;
    border: 2px solid #ffffff;
}
.guides-list__item .secondary-content .icon-circle i {
    font-size: 23px;
}
.guides-list__item ol {
    margin: 26px 0 0;
    padding: 52px 0 52px;
    margin-top: 0;
}
.guides-list__item::before {
    display: none;
}

/**
*
* Icon Circle
*
**/
.icon-circle,
.icon-circle--large {
    height: 0;
    width: 0;
    background: rgba(51, 51, 51, 0.54);
    display: block;
    position: relative;
    border-radius: 100%;
    font-size: 0;
    padding: 22px;
    margin: 4px auto;
}
.icon-circle i,
.icon-circle span,
.icon-circle--large i,
.icon-circle--large span {
    position: absolute;
    line-height: 0px;
    top: 50%;
    width: 100%;
    left: 0;
    text-align: center;
    color: #ffffff;
    font-size: 26px;
}
.icon-circle span,
.icon-circle--large span {
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    font-size: 26px;
    font-weight: 700;
}
@media only screen and (min-width: 620px) {
    .icon-circle span,
    .icon-circle--large span {
        font-size: 42px;
    }
}

.icon-circle--large {
    margin-top: 0;
    margin-bottom: 0;
    padding: 26px;
    position: relative;
}
.icon-circle--large i {
    font-size: 26px;
}
@media only screen and (min-width: 620px) {
    .icon-circle--large i {
        font-size: 42px;
    }
}
@media only screen and (min-width: 620px) {
    .icon-circle--large {
        padding: 37px;
        border: 2px solid #ffffff;
    }
    a .icon-circle--large {
        padding: 38px;
        box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.42);
        border: 1px solid;
        -webkit-transition: all 100ms linear;
        transition: all 100ms linear;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    .no-touch a:hover .icon-circle--large {
        box-shadow: inset 0px 0px 0px 1px #ffffff;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

.icon-circle--nav {
    height: 0;
    width: 0;
    background: rgba(51, 51, 51, 0.54);
    display: block;
    position: relative;
    border-radius: 100%;
    font-size: 0;
    padding: 13px;
    margin: 0 auto;
}
@media only screen and (min-width: 620px) {
    .icon-circle--nav {
        padding: 22px;
        margin-top: 4px;
        margin-bottom: 4px;
    }
}
.icon-circle--nav i {
    position: absolute;
    line-height: 1px;
    top: 50%;
    width: 100%;
    left: 0;
    text-align: center;
    color: #ffffff;
    font-size: 16px;
}
@media only screen and (min-width: 620px) {
    .icon-circle--nav i {
        font-size: 26px;
    }
}

#tab-header {
    font-size: 12px;
    text-transform: uppercase;
    padding-top: 12px;
    padding-bottom: 11px;
    background-color: #ccc;
    font-family: 'Roboto',Helvetica,Arial,sans-serif;
    padding-left: 10px;
    font-weight: bold;
    color: #fff;
    margin-left: -50%;
}

ul.tabs {
    padding: 0;
    float: left;
    list-style: none;
    height: 39px;
    width: 100%;
    font-size: 15px;
    padding-left: 100px;
    margin: -36px 0 -1px;
}

ul.tabs li {
    float: left;
    cursor: pointer;
    height: 31px;
    line-height: 31px;
    background-color: #F2F2F2;
    color: #ffffff;
    overflow: hidden;
    position: relative;
    width: 30%;
    font-size: .7em;
    text-align: center;
    text-transform: uppercase;
    padding-left: 0px;
    margin-top: -14%;
    color: #333333;
    margin-left: 5px;
    opacity: 0.5;
}

ul.tabs li:first-child {
    border-left: none;
}

ul.tabs li.active {
    background-color: #fff;
    color: #333;
    display: block;
    border: none;
    opacity: 1;
    font-weight: bold;
}
ul.tabs li:hover {
    background: #fff;
}
.tab_container {
    border-top: none;
    clear: both;
    float: left;
    width: 100%;
    background: #fff;
    height: 318px;
}

.tab_content {
    display: none;
}

.tab_content--paragraph {
    display: block;
    float: left;
    border-bottom: 1px solid #F2F2F2;
}

.tab_content--paragraph__image {
    margin: 0 auto;
    width: 60px;
    height: 60px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.tab_content--paragraph__image img {
    height: 100%;
    position: relative;
    left: 100%;
    margin-left: -200%;
    -webkit-transition: all .3s ease-in-out,all .3s ease-out;
    transition: all .3s ease-in-out,all .3s ease-out;
}

.tab_content--paragraph__content {
    display: block;
    width: 300px;
}

.tab_content--paragraph__content h4 {
    text-align: left;
    padding-top: 5px;
    padding-right: 5px;
    width: auto;
    font-size: 13px;
    margin: 0 auto;
    color: #505050;
    overflow: hidden;
    font-family: "Roboto Draft",Helvetica,sans-serif;
    letter-spacing: .01em;
    font-weight: 200;
    font-style: normal;
    line-height: 1.5;
}

.tab_content--paragraph:hover .tab_content--paragraph__content h4 {
    color: #1C5BB1;
    -webkit-transition: all .3s ease-in-out,all .3s ease-out;
    transition: all .3s ease-in-out,all .3s ease-out;
}
.tab_content--paragraph:hover .tab_content--paragraph__image img {
    -webkit-transition: all .3s ease-in-out,all .3s ease-out;
    transition: all .3s ease-in-out,all .3s ease-out;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.8;
}

.tab_drawer_heading {
    display: none;
}

@media screen and (max-width: 480px) {
    .tabs {
        display: none;
    }

    .tab_drawer_heading {
        background-color: #ccc;
        color: #fff;
        border-top: 1px solid #333;
        margin: 0;
        padding: 5px 20px;
        display: block;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .d_active {
        background-color: #666;
        color: #fff;
    }
}
/** Larger Screens - desktops and tablets **/
@media all and (max-width: 667px) {
    ul.tabs, .tab_container {
        display: none;
    }

    #tab-header {
        display: none;
    }
}
@media (min-width: 667px) and (max-width: 768px) {
    .tab_container {
        display: block;
        width: 300px;
    }

    #tab-header {
        display: none;
    }
}
@media (orientation: landscape) and (min-width: 768px) and (max-width: 1024px) {
    .tab_container {
        width: 300px;
    }
}
@media all and (min-width: 1024px) {
    .tab_content--paragraph__image {
        margin-left: .4em;
        padding-top: .4em;
        margin-right: .4em;
        margin-bottom: 0.16em;
    }

    .tab_content--paragraph__content h4 {
        font-weight: 400;
        text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
    }
}
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
    position: relative;
    margin: 0 auto 60px;
    padding: 0;
    *zoom: 1;
}

/** THEME
===================================*/
.bx-wrapper .bx-viewport {
    box-shadow: 0 0 5px #ccc;
    left: -5px;
    background: transparent;
    /*fix other elements on the page moving (on Chrome)*/
    -webkit-transform: translatez(0);
    transform: translatez(0);
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
    position: absolute;
    bottom: -30px;
    width: 100%;
}

/* LOADER */
.bx-wrapper .bx-loading {
    min-height: 50px;
    background: url(/bundles/websitenews/images/AjaxLoader.gif) center center no-repeat #fff;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
}

/* PAGER */
.bx-wrapper .bx-pager {
    text-align: center;
    font-size: .85em;
    font-family: Arial;
    font-weight: bold;
    color: #666;
    padding-top: 20px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
    background: #666;
    text-indent: -9999px;
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    outline: 0;
    border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #000;
}

/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
    left: 10px;
    background: url(images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
    right: 10px;
    background: url(images/controls.png) no-repeat -43px -32px;
}

.bx-wrapper .bx-prev:hover {
    background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
    background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
    display: none;
}

/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
    text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
    display: block;
    text-indent: -9999px;
    width: 10px;
    height: 11px;
    outline: 0;
    background: url(images/controls.png) -86px -11px no-repeat;
    margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
    background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
    display: block;
    text-indent: -9999px;
    width: 9px;
    height: 11px;
    outline: 0;
    background: url(images/controls.png) -86px -44px no-repeat;
    margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
    background-position: -86px -33px;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
    text-align: left;
    width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
    right: 0;
    width: 35px;
}

/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.6));
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
    width: 100%;
}

.bx-wrapper .bx-caption span {
    color: #fff;
    font-family: Arial;
    display: block;
    font-size: .85em;
    padding: 10px;
}

/* ==========================================================================
   Slider carousel
   ========================================================================== */
#carousel-container {
    margin: -30px 0 30px 0;
}

#carousel-container .bx-wrapper {
    padding: 40px 0;
    margin: 0 auto;
}

#carousel-container .bx-controls {
    height: 30px;
    position: relative;
    overflow: hidden;
    margin-top: 15px;
    font-family: 'FontAwesome';
}

#carousel-container .bx-controls a {
    position: absolute;
    background-color: #333;
    float: left;
    display: block;
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 30px;
    color: #fff;
}

#carousel-container .bx-controls a.bx-prev {
    left: 0;
}

#carousel-container .bx-controls a.bx-next {
    right: 0;
}

#carousel-container .bx-controls a:hover {
    color: #fff;
    text-decoration: none;
}

#featured-carousel .article-standard {
    overflow: visible;
    margin-bottom: 0;
}

#featured-carousel .article-standard img {
    width: auto;
    float: none;
    margin: 0;
}

#featured-carousel .article-standard .post-image, #featured-carousel .article-standard .post-video {
    float: none;
}

#featured-carousel .article-standard .post-video {
    max-width: 100%;
}

#featured-carousel .article-standard .post-video iframe {
    vertical-align: bottom;
    height: 100%;
    width: 100%;
}

#featured-carousel .article-standard .review-stars {
    float: none;
}

#featured-carousel .article-standard h2.entry-title:before {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    content: '';
    border: 8px solid #fff;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #fff;
    border-left-color: transparent;
    position: absolute;
    top: -36px;
    left: 0px;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
}

#featured-carousel .article-standard .entry-content {
    margin: 0;
    float: none;
    width: 100%;
}

#featured-carousel .article-standard .entry-content h2.entry-title:before {
    display: none;
}

#featured-carousel .article-standard .entry-meta {
    margin-bottom: 15px;
}

#featured-carousel .article-standard p {
    max-height: 45px;
    overflow: hidden;
    margin-bottom: 5px;
}

#featured-carousel .article-standard a.read-more {
    margin-bottom: 35px;
    display: block;
}

/* ==========================================================================
   Featured slider
   ========================================================================== */
#slider-container {
    position: relative;
    margin: -30px 0 30px 0;
    overflow: hidden;
}

#slider-container .container {
    position: relative;
    max-width: 1200px;
    padding: 0;
}

.bx-wrapper {
    position: relative;
    padding: 0;
    *zoom: 1;
    overflow: hidden;
}

#featured-slider {
    list-style: none;
    margin: 0;
    margin-top: -30px;
}

#featured-slider li {
    margin: 0;
    padding: 0;
    line-height: 0;
    max-width: 595px;
}

#featured-slider-pager {
    width:70px;
    position: absolute;
    top: 0;
    right: 0;
}

#featured-slider-pager a {
    height: 70px;
    padding: 10px;
    display: block;
    background-color: #333;
    float: none;
    -webkit-transition: all .5s ease-in-out,all .5s ease-out;
    transition: all .5s ease-in-out,all .5s ease-out;
    right:0px;
}

#featured-slider-pager a:hover {
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
    transition: all .3s ease-in-out,all .3s ease-out;
    -webkit-transition: all .3s ease-in-out,all .3s ease-out;
    -moz-transition: all .3s ease-in-out,all .3s ease-out;
    -o-transition: all .3s ease-in-out,all .3s ease-out;
    margin-left: -180px;
}
#featured-slider-pager a:hover #featured-slider-pager {
    min-width:250px;
    position: relative;
    top: 0;
    right:0;
    overflow: hidden;
}
#featured-slider-pager h6 {
    visibility: hidden;
}

.flp__content {
    display: block;
    width: 240px;
}

#featured-slider-pager a:hover h6 {
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
    overflow: hidden;
    margin: 0;
    padding-left: 10px;
    height: 55px;
    color: #fff;
    font-size: 10px;
    width: 180px;
    font-weight: 500;
    visibility: visible;
}

#featured-slider-pager .entry-meta {
    width: inherit;
}

#featured-slider-pager a.active {
    text-decoration: none;
    background-color: #161616;
}

#featured-slider-pager a:hover {
    text-decoration: none;
}

#featured-slider-pager a.active img, #featured-slider-pager a.active, #featured-slider-pager a.active p {
    -moz-opacity: 1;
    /* Firefox */
    -ms-opacity: 1;
    /* IE */
    filter: alpha(opacity=100);
    /* IE */
    -khtml-opacity: 1;
    /* Konqueror */
    -o-opacity: 1;
    /* Opera */
    -webkit-opacity: 1;
    /* Chrome, Safari */
    opacity: 1;
    /* Firefox, Safari, Opera */
}

.bx-caption {
    font-size: 1.5em;
    line-height: 100%;
    padding: 10px;
    color: #222;
    background-color: #fff;
    position: absolute;
    bottom: 60px;
    left: 30px;
    margin-right: 30px;
}

.flp__image, .overlay-category__image {
    margin: 0 auto;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.flp__image {
    width: 50px;
    height: 50px;
}

.flp__image img, .overlay-category__image img {
    position: relative;
    left: 100%;
    margin-left: -200%;
}

.flp__image img {
    height: 100%;
}

.overlay-category__image img {
   min-height: 100%;
   min-width: 100%;
}

.overlay-category__image {
    height: 350px;
    width: 595px;
}

.overlay-category__content {
    position: absolute;
    color: #eee;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 15px;
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.3);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 40%);
    width: 100%;
}

.occ--main {
    /*background-size: cover;*/
    /*background: inherit;*/
    /*background-attachment: fixed;*/
    overflow: hidden;
}

.occ--main h4 {
    color: #ffffff;
    padding: 0px 10px 5px;
    font-style: normal;
    width: 555px;
    font: 400 19px/36px 'Roboto', sans-serif;
    /*    ovaj dio pravi 3 tockice*/

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.occ--desc {
    display: none;
}


.occ--desc h5 {
    color: #ffffff;
    padding: 0px 10px 5px;
    letter-spacing: .01em;
    font-weight: 200;
    font-style: normal;
    line-height: 1.5;
    font-size: 16px;
    font-weight: 400;
    width: 555px;
}

@media all and (max-width: 990px) {
    #featured-slider-pager {
        display: none;
    }

    .overlay p {
        padding-bottom: 20px;
    }
}
@media all and (max-width: 667px) {
    .occ--main h4, .occ--desc h5 {
        width: 100%;
    }

    .occ--main h4 {
        font-size: 18px;
    }

    .overlay-category__image {
        height: 319px;
        width: auto;
        padding-top: 34px;
    }

    .title-space {
        height: 78px;
    }

    .overlay p {
        padding-bottom: 0px;
    }

    .overlay-description {
        display: none;
    }
}
@media (min-width: 667px) and (max-width: 768px) {
    #featured-slider-pager {
        display: none;
    }

    .fb-like-box {
        display: none !important;
    }
}
/*
 * 	Core Owl Carousel CSS File
 *	v1.3.2
 */
/* clearfix */
.owl-carousel .owl-wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

/* display none until init */
.owl-carousel {
    display: none;
    position: relative;
    width: 100%;
    -ms-touch-action: pan-y;
}

.owl-carousel .owl-wrapper {
    display: none;
    position: relative;
    -webkit-transform: translate3d(0px, 0px, 0px);
}

.owl-carousel .owl-wrapper-outer {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.owl-carousel .owl-wrapper-outer.autoHeight {
    -webkit-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}

.owl-carousel .owl-item {
    float: left;
}

.owl-controls .owl-page,
.owl-controls .owl-buttons div {
    cursor: pointer;
}

.owl-controls {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* mouse grab icon */
.grabbing {
    cursor: url(../../../images/grabbing.png) 8 8, move;
}

/* fix */
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
}

/*
* 	Owl Carousel Owl Demo Theme
*	v1.3.2
*/
.owl-theme .owl-controls {
    margin-top: 10px;
    text-align: center;
}

/* Styling Next and Prev buttons */
.owl-theme .owl-controls .owl-buttons div {
    color: #FFF;
    display: inline-block;
    zoom: 1;
    *display: inline;
    /*IE7 life-saver */
    margin: 5px;
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 30px;
    background: #869791;
    filter: Alpha(Opacity=50);
    /*IE7 fix*/
    opacity: 0.5;
}

/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover {
    filter: Alpha(Opacity=100);
    /*IE7 fix*/
    opacity: 1;
    text-decoration: none;
}

/* Styling Pagination*/
.owl-theme .owl-controls .owl-page {
    display: inline-block;
    zoom: 1;
    *display: inline;
    /*IE7 life-saver */
}

.owl-theme .owl-controls .owl-page span {
    display: block;
    width: 12px;
    height: 12px;
    margin: 5px 7px;
    filter: Alpha(Opacity=50);
    /*IE7 fix*/
    opacity: 0.5;
    border-radius: 20px;
    background: #869791;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
    filter: Alpha(Opacity=100);
    /*IE7 fix*/
    opacity: 1;
}

/* If PaginationNumbers is true */
.owl-theme .owl-controls .owl-page span.owl-numbers {
    height: auto;
    width: auto;
    color: #FFF;
    padding: 2px 10px;
    font-size: 12px;
    border-radius: 30px;
}

/* preloading images */
.owl-item.loading {
    min-height: 150px;
    background: url(../../../images/AjaxLoader.gif) no-repeat center center;
}

#owl-demo .item img {
    display: block;
    width: 100%;
    height: auto;
}

.owl-theme .owl-controls {
    position: relative;
}

.owl-theme .owl-controls .item-link {
    position: relative;
    display: block;
    width: 100px;
    height: 40px;
    margin: 0 2px;
    border-bottom: 4px solid #ccc;
    outline: none;
}

.owl-theme .owl-controls .item-link:focus {
    box-shadow: 0 0 8px #cc4895;
    outline: none;
}

.owl-theme .owl-controls .active .item-link {
    border-bottom: 4px solid #cc4895;
}

.owl-theme .owl-controls .owl-page span {
    display: none;
}

.owl-theme .prev-owl,
.owl-theme .next-owl {
    position: absolute;
    top: 5px;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #c0c0c0;
    outline: none;
}

.owl-theme .prev-owl:focus,
.owl-theme .next-owl:focus {
    box-shadow: 0 0 8px #cc4895;
}

.owl-theme .prev-owl {
    left: 24px;
}

.owl-theme .next-owl {
    right: 24px;
}

.owl-pagination {
    width: 312px;
    height: 43px;
    margin: 0 auto;
    overflow: hidden;
}

/* basic scrollbar styling */
/* vertical scrollbar */
.mCSB_container {
    width: auto;
    margin-right: 30px;
    overflow: hidden;
}

.mCSB_container.mCS_no_scrollbar {
    margin-right: 0;
}

.mCS_disabled > .mCustomScrollBox > .mCSB_container.mCS_no_scrollbar,
.mCS_destroyed > .mCustomScrollBox > .mCSB_container.mCS_no_scrollbar {
    margin-right: 30px;
}

.mCustomScrollBox > .mCSB_scrollTools {
    width: 16px;
    height: 100%;
    top: 0;
    right: 0;
}

.mCSB_scrollTools .mCSB_draggerContainer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: auto;
}

.mCSB_scrollTools a + .mCSB_draggerContainer {
    margin: 20px 0;
}

.mCSB_scrollTools .mCSB_draggerRail {
    width: 2px;
    height: 100%;
    margin: 0 auto;
    border-radius: 10px;
}

.mCSB_scrollTools .mCSB_dragger {
    cursor: pointer;
    width: 100%;
    height: 30px;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 4px;
    height: 100%;
    margin: 0 auto;
    border-radius: 10px;
    text-align: center;
}

.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown {
    display: block;
    position: relative;
    height: 20px;
    overflow: hidden;
    margin: 0 auto;
    cursor: pointer;
}

.mCSB_scrollTools .mCSB_buttonDown {
    top: 100%;
    margin-top: -40px;
}

/* horizontal scrollbar */
.mCSB_horizontal > .mCSB_container {
    height: auto;
    margin-right: 0;
    margin-bottom: 30px;
    overflow: hidden;
}

.mCSB_horizontal > .mCSB_container.mCS_no_scrollbar {
    margin-bottom: 0;
}

.mCS_disabled > .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar,
.mCS_destroyed > .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar {
    margin-right: 0;
    margin-bottom: 30px;
}

.mCSB_horizontal.mCustomScrollBox > .mCSB_scrollTools {
    width: 100%;
    height: 16px;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.mCSB_horizontal > .mCSB_scrollTools a + .mCSB_draggerContainer {
    margin: 0 20px;
}

.mCSB_horizontal > .mCSB_scrollTools .mCSB_draggerRail {
    width: 100%;
    height: 2px;
    margin: 7px 0;
    border-radius: 10px;
}

.mCSB_horizontal > .mCSB_scrollTools .mCSB_dragger {
    width: 30px;
    height: 100%;
}

.mCSB_horizontal > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 100%;
    height: 4px;
    margin: 6px auto;
    border-radius: 10px;
}

.mCSB_horizontal > .mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_horizontal > .mCSB_scrollTools .mCSB_buttonRight {
    display: block;
    position: relative;
    width: 20px;
    height: 100%;
    overflow: hidden;
    margin: 0 auto;
    cursor: pointer;
    float: left;
}

.mCSB_horizontal > .mCSB_scrollTools .mCSB_buttonRight {
    margin-left: -40px;
    float: right;
}

.mCustomScrollBox {
    -ms-touch-action: none;
    /*MSPointer events - direct all pointer events to js*/
}

/* default scrollbar colors and backgrounds (default theme) */
.mCustomScrollBox > .mCSB_scrollTools {
    opacity: 0.75;
    filter: "alpha(opacity=75)";
    -ms-filter: "alpha(opacity=75)";
    /* old ie */
}

.mCustomScrollBox:hover > .mCSB_scrollTools {
    opacity: 1;
    filter: "alpha(opacity=100)";
    -ms-filter: "alpha(opacity=100)";
    /* old ie */
}

.mCSB_scrollTools .mCSB_draggerRail {
    background: #000;
    /* rgba fallback */
    background: rgba(0, 0, 0, 0.4);
    filter: "alpha(opacity=40)";
    -ms-filter: "alpha(opacity=40)";
    /* old ie */
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background: #fff;
    /* rgba fallback */
    background: rgba(255, 255, 255, 0.75);
    filter: "alpha(opacity=75)";
    -ms-filter: "alpha(opacity=75)";
    /* old ie */
}

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.85);
    filter: "alpha(opacity=85)";
    -ms-filter: "alpha(opacity=85)";
    /* old ie */
}

.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.9);
    filter: "alpha(opacity=90)";
    -ms-filter: "alpha(opacity=90)";
    /* old ie */
}

.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight {
    background-image: url(mCSB_buttons.png);
    background-repeat: no-repeat;
    opacity: 0.4;
    filter: "alpha(opacity=40)";
    -ms-filter: "alpha(opacity=40)";
    /* old ie */
}

.mCSB_scrollTools .mCSB_buttonUp {
    background-position: 0 0;
    /*
      sprites locations are 0 0/-16px 0/-32px 0/-48px 0 (light) and -80px 0/-96px 0/-112px 0/-128px 0 (dark)
    */
}

.mCSB_scrollTools .mCSB_buttonDown {
    background-position: 0 -20px;
    /*
      sprites locations are 0 -20px/-16px -20px/-32px -20px/-48px -20px (light) and -80px -20px/-96px -20px/-112px -20px/-128px -20px (dark)
    */
}

.mCSB_scrollTools .mCSB_buttonLeft {
    background-position: 0 -40px;
    /*
      sprites locations are 0 -40px/-20px -40px/-40px -40px/-60px -40px (light) and -80px -40px/-100px -40px/-120px -40px/-140px -40px (dark)
    */
}

.mCSB_scrollTools .mCSB_buttonRight {
    background-position: 0 -56px;
    /*
      sprites locations are 0 -56px/-20px -56px/-40px -56px/-60px -56px (light) and -80px -56px/-100px -56px/-120px -56px/-140px -56px (dark)
    */
}

.mCSB_scrollTools .mCSB_buttonUp:hover,
.mCSB_scrollTools .mCSB_buttonDown:hover,
.mCSB_scrollTools .mCSB_buttonLeft:hover,
.mCSB_scrollTools .mCSB_buttonRight:hover {
    opacity: 0.75;
    filter: "alpha(opacity=75)";
    -ms-filter: "alpha(opacity=75)";
    /* old ie */
}

.mCSB_scrollTools .mCSB_buttonUp:active,
.mCSB_scrollTools .mCSB_buttonDown:active,
.mCSB_scrollTools .mCSB_buttonLeft:active,
.mCSB_scrollTools .mCSB_buttonRight:active {
    opacity: 0.9;
    filter: "alpha(opacity=90)";
    -ms-filter: "alpha(opacity=90)";
    /* old ie */
}

/*scrollbar themes*/
/*dark (dark colored scrollbar)*/
.mCS-dark > .mCSB_scrollTools .mCSB_draggerRail {
    background: #000;
    /* rgba fallback */
    background: rgba(0, 0, 0, 0.15);
}

.mCS-dark > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background: #000;
    /* rgba fallback */
    background: rgba(0, 0, 0, 0.75);
}

.mCS-dark > .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
    background: rgba(0, 0, 0, 0.85);
}

.mCS-dark > .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark > .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background: rgba(0, 0, 0, 0.9);
}

.mCS-dark > .mCSB_scrollTools .mCSB_buttonUp {
    background-position: -80px 0;
}

.mCS-dark > .mCSB_scrollTools .mCSB_buttonDown {
    background-position: -80px -20px;
}

.mCS-dark > .mCSB_scrollTools .mCSB_buttonLeft {
    background-position: -80px -40px;
}

.mCS-dark > .mCSB_scrollTools .mCSB_buttonRight {
    background-position: -80px -56px;
}

/*light-2*/
.mCS-light-2 > .mCSB_scrollTools .mCSB_draggerRail {
    width: 4px;
    background: #fff;
    /* rgba fallback */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1px;
}

.mCS-light-2 > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 4px;
    background: #fff;
    /* rgba fallback */
    background: rgba(255, 255, 255, 0.75);
    border-radius: 1px;
}

.mCS-light-2.mCSB_horizontal > .mCSB_scrollTools .mCSB_draggerRail {
    width: 100%;
    height: 4px;
    margin: 6px 0;
}

.mCS-light-2.mCSB_horizontal > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 100%;
    height: 4px;
    margin: 6px auto;
}

.mCS-light-2 > .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.85);
}

.mCS-light-2 > .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-light-2 > .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.9);
}

.mCS-light-2 > .mCSB_scrollTools .mCSB_buttonUp {
    background-position: -32px 0;
}

.mCS-light-2 > .mCSB_scrollTools .mCSB_buttonDown {
    background-position: -32px -20px;
}

.mCS-light-2 > .mCSB_scrollTools .mCSB_buttonLeft {
    background-position: -40px -40px;
}

.mCS-light-2 > .mCSB_scrollTools .mCSB_buttonRight {
    background-position: -40px -56px;
}

/*dark-2*/
.mCS-dark-2 > .mCSB_scrollTools .mCSB_draggerRail {
    width: 4px;
    background: #000;
    /* rgba fallback */
    background: rgba(0, 0, 0, 0.1);
    border-radius: 1px;
}

.mCS-dark-2 > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 4px;
    background: #000;
    /* rgba fallback */
    background: rgba(0, 0, 0, 0.75);
    border-radius: 1px;
}

.mCS-dark-2.mCSB_horizontal > .mCSB_scrollTools .mCSB_draggerRail {
    width: 100%;
    height: 4px;
    margin: 6px 0;
}

.mCS-dark-2.mCSB_horizontal > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 100%;
    height: 4px;
    margin: 6px auto;
}

.mCS-dark-2 > .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
    background: rgba(0, 0, 0, 0.85);
}

.mCS-dark-2 > .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-2 > .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background: rgba(0, 0, 0, 0.9);
}

.mCS-dark-2 > .mCSB_scrollTools .mCSB_buttonUp {
    background-position: -112px 0;
}

.mCS-dark-2 > .mCSB_scrollTools .mCSB_buttonDown {
    background-position: -112px -20px;
}

.mCS-dark-2 > .mCSB_scrollTools .mCSB_buttonLeft {
    background-position: -120px -40px;
}

.mCS-dark-2 > .mCSB_scrollTools .mCSB_buttonRight {
    background-position: -120px -56px;
}

/*light-thick*/
.mCS-light-thick > .mCSB_scrollTools .mCSB_draggerRail {
    width: 4px;
    background: #fff;
    /* rgba fallback */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.mCS-light-thick > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 6px;
    background: #fff;
    /* rgba fallback */
    background: rgba(255, 255, 255, 0.75);
    border-radius: 2px;
}

.mCS-light-thick.mCSB_horizontal > .mCSB_scrollTools .mCSB_draggerRail {
    width: 100%;
    height: 4px;
    margin: 6px 0;
}

.mCS-light-thick.mCSB_horizontal > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 100%;
    height: 6px;
    margin: 5px auto;
}

.mCS-light-thick > .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.85);
}

.mCS-light-thick > .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-light-thick > .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background: rgba(255, 255, 255, 0.9);
}

.mCS-light-thick > .mCSB_scrollTools .mCSB_buttonUp {
    background-position: -16px 0;
}

.mCS-light-thick > .mCSB_scrollTools .mCSB_buttonDown {
    background-position: -16px -20px;
}

.mCS-light-thick > .mCSB_scrollTools .mCSB_buttonLeft {
    background-position: -20px -40px;
}

.mCS-light-thick > .mCSB_scrollTools .mCSB_buttonRight {
    background-position: -20px -56px;
}

/*dark-thick*/
.mCS-dark-thick > .mCSB_scrollTools .mCSB_draggerRail {
    width: 4px;
    background: #000;
    /* rgba fallback */
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
}

.mCS-dark-thick > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 6px;
    background: #000;
    /* rgba fallback */
    background: rgba(0, 0, 0, 0.75);
    border-radius: 2px;
}

.mCS-dark-thick.mCSB_horizontal > .mCSB_scrollTools .mCSB_draggerRail {
    width: 100%;
    height: 4px;
    margin: 6px 0;
}

.mCS-dark-thick.mCSB_horizontal > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 100%;
    height: 6px;
    margin: 5px auto;
}

.mCS-dark-thick > .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
    background: rgba(0, 0, 0, 0.85);
}

.mCS-dark-thick > .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-thick > .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background: rgba(0, 0, 0, 0.9);
}

.mCS-dark-thick > .mCSB_scrollTools .mCSB_buttonUp {
    background-position: -96px 0;
}

.mCS-dark-thick > .mCSB_scrollTools .mCSB_buttonDown {
    background-position: -96px -20px;
}

.mCS-dark-thick > .mCSB_scrollTools .mCSB_buttonLeft {
    background-position: -100px -40px;
}

.mCS-dark-thick > .mCSB_scrollTools .mCSB_buttonRight {
    background-position: -100px -56px;
}

/*light-thin*/
.mCS-light-thin > .mCSB_scrollTools .mCSB_draggerRail {
    background: #fff;
    /* rgba fallback */
    background: rgba(255, 255, 255, 0.1);
}

.mCS-light-thin > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 2px;
}

.mCS-light-thin.mCSB_horizontal > .mCSB_scrollTools .mCSB_draggerRail {
    width: 100%;
}

.mCS-light-thin.mCSB_horizontal > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 100%;
    height: 2px;
    margin: 7px auto;
}

/*dark-thin*/
.mCS-dark-thin > .mCSB_scrollTools .mCSB_draggerRail {
    background: #000;
    /* rgba fallback */
    background: rgba(0, 0, 0, 0.15);
}

.mCS-dark-thin > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 2px;
    background: #000;
    /* rgba fallback */
    background: rgba(0, 0, 0, 0.75);
}

.mCS-dark-thin.mCSB_horizontal > .mCSB_scrollTools .mCSB_draggerRail {
    width: 100%;
}

.mCS-dark-thin.mCSB_horizontal > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 100%;
    height: 2px;
    margin: 7px auto;
}

.mCS-dark-thin > .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
    background: rgba(0, 0, 0, 0.85);
}

.mCS-dark-thin > .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-thin > .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background: rgba(0, 0, 0, 0.9);
}

.mCS-dark-thin > .mCSB_scrollTools .mCSB_buttonUp {
    background-position: -80px 0;
}

.mCS-dark-thin > .mCSB_scrollTools .mCSB_buttonDown {
    background-position: -80px -20px;
}

.mCS-dark-thin > .mCSB_scrollTools .mCSB_buttonLeft {
    background-position: -80px -40px;
}

.mCS-dark-thin > .mCSB_scrollTools .mCSB_buttonRight {
    background-position: -80px -56px;
}

#nt-example1, #horoskop-content, #avlija {
    -webkit-padding-start: 0;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    line-height: 1em;
    padding-top: 0px;
    padding-left: 0px;
}

#nt-example1, #avlija {
    margin-left: -15px;
}

#nt-example1-prev, #nt-example1-next, #horoskop-prev, #horoskop-next,
#avlija-prev, #avlija-next {
    border: 1px solid #6F6F6F;
    border-radius: 50%;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 2px;
    background-color: #6F6F6F;
    cursor: pointer;
}

.horoskop--header h4 {
    font-size: 17px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#horoskop-text, #avlija-text {
    padding-right: 40%;
    padding-left: 15px;
    float: left;
    text-transform: uppercase;
}

.col-md-8 {
    width: 66.66666667%;
    float: left;
}

.col-md-4 {
    width: 33.33333333%;
    float: left;
}

.infos-text {
    padding-right: 10px;
    padding-left: 10px;
    border-top:rgba(255,255,255,.1) solid 1px;
    padding-top: 10px;
    margin-top:10px;
    letter-spacing: .01em;
    font-weight: 200;
    font-style: normal;
    line-height: 1.5;
    text-align: left;
    font-size: 12px;
}

ul#nt-example2 {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 0;
    padding-top: 0px;
    padding-left: 0px;
    margin: auto;
    background: rgba(0,0,0,0.2);
}

ul#nt-example2 li {
    list-style-type: none;
}

#nt-example2-prev, #nt-example2-next {
    cursor: pointer;
    border: 1px solid #8B63EC;
    border-radius: 50%;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 2px;
    background-color: #8B63EC;
}

#nt-example2-infos {
     color: white;
    background-color: rgba(81,45,168,0.7);
    height: 227px;
    display: block;
    font-size: 16px;
    width: 100%;
}

#nt-example2-container {
    background-color: #512DA8;
    background-image: url('/bundles/websitenews/images/zodiac.png');
    background-size: cover;

}

.subcategory-container {
    display: block;
    width: 100%;
    background-color: #ffffff;
}

.subcategory-news--paragraph {
    float: left;
    border-bottom: 1px solid #F2F2F2;
    padding-bottom: 10px;
    width: 100%;
    background-color: #ffffff;
}

.subcategory-news--content {
    width: 100%;
    display: block;
    padding-right: 2%;
}

.subcategory-news--content__image {
    margin: 0 auto;
    width: 150px;
    height: 150px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.subcategory-news--content__image img {
    height: 100%;
    position: relative;
    left: 100%;
    margin-left: -200%;
}

.subcategory-news--content__main {
    display: block;
}

.subcategory-news--content__main h4 {
    text-align: left;
    padding-top: 5px;
    width: auto;
    font-size: 18px;
    margin: 0 auto;
    color: #505050;
    overflow: hidden;
    letter-spacing: .01em;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
}

.subcategory-news--desc p {
    font-weight: 200;
    font-size: 12px;
    color: #505050;
}

.subcategory-news--info {
    padding-top: 0.5em;
}

.subcategory-news--date {
    font-size: 11px;
    color: grey;
}

.category-headline__image {
    margin: 0 auto;
    width: 315px;
    height: 230px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    margin-bottom: 10px;
}

.category-headline__image img {
    height: 100%;
    position: relative;
    left: 100%;
    margin-left: -200%;
}

.category-headline--space {
    background-color: #ffffff;
    padding: 12px;
}

.category-headline--space p {
    color: #505050;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
    font-size: 95%;
    line-height: 1.4;
    padding-bottom: 0;
}

.main-category {
    background-color: #fff;
    content: '';
    display: block;
    float: left;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
    padding-bottom: 0.1em;
}

.main-category--header {
    color: #fff;
    text-align: left;
    margin: 0 auto;
    letter-spacing: .01em;
    font-weight: 200;
    font-style: normal;
    line-height: 1.5;
    padding: 10px 0 10px 3%;
}

.main-category--header h4 {
    font-size: 17px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.main-category--paragraph {
    display: block;
    float: left;
    border-bottom: 1px solid #F2F2F2;
    overflow: hidden;
}

.main-category--paragraph__image {
    margin: 0 auto;
    width: 60px;
    height: 60px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.main-category--paragraph__image img {
    height: 100%;
    position: relative;
    left: 100%;
    margin-left: -200%;
}

.main-category--paragraph__content {
    display: block;
    width: 300px;
}

.main-category--paragraph__content h4 {
    text-align: left;
    padding-top: 5px;
    width: auto;
    font-size: 13px;
    margin: 0 auto;
    color: #505050;
    overflow: hidden;
    letter-spacing: .01em;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
}

.category-help-top {
    padding-top: 16px;
}

.category-help-bottom {
    padding-bottom: 30px;
}

.mob-help-top {
    padding-top: 15px;
}

@media (orientation: portrait) and (max-width: 667px) {
    .main-category {
        margin-left: 2%;
        margin-right: 2%;
        border-radius: 2px;
        width: 96%;
    }

    .main-category--header {
        border-top-right-radius: 2px;
        border-top-left-radius: 2px;
    }

    .subcategory-container {
        height: 1360px;
        padding-top: 20px;
    }

    .subcategory-news--paragraph {
        padding-bottom: 5px;
        width: 100%;
    }

    .subcategory-news--desc p {
        display: none;
    }

    .subcategory-news--content__image {
        width: 60px;
        height: 60px;
        margin: 1em;
    }

    .subcategory-news--content__main h4 {
        font-size: 12px;
        padding-top: 15px;
        font-weight: 400;
    }

    .subcategory-news--info {
        padding-top: 0em;
    }

    .main-category--paragraph {
        width: 100%;
        padding-right: 1em;
    }

    .main-category--paragraph__image {
        margin: 1em;
    }

    .main-category--paragraph__content {
        width: 100%;
        padding-top: 10px;
    }

    .mob-help-top {
        padding-top: 25px;
    }

    .category-headline {
        padding-top: 45px;
        margin-left: 2%;
        margin-right: 2%;
    }

    .category-headline__image {
        width: 100%;
    }

    .category-headline__image img {
        width: 100%;
    }

    .category-headline--space {
        background-color: #fff;
        padding-top: 220px;
        padding-left: 12px;
        padding-bottom: 12px;
    }
}
@media (orientation: landscape) and (max-width: 667px) {
    .main-category {
        margin-left: 1%;
        margin-right: 1%;
        border-radius: 2px;
        width: 48%;
    }

    .main-category--header {
        border-top-right-radius: 2px;
        border-top-left-radius: 2px;
    }

    .subcategory-news--content img {
        width: 75px;
        height: 60px;
    }

    .main-category--paragraph__content {
        width: 100%;
    }

    .subcategory-news--content p {
        font-size: 14px;
    }

    .subcategory-news--desc p {
        display: none;
    }

    .subcategory-news--paragraph {
        width: 50%;
    }

    .subcategory-news--content__image {
        width: 60px;
        height: 60px;
        margin: 1em;
    }

    .subcategory-news--content__main h4 {
        font-size: 12px;
        padding-top: 15px;
        font-weight: 400;
    }

    .subcategory-news--info {
        padding-top: 0em;
    }

    .main-category--paragraph__image {
        margin: 1em;
    }

    .main-category--paragraph__content {
        padding-top: 10px;
    }

    .mob-help-top {
        padding-top: 45px;
    }

    .category-headline {
        padding-top: 45px;
        width: 48%;
        float: left;
        margin-left: 1%;
        margin-right: 1%;
        border-radius: 2px;
    }

    .category-headline__image {
        width: 100%;
    }
}
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
    /* Styles */
    .main-category {
        width: 100%;
    }
}
@media (max-width: 768px) and (min-width: 667px) {
    .mob-help-top {
        padding-top: 60px;
    }

    .g--half, .g-medium--half {
        width: 100%;
        margin-right: 0%;
        float: none;
    }

    .tab_container, .tabs {
        display: none;
    }

    .main-category {
        width: 48%;
        margin-right: 2%;
        padding: 0;
    }

    .subcategory-news--paragraph {
        width: 50%;
    }

    .subcategory-news--content img {
        width: 75px;
        height: 60px;
    }

    .subcategory-news--content p {
        font-size: 14px;
    }

    .category-headline {
        padding-top: 45px;
        width: 48%;
        float: left;
        margin-left: 0%;
        margin-right: 2%;
        border-radius: 2px;
    }

    .category-headline__image {
        width: 100%;
    }

    .category-headline--space {
        padding-top: 240px;
    }

    .main-category--paragraph__image {
        margin: 1em;
        padding: 0;
    }

    .subcategory-news--content__main h4 {
        padding-top: 10px;
        font-size: 14px;
    }

    .subcategory-news--content p {
        font-size: 12px;
        padding-top: 40px;
        padding-left: 10px;
    }

    .subcategory-news--info {
        padding-left: 10px;
    }

    .subcategory-news--content__image {
        margin: 1em;
        width: 60px;
        height: 60px;
    }
}
@media (orientation: landscape) and (min-width: 667px) and (max-width: 768px) {
    .g--half, .g-medium--half {
        float: none;
    }

    .mob-help-top {
        padding-top: 60px;
    }

    .subcategory-news--content__main h4 {
        padding-top: 10px;
    }

    .subcategory-news--content {
        padding-top: 0px;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .mob-help-top {
        padding-top: 60px;
    }

    .category-headline__image {
        width: 100%;
    }

    .subcategory-news--content {
        padding-top: 0px;
    }

    .subcategory-news--content img {
        height: 100%;
        position: relative;
        left: 100%;
        margin-left: -200%;
        width: 100%;
    }
}
@media all and (min-width: 1024px) {
    .main-category {
        width: 100%;
    }

    .main-category--paragraph__image {
        margin-left: .4em;
        padding-top: .4em;
        margin-right: .4em;
        margin-bottom: .16em;
    }

    .subcategory-news--content__image {
        margin-left: .4em;
        padding-top: .4em;
        margin-right: .4em;
        margin-bottom: .16em;
    }

    .mob-help-top {
        padding-top: 5px;
    }
}
/*#vijesti, #magazin, #lifestyle, #sport, #tocak,
#category-bih {
  background: #C7DEE4;
}*/

.vijesti.active {
    border-bottom: 3px solid #395C98;
}

.magazin.active {
    border-bottom: 3px solid #f4b400;
    overflow: hidden;
}

.lifestyle.active {
    border-bottom: 3px solid #CA529F;
}

.sport.active {
    border-bottom: 3px solid #318445;
}

.tocka-4.active {
    border-bottom: 3px solid #E51C24;
}

.bih, .region, .svijet, .na-dnu, .ekonomija,
.kultura, .stav, .servis {
    background-color: #395C98;
}

.gossip, .muzika, .film, .it, .zeze {
    background-color: #f4b400;
}

.zdravlje, .sexy, .horoskop-cat, .sareno {
    background-color: #CA529F;
}

.penal, .kos, .sedmerac, .as, .aktuelno {
    background-color: #318445;
}

.vozili-smo, .test, .tocak-vijesti {
    background-color: #E51C24;
}

/*boje naslova clanka */
.boja-vijesti {
    color: #4C7DBF !important;
}

.boja-magazin {
    color: #f4b400 !important;
}

.boja-lifestyle {
    color: #CA529F !important;
}

.boja-sport {
    color: #318445 !important;
}

.boja-4 {
    color: #E51C24 !important;
}

.bg-color-white {
    background-color: #ffffff;
}

.pagination-container {
    padding-bottom: 25px;
    float: left;
}

.pagination {
    height: auto;
    margin: 0;
}

.pagination ul {
    display: inline-block;
    *display: inline;
    /* IE7 inline-block hack */
    *zoom: 1;
    margin-left: 0;
    margin-bottom: 0;
    border-radius: 3px;
}

.pagination li {
    display: inline;
}

.pagination a {
    background-color: #ffffff;
    float: left;
    padding: 0 14px;
    line-height: 34px;
    text-decoration: none;
    border: 1px solid #ddd;
    border-left-width: 0;
    font-size: 12px;
    font-weight: 400;
}

.pagination a:hover,
.pagination .active a {
    background-color: #f5f5f5;
}

.pagination .active a {
    color: #999999;
    cursor: default;
}

.pagination .disabled span,
.pagination .disabled a,
.pagination .disabled a:hover {
    color: #999999;
    background-color: transparent;
    cursor: default;
}

.pagination li:first-child a {
    border-left-width: 1px;
    border-radius: 3px 0 0 3px;
}

.pagination li:last-child a {
    border-radius: 0 3px 3px 0;
}

.pagination-centered {
    text-align: center;
}

.pagination-right {
    text-align: right;
}

.pager {
    margin-left: 0;
    margin-bottom: 18px;
    list-style: none;
    text-align: center;
    *zoom: 1;
}

.pager:before,
.pager:after {
    display: table;
    content: "";
}

.pager:after {
    clear: both;
}

.pager li {
    display: inline;
}

.pager a {
    display: inline-block;
    padding: 5px 14px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 15px;
}

.pager a:hover {
    text-decoration: none;
    background-color: #f5f5f5;
}

.pager .next a {
    float: right;
}

.pager .previous a {
    float: left;
}

.pager .disabled a,
.pager .disabled a:hover {
    color: #999999;
    background-color: #fff;
    cursor: default;
}

@media all and (max-width: 667px) {
    .pagination-container {
        padding-top: 25px;
        padding-left: 5px;
    }
}
@media (max-width: 768px) and (min-width: 667px) {
    .pagination-container {
        padding-top: 20px;
        margin-left: -40px;
    }
}
@media all and (max-width: 768px) and (min-width: 667px) {
    .pagination-container {
        padding-top: 20px;
        margin-left: -40px;
    }
}
@media all and (max-width: 1024px) {
    ul.pagination {
        font-size: 0px;
        padding-top: 0em;
    }
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* Styles */
    .pagination-container {
        padding-top: 20px;
        margin-left: -40px;
    }

    ul.pagination {
        font-size: 0px;
        padding-top: 0em;
    }
}
@media all and (min-width: 1024px) {
    .pagination-container {
        padding-top: 0px;
        margin-left: -35px;
    }
}
/**
*
* Themed styles
*
**/
.theme--multi-device-layouts .themed {
    color: #297ea9;
}
.theme--introduction-to-media .themed {
    color: #cf423a;
}
.theme--user-input .themed {
    color: #2c8566;
}
.theme--performance .themed {
    color: #7b5294;
}

.theme--multi-device-layouts .themed--background, .theme--multi-device-layouts .themed--background.next-lessons::before {
    background-color: #297ea9;
}
.theme--introduction-to-media .themed--background, .theme--introduction-to-media .themed--background.next-lessons::before {
    background-color: #cf423a;
}
.theme--user-input .themed--background, .theme--user-input .themed--background.next-lessons::before {
    background-color: #2c8566;
}
.theme--performance .themed--background, .theme--performance .themed--background.next-lessons::before {
    background-color: #7b5294;
}

.theme--multi-device-layouts .themed--hover:hover {
    color: #297ea9;
}
.theme--introduction-to-media .themed--hover:hover {
    color: #cf423a;
}
.theme--user-input .themed--hover:hover {
    color: #2c8566;
}
.theme--performance .themed--hover:hover {
    color: #7b5294;
}

.theme--multi-device-layouts .themed--hover-secondary:hover {
    color: #89c4e2;
}
.theme--introduction-to-media .themed--hover-secondary:hover {
    color: #edb8b5;
}
.theme--user-input .themed--hover-secondary:hover {
    color: #78d2b3;
}
.theme--performance .themed--hover-secondary:hover {
    color: #c4add2;
}

.article--multi-device-layouts .article-container h1, .article--multi-device-layouts
.article-container h2 {
    color: #297ea9;
}
.article--introduction-to-media .article-container h1, .article--introduction-to-media
.article-container h2 {
    color: #cf423a;
}
.article--user-input .article-container h1, .article--user-input
.article-container h2 {
    color: #2c8566;
}
.article--performance .article-container h1, .article--performance
.article-container h2 {
    color: #7b5294;
}

.nav-theme--multi-device-layouts .themed--hover:hover {
    color: #297ea9;
}
.nav-theme--introduction-to-media .themed--hover:hover {
    color: #cf423a;
}
.nav-theme--user-input .themed--hover:hover {
    color: #2c8566;
}
.nav-theme--performance .themed--hover:hover {
    color: #7b5294;
}

.nav-theme--multi-device-layouts .themed {
    color: #297ea9;
}
.nav-theme--introduction-to-media .themed {
    color: #cf423a;
}
.nav-theme--user-input .themed {
    color: #2c8566;
}
.nav-theme--performance .themed {
    color: #7b5294;
}

.nav-theme--multi-device-layouts .themed--background {
    background-color: #297ea9;
}
.nav-theme--introduction-to-media .themed--background {
    background-color: #cf423a;
}
.nav-theme--user-input .themed--background {
    background-color: #2c8566;
}
.nav-theme--performance .themed--background {
    background-color: #7b5294;
}

/**
*
* Styleguide
*
**/
.page--styleguide .styleguide__module-title {
    margin-bottom: 26px;
}
.page--styleguide section {
    margin-bottom: 52px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 77px;
}
.page--styleguide .styleguide__color-list {
    text-align: center;
}
.page--styleguide .styleguide__color-list li {
    border-bottom: 52px solid;
    margin-bottom: 26px;
    position: relative;
}
.page--styleguide .styleguide__breadcrumb .breadcrumbs {
    display: block;
}
.page--styleguide .styleguide__lists ul,
.page--styleguide .styleguide__lists ol {
    margin-bottom: 26px;
}
.page--styleguide .styleguide__inverted-block {
    background: #e8e8e8;
    padding: 0 13px;
}
.page--styleguide .styleguide__theme-block {
    background: #297ea9;
    padding: 0 13px;
}

.demo {
    margin-bottom: 26px;
    margin-top: 26px;
}

.demo [class*="g-"] {
    background-color: rgba(51, 51, 51, 0.26);
    position: relative;
    margin-bottom: 26px;
    min-height: 156px;
}
.demo [class*="g-"]::before, .demo [class*="g-"]::after {
    font-size: 13px;
    line-height: 2.0000em;
    /* 26px */
    padding-top: 2.0000em;
    padding-bottom: 0;
    display: block;
    margin: 0 10px;
}
.demo [class*="g-"]::before {
    content: 'HTML classes: ';
    font-weight: 700;
}
.demo [class*="g-"]::after {
    content: attr(class);
    word-spacing: 15px;
}

/**
*
* Resources page
*
**/
.page--resources .article-section__icon, .page--resources .articles-count, .page--resources .guides-list__item .secondary-content {
    display: none;
}
.page--resources .primary-content {
    padding-top: 26px;
    padding-bottom: 52px;
}
.page--resources .primary-content p {
    margin-top: 0;
}

/**
*
* Helper
*
**/
.clear::before, .clear::after {
    content: '';
    display: table;
}
.clear::after {
    clear: both;
}

/*==========  COLORS  ==========*/
.color--blue {
    color: #1c5bb1;
}

.color--red {
    color: #cb4437;
}

.color--green {
    color: #0f9d58;
}

.color--yellow {
    color: #f4b400;
}

.color--blue-secondary {
    color: #b7cdf4;
}

.color--red-secondary {
    color: #ebb6b0;
}

.color--green-secondary {
    color: #56efa5;
}

.color--yellow-secondary {
    color: #ffd45b;
}

.color--gray-background {
    color: #F2F2F2;
}

.color--gray-keyline {
    color: #e0e0e0;
}

.color--gray {
    color: rgba(51, 51, 51, 0.54);
}

.color--gray-dark {
    color: rgba(51, 51, 51, 0.87);
}

.color--text {
    color: #404040;
}

.color--highlight {
    color: #3372df;
}

.color--warning {
    color: #ffd45b;
}

.color--danger {
    color: #cb4437;
}

.color--muted {
    color: #737373;
}

.color--remember {
    color: #09829a;
}

.color--learning {
    color: #da2e75;
}

.color--layouts {
    color: #297ea9;
}

.color--user {
    color: #2c8566;
}

.color--media {
    color: #cf423a;
}

.color--performance {
    color: #7b5294;
}

.color--layouts-secondary {
    color: #89c4e2;
}

.color--user-secondary {
    color: #78d2b3;
}

.color--media-secondary {
    color: #edb8b5;
}

.color--performance-secondary {
    color: #c4add2;
}

.color-bg-yellow {
    background-color: #f4b400;
}

/*==========  TEXT DIVIDER  ==========*/
.text-divider {
    position: relative;
    margin-bottom: 26px;
}
.text-divider::after {
    content: '';
    display: block;
    position: absolute;
    width: 40%;
    height: 1px;
    box-shadow: 0 1px 0 0 #e0e0e0;
    left: 30%;
    bottom: -13px;
}
.text-divider.xlarge {
    margin-bottom: 52px;
}
.text-divider.xlarge::after {
    bottom: -26px;
}
.text-divider.xxlarge {
    margin-bottom: 78px;
}
.text-divider.xxlarge::after {
    bottom: -39px;
}
.text-divider.huge {
    margin-bottom: 78px;
}
.text-divider.huge::after {
    bottom: -39px;
}

/*==========  GENERIC  ==========*/
.centered {
    text-align: center;
}

/*==========  TAG  ==========*/
.tag {
    font-size: 13px;
    line-height: 2.0000em;
    /* 26px */
    padding-top: 2.0000em;
    padding-bottom: 0;
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    display: inline-block;
    text-decoration: none;
}
.tag:hover {
    color: rgba(51, 51, 51, 0.87);
}
.tag::before {
    content: '# ';
    display: inline-block;
}

#footer {
    clear: both;
    position: relative;
    height: 19em;
    background: #e7e7e7;
}

footer section.info {
    width: 22em;
    font-size: 10px;
    color: #999;
    font-weight: normal;
    float: left;
    height: 28em;
}

footer section.info p img {
    margin-bottom: 3em;
}

footer section.info p {
    width: 200px;
    font-size: 10px;
    color: #999;
    font-weight: normal;
    float: left;
    letter-spacing: .01em;
    font-weight: 200;
    font-style: normal;
    line-height: 1.5;
}

footer section {
    width: 8.77em;
    float: left;
    padding: 20px 25px 0px 0;
    margin-right: 25px;
    border-right: solid 1px #CCC;
    height: 20em;
    margin-bottom: 15px;
    font-weight: 100;
    font-size: 14px;
}

footer section:last-child {
    border: none;
}

footer h1 {
    font-size: 16px;
    color: #1C5BB1;
    padding-bottom: 5px;
    font-weight: bold;
}

footer a, footer a:visited, footer a:active {
    color: #666;
    display: block;
    letter-spacing: .01em;
    font-weight: 200;
    font-style: normal;
    line-height: 1.5;
    font-size: 12px;
}

footer section.box-container {
    display: block;
    width: 19.75em;
    height: auto;
    float: left;
}

footer section.box-container table a {
    opacity: 0.3;
}

footer section.box-container table a:hover {
    opacity: 1;
}

@media all and (max-width: 1024px) {
    footer section.box-container {
        display: none;
    }
}
@media all and (max-width: 667px) {
    footer section {
        display: none;
    }

    #footer {
        height: 20px;
    }
}

#sec1, #sec2, #sec3 {
    padding-top: 5px;
    padding-bottom: 5px;
    clear: both;
    position: relative;
    height: 380px;
    width: 100%;
}


.padding-static-page {
    padding: 1%;
}
.padding-static-page p {
    font-size: .8em;
}

.padding-static-page-header {
    font-size: 20px;
    color: #E51C24;
    line-height: 4em;
}

.social-buttons-article  {
    display: inline-block;
    width: 100%;
    padding: 2% 2%;
    margin: -6% 0 0% 0;
    background: #efefef;
    background: url('/bundles/websitenews/images/socialBg.jpg?v=2');
    background-size: auto;
}
.social-buttons-article .facebook-button {
    display: inline-block;
    float: right;
    margin-top: 5px;
    vertical-align: top;
    margin-left: 0%;
}
.social-buttons-article .googleplus-button {
    display: inline-block;
    float: right;
    margin-top: 5px;
    vertical-align: top;
    margin-left: 0%;
}

.social-buttons-article .twitter-button {
    display: inline-block;
    float: right;
    margin-top: 5px;
    vertical-align: top;
    margin-left: 0%;
}


.box-partners {
    display: inline-block;
    padding: 2% 0;
}
.box-partners h1 {
    color:#CA3438;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.box-partners a {
    margin: 5px 0;
}
.box-partners tr td img {
    opacity: .3;
}
.box-partners tr td img:hover {
    opacity: 1;
}

@media (max-width: 1024px) {
  .box-partners {
    display: none;
  }
}

.footer-menu-static-page {
    font-size: .9em;
    padding:0;
    line-height: 1em;
    color: #333;
}


.search-result {
    padding: 20px 10px;
    background-color: #e1edf7
}

.help-padding-top {
    padding-top: 40px;
}

.help-margintop-0 {
    margin-top: 0 !important;
}

.help-margintop-10 {
    margin-top: 1em !important;
}

.help-margintop-15 {
    margin-top: 1.5em !important;
}

.help-margintop-20 {
    margin-top: 2em !important;
}

.help-margintop-30 {
    margin-top: 3em !important;
}

.help-margintop-35 {
    margin-top: 3.5em !important;
}

.help-marginbottom-0 {
    margin-bottom: 0 !important;
}

.help-marginbottom-10 {
    margin-bottom: 1em !important;
}

.help-marginbottom-15 {
    margin-bottom: 1.5em !important;
}

.help-marginbottom-20 {
    margin-top: 2em !important;
}

.help-marginbottom-30 {
    margin-bottom: 3em !important;
}

.help-marginbottom-35 {
    margin-bottom: 3.5em !important;
}

#clanak {
    background: #F2F2F2;
}

#mobile-search {
    background-color: #fff;
    height: 60px;
}
#mobile-search form .search-field {
    background: #fff;
}
@media (orientation: portrait) and (max-width: 667px) {
    #sec {
        padding-top: 60px;
    }
}
@media (min-width: 667px) and (max-width: 768px) {
    #sec {
        padding-top: 60px;
    }

    #sec1, #sec2, #sec3 {
        background-color: transparent;
        padding-top: 5px;
        padding-bottom: 5px;
        height: 380px;
    }

    #clanak {
        padding-left: 5px;
        padding-right: 5px;
        background-color: #F2F2F2;
    }

    #sec div.g-wide--1.g-wide--last.g-medium--half.g--last.shadow {
        width: 300px;
    }

    #sec1 div.g-wide--3.g-medium--half, #sec2 div.g-wide--3.g-medium--half
    , #sec3 div.g-wide--3.g-medium--half {
        width: 100%;
    }
}
@media (orientation: portrait) and (min-width: 667px) and (max-width: 768px) {
    .last-news {
        width: 100%;
        height: auto;
    }

    .last-news--paragraph__image {
        margin: 1em;
    }

    .last-news--paragraph {
        width: 50%;
    }

    .last-news--paragraph__content {
        padding-top: 15px;
    }

    .news-category-headline__image, .nch__content--main {
        width: 100%;
    }

    .news-category-headline {
        width: 52%;
    }
}
@media (orientation: landscape) and (min-width: 667px) and (max-width: 768px) {
    #sec1, #sec2, #sec3 {
        height: 610px;
    }
}
@media (orientation: landscape) and (min-width: 768px) and (max-width: 1024px) {
    .last-news--paragraph {
        width: 100%;
    }

    .news-category-headline {
        width: 60%;
    }

    .news-category {
        width: 40%;
    }

    .news-category-headline__image {
        width: 100%;
    }

    .nch__content--main {
        width: 100%;
    }
}
@media all and (max-width: 1024px) {
    #fb, #desktop-search {
        display: none;
    }
}
@media all and (max-width: 667px) {
    #sec1 {
        padding-top: 0px;
    }

    #sec2, #sec3 {
        padding-top: 10px;
    }
}
@media all and (min-width: 1024px) {
    #sec {
        padding-top: 55px;
    }

    #sec1 {
        padding-top: 10px;
        height: 390px;
    }

    #mobile-search {
        display: none;
    }
}
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    position: relative;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-weight: 100;
    background-color: #fff;
    box-sizing: border-box;
    min-height: 100%;
}

ul li::before {
    display: none;
}

a:-webkit-any-link {
    text-decoration: none;
}

p {
    color: #333333;
    letter-spacing: 0.01em;
    font-weight: 200;
    font-style: normal;
    line-height: 1.5;
}

:focus {
    outline: none;
}

code {
    background: #f0f0f0;
    display: inline-block;
    padding: 4px;
    border-radius: 1px;
    font-size: 10px;
    line-height: 1;
    font-family: 'Roboto', Helvetica, Arial, sans-serif !important;
}

body.open {
    overflow: hidden;
}

.shadow {
    -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.app-bar {
    display: block;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #1c5bb1;
    overflow: hidden;
    z-index: 12;
}

.app-bar-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 60px;
    position: relative;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    margin: 0 auto;
}

.app-bar.open,
.app-bar.open ~ main {
    -webkit-transform: translate(250px, 0);
    transform: translate(250px, 0);
}

.app-bar .logo {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 2em;
    line-height: 60px;
    margin: 0 16px;
    padding: 0;
    color: #fefefe;
    float: none;
    max-width: none;
    font-weight: 300;
    display: initial;
}

.app-bar .logo a {
    text-decoration: none;
    color: inherit;
    font-weight: normal;
}

.app-bar-actions {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    z-index: 2;
}

.app-bar button {
    width: 60px;
    height: 60px;
    background-image: none;
    background-color: transparent;
    border: none;
    padding: 0;
    display: inline-block;
    -webkit-transition: background-color 0.2s ease-out;
    transition: background-color 0.2s ease-out;
    -webkit-tap-highlight-color: transparent;
}

.app-bar button img {
    height: 24px;
    width: 24px;
}

.app-bar button:focus {
    outline: 0;
}

.small-logo {
    display: block;
    width: 6rem;
    height: auto;
    top: 50%;
    position: absolute;
    -webkit-transform: translateY(-50%);
    right: 0;
    margin-right: 10px;
}

.small-logo img {
    max-width: 100%;
}

.promote-layer {
    /*
    This may promote the layer to a composited
    layer.

    Replace with will-change when available

    #perfmatters
    */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.base,
p,
ul,
ol {
    font-size: 19px;
}

.navdrawer-container {
    z-index: 11;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 250px;
    height: 100%;
    background-color: #1c5bb1;
    color: #fefefe;
    -webkit-transform: translate(-250px, 0);
    transform: translate(-250px, 0);
    -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.navdrawer-container.open {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.app-bar,
.navdrawer-container.opened,
main {
    -webkit-transition: -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
}

.navdrawer-container h4,
.navdrawer-container ul li a {
    height: 45px;
    padding-top: 12px;
    line-height: 1.4;
}

.navdrawer-container h4 {
    background-color: #276DE2;
    padding-top: 0;
    height: 60px;
    padding-top: 5px;
    padding-left: 20px;
}

.navdrawer-container ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    height: 100%;
}

.navdrawer-container ul li a {
    display: block;
    text-decoration: none;
    color: white;
    -webkit-transition: background-color 0.2s ease-out;
    transition: background-color 0.2s ease-out;
    white-space: nowrap;
    text-align: center;
    padding-top: 12px;
    font-size: 16px;
}

.navdrawer-container ul li {
    border: 1px rgba(255, 255, 255, 0.2);
    border-bottom-style: solid;
    padding: 0;
}

.navdrawer-container ul li::before {
    content: none;
}

.navdrawer-container ul li a {
    text-transform: uppercase;
}

.navdrawer-container ul li:hover.vijesti {
    background-color: #4C7DBF;
}

.navdrawer-container ul li:hover.vijesti ul li a {
    background-color: #4C7DBF;
}

.navdrawer-container ul li:hover.magazin {
    background-color: #f4b400;
}

.navdrawer-container ul li:hover.magazin ul li a {
    background-color: #f4b400;
}

.navdrawer-container ul li:hover.lifestyle {
    background-color: #CA529F;
}

.navdrawer-container ul li:hover.lifestyle ul li a {
    background-color: #CA529F;
}

.navdrawer-container ul li:hover.sport {
    background-color: #318445;
}

.navdrawer-container ul li:hover.sport ul li a {
    background-color: #318445;
}

.navdrawer-container ul li:hover.tocka-4 {
    background-color: #E51C24;
}

.navdrawer-container ul li:hover.tocka-4 ul li a {
    background-color: #E51C24;
}

.navdrawer-container ul li:hover ul li a:hover {
    background: #333333;
}

.navdrawer-container ul li a:focus {
    background-color: rgba(255, 255, 255, 0.3);
    outline: 0;
}

.navdrawer-container ul li a:active {
    background-color: rgba(255, 255, 255, 0.4);
}

.navdrawer-container ul ul {
    display: none;
    line-height: 1em;
}

.navdrawer-container ul li:hover > ul {
    display: block;
}

.navdrawer-container ul li.tap ul {
    display: block;
}

.navdrawer-container ul ul li {
    float: none;
    position: relative;
}

.navdrawer-container ul ul li a {
    color: #fff;
    background-color: rgba(75, 79, 81, 0.52);
    height: 3em;
    padding-top: 12px;
    text-align: left;
    padding-left: 38%;
    font-size: 13px;
}

.navdrawer-container ul ul ul {
    display: none;
}

.navdrawer-container ul ul li:hover > ul {
    display: block;
}

main {
    margin: 0 auto;
    /* Height of the header */
    min-height: 100%;
    width: 100%;
}

.search-container {
    display: block;
    height: 2.4em;
    width: 100%;
    padding-right: 1%;
}

#search-box {
    position: relative;
    float: right;
    margin: auto;
    padding-top: 0.4em;
    -webkit-transition: all .5s ease-in-out,all .5s ease-out;
    transition: all .5s ease-in-out,all .5s ease-out;
    padding-top: 20px;
}

#search-box .search-field {
    box-sizing: border-box;
    height: 1.4em;
    color: #000000;
    background-color: #276DE2;
    border: none;
    width: 100%;
}

#search-box a {
    position: absolute;
    top: -5%;
    right: 10px;
    color: #1C5BB1;
}

#search-box a:hover {
    background-color: transparent;
}

#search-box ::-webkit-input-placeholder {
    color: #132040;
    font-size: 14px;
    padding-top: 3px;
    padding-left: 5px;
}

#search-box :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #132040;
    font-size: 14px;
    padding-top: 3px;
}

#search-box ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #132040;
    font-size: 14px;
    padding-top: 3px;
}

#search-box :-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #132040;
    font-size: 14px;
    padding-top: 3px;
}

@media all and (min-width: 667px) and (max-width: 768px) {
    .navdrawer-container {
        margin-left: -5px;
    }
}
/** Larger Screens - desktops and tablets **/
@media all and (min-width: 990px) {
    .app-bar {
        position: relative;
    }

    .app-bar.open,
    .app-bar.open ~ main {
        -webkit-transform: translate(0px, 0);
        transform: translate(0px, 0);
    }

    .app-bar-container {
        display: none;
    }

    .app-bar-actions {
        float: right;
    }

    .app-bar::after {
        content: ' ';
        display: block;
        height: 0;
        overflow: hidden;
        clear: both;
    }

    button.menu {
        display: none;
    }

    .app-bar .logo {
        float: left;
        margin: 0;
        padding: 0;
        line-height: 130px;
        font-size: 46px;
        background: url("../images/logo.png") no-repeat center fixed;
        display: block;
        width: 200px;
        height: 60px;
    }

    .navdrawer-container {
        width: 100%;
        height: 75px;
        margin-top: 0;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-transition: all .3s ease-in-out,all .3s ease-out;
        transition: all .3s ease-in-out,all .3s ease-out;
    }

    .navdrawer-container h4 {
        display: none;
    }

    .logo {
        float: left;
        display: inline-block;
        background: #276de2 url("../images/logo.png");
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: 85%;
        height: 4.7rem;
        width: 10rem;
        -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
        box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.26);
        -webkit-transition: all .3s ease-in-out,all .3s ease-out;
        transition: all .3s ease-in-out,all .3s ease-out;
    }

    .navdrawer-container ul {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        margin: 0 auto;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .navdrawer-container ul li {
        border: none;
        width: 5.3em;
        display: inline-block;
        text-align: center;
        padding-left: 0;
    }

    .navdrawer-container ul li a {
        line-height: 1.4;
        padding-top: 30px;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
        border-right: 1px solid #1F4EB2;
        text-transform: uppercase;
        font-size: 12px;
        font-weight: bold;
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
        -webkit-transition: all .3s ease-in-out,all .3s ease-out;
        transition: all .3s ease-in-out,all .3s ease-out;
        height: 75px;
    }

    .navdrawer-container ul li a:last-child {
        border-right: none;
    }

    .navdrawer-container ul li a:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

    .navdrawer-container ul ul {
        display: none;
    }

    .navdrawer-container ul li:hover > ul {
        display: block;
    }

    .navdrawer-container ul ul li {
        float: none;
        border-bottom: none;
        position: relative;
        width: auto;
        -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    }

    .navdrawer-container ul ul li a {
        width: 150px;
        padding-left: 14%;
        padding-top: 10px;
        color: #fff;
        background-color: #1c5bb1;
        border-right-color: transparent;
        text-align: left;
        height: 3em;
        font-size: 12px;
        font-weight: normal;
    }

    .navdrawer-container ul ul li a:hover {
        background-color: #333333;
    }

    .navdrawer-container ul li#fb a {
        border-right: none;
        margin-top: 20px;
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
        -webkit-transition: all .3s ease-in-out,all .3s ease-out;
        transition: all .3s ease-in-out,all .3s ease-out;
    }

    .navdrawer-container.smaller {
        height: 45px;
        -webkit-transition: all 0.3s;
        -webkit-transition: all .3s ease-in-out,all .3s ease-out;
        transition: all .3s ease-in-out,all .3s ease-out;
    }

    .smaller a.logo {
        background-size: 70%;
        height: 2.75rem;
        -webkit-transition: all .3s ease-in-out,all .3s ease-out;
        transition: all .3s ease-in-out,all .3s ease-out;
    }

    .navdrawer-container.smaller ul li a {
        height: 45px;
        padding-top: 15px;
        -webkit-transition: all .3s ease-in-out,all .3s ease-out;
        transition: all .3s ease-in-out,all .3s ease-out;
    }

    .navdrawer-container.smaller ul ul li a {
        height: 2em;
        padding-top: 5px;
    }

    .navdrawer-container.smaller ul li#desktop-search div.search-container form#search-box {
        padding-top: 7px;
    }

    .navdrawer-container.smaller ul li#fb a {
        margin-top: 5px;
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
        -webkit-transition: all .3s ease-in-out,all .3s ease-out;
        transition: all .3s ease-in-out,all .3s ease-out;
    }

    .navdrawer-container.smaller ul li#fb .social-button-logo-container {
        margin-top: 48%;
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
        -webkit-transition: all .3s ease-in-out,all .3s ease-out;
        transition: all .3s ease-in-out,all .3s ease-out;
    }

    .search-container {
        width: 4em;
        padding-right: 0%;
        margin-left: 140%;
    }

    #search-box .search-field:focus {
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
        -webkit-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        padding-left: 5%;
        width: 11em;
    }

    main {
        padding-top: 30px;
        min-height: initial;
    }

    body {
        overflow-y: scroll;
        background-color: #efefef;
        background-image: url(/bundles/websitenews/images/bg.png);
    }
}
@media (orientation: landscape) and (min-width: 769px) and (max-width: 1024px) {
    #desktop-search {
        display: block;
        margin-left: 73px;
    }

    .navdrawer-container.smaller ul li#desktop-search {
        margin-top: -15px;
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
        -webkit-transition: all .3s ease-in-out,all .3s ease-out;
        transition: all .3s ease-in-out,all .3s ease-out;
    }

    .navdrawer-container.smaller ul li#desktop-search .search-container #search-box a {
        top: -3px;
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
        -webkit-transition: all .3s ease-in-out,all .3s ease-out;
        transition: all .3s ease-in-out,all .3s ease-out;
    }

    .navdrawer-container ul li#desktop-search .search-container #search-box a {
        top: -18px;
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
        -webkit-transition: all .3s ease-in-out,all .3s ease-out;
        transition: all .3s ease-in-out,all .3s ease-out;
    }
}
@media all and (max-width: 1024px) {
    .search-container {
        padding-top: 15px;
    }

    #search-box {
        padding-top: 5px;
        border: 1px solid #1C5BB1;
        padding-bottom: 5px;
        margin-right: 10px;
        margin-left: 10px;
        float: none;
        -webkit-transition: all .3s ease-in-out,all .3s ease-out;
        transition: all .3s ease-in-out,all .3s ease-out;
    }

    #search-box ::-webkit-input-placeholder {
        color: #1C5BB1;
    }

    #search-box ::-webkit-input-placeholder:active {
        padding-left: 5px;
    }

    #search-box a {
        top: 7px;
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
        -webkit-transition: all .3s ease-in-out,all .3s ease-out;
        transition: all .3s ease-in-out,all .3s ease-out;
        color: #1C5BB1;
    }
}
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 300;
    src: url("fonts/RobotoCondensed-Light.eot");
    src: local("Roboto Condensed Light"), local("RobotoCondensed-Light"), url(/fonts/RobotoCondensed-Light.eot) format("embedded-opentype"), url(/fonts/RobotoCondensed-Light.woff) format("woff");
}
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    src: url("fonts/RobotoCondensed-Regular.eot");
    src: local("Roboto Condensed Regular"), local("RobotoCondensed-Regular"), url(/fonts/RobotoCondensed-Regular.eot) format("embedded-opentype"), url(/fonts/RobotoCondensed-Regular.woff) format("woff");
}
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    src: url("fonts/RobotoCondensed-Bold.eot");
    src: local("Roboto Condensed Regular"), local("RobotoCondensed-Bold"), url(/fonts/RobotoCondensed-Bold.eot) format("embedded-opentype"), url(/fonts/RobotoCondensed-Bold.woff) format("woff");
}
@font-face {
    font-family: 'Roboto Condensed';
    font-style: italic;
    font-weight: 300;
    src: url("fonts/RobotoCondensed-LightItalic.eot");
    src: local("Roboto Condensed Light Italic"), local("RobotoCondensed-LightItalic"), url(/fonts/RobotoCondensed-LightItalic.eot) format("embedded-opentype"), url(/fonts/RobotoCondensed-LightItalic.woff) format("woff");
}
@font-face {
    font-family: 'Roboto Condensed';
    font-style: italic;
    font-weight: 400;
    src: url("fonts/RobotoCondensed-Italic.eot");
    src: local("Roboto Condensed Italic"), local("RobotoCondensed-Italic"), url(/fonts/RobotoCondensed-Italic.eot) format("embedded-opentype"), url(/fonts/RobotoCondensed-Italic.woff) format("woff");
}
@font-face {
    font-family: 'Roboto Condensed';
    font-style: italic;
    font-weight: 700;
    src: url("fonts/RobotoCondensed-BoldItalic.eot");
    src: local("Roboto Condensed Bold Italic"), local("RobotoCondensed-BoldItalic"), url(/fonts/RobotoCondensed-BoldItalic.eot) format("embedded-opentype"), url(/fonts/RobotoCondensed-BoldItalic.woff) format("woff");
}


@media (min-width: 1024px) { 
    .news-category.left {
        content: '';
        display: block;
        width: 100%;
        height: 250px;
        float: left;
        height: 350px;
        background-color: #ffffff;
    }
    .news-category--paragraph.left {
        display: block;
        float: left;
        border-bottom: 1px solid #F2F2F2;
        overflow: hidden;
        padding-top: .35em;
        padding-bottom: .35em;
        width: 100%;
    }
    .news-category--paragraph__content.left h4 {
        text-align: left;
        padding-top: 5px;
        font-weight: 500;
        width: auto;
        font-size: 13px;
        margin: 0 auto;
        color: #505050;
        overflow: hidden;
        letter-spacing: .01em;
        font-weight: 200;
        font-style: normal;
        line-height: 1.5;
    }
    .news-category--paragraph__content.left h4 {
        font-weight: 400;
    }
    .news-category--paragraph__content.left {
        display: block;
        width: 100%;
    }
}

.news-category--header.class-sexy {
    display: block;
}

@media (max-width: 682px) {
    .news-category--header.class-sexy.news-category--header {
        padding: 0 0 0 20px;
    }
    .news-category--header.class-sexy.news-category--header h4 {
        letter-spacing: .01em;
        font-weight: 200;
        font-style: normal;
        line-height: 1.5; 
    }
}