/* Minification failed. Returning unminified contents.
(514,1): run-time error CSS1019: Unexpected token, found '}'
(1446,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(1447,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(2186,29): run-time error CSS1038: Expected hex color, found '#fff0'
(3907,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(3908,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(4549,60): run-time error CSS1030: Expected identifier, found ' '
(4549,60): run-time error CSS1019: Unexpected token, found ' '
(7412,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(7413,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(7422,1): run-time error CSS1019: Unexpected token, found '@-moz-keyframes'
(7423,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(7432,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(7433,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(7450,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(7451,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(7460,1): run-time error CSS1019: Unexpected token, found '@-moz-keyframes'
(7461,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(7470,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(7471,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
 */
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

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

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}
body {
    padding: 0;
    font-family: 'Open Sans',Helvetica,Arial,sans-serif;
    margin: 0;
    font-size: 14px;
    color: #243e3e;
    overflow-x:hidden;
    position:relative;
    background-color:black;
}

hr {
    background-color: #6ebebe;
    border: 0;
    height: 1px;
    margin: 1em 0;
}
li {
    list-style: none;
}

.nav-up {
    top: -85px;
}
.nav-up .sections__link {
    height:50px;
}
@media only screen and (max-width:1024px) {
    .nav-up {
        top: -50px;
    }
    
}

.menu--button--container {
    width: 40px;
    /* float: right; */
    position: fixed;
    z-index: 99999;
    height: 40px;
    top: 0;
    right: 0;
}

#menu--button {
    float: right;
    margin-right: 20px;
    margin-top: 20px;
    color: white;
    z-index: 9999;
}

}

@media only screen and (max-width: 1024px) {
    #menu--button {
        margin-right: 10px;
        margin-top: 20px;
        opacity: 0.5;
    }
}

/*EN MINA NIILLE LAULANUT*/

.animals--home {
    color: white;
    text-align: center;
    background-color: black;
    font-weight: 600;
    padding: 230px;
}

@media only screen and (max-width:1024px) {
    .animals--home {
        padding: 6em 0 0 0;
    }
}

.animals-headline1 {
    font-weight: 700;
    font-style: italic;
    font-size: 4em;
    font-family: auto;
}

.animals-headline2 {
    font-size: 2em;
}

.animals-counter {
    font-size: 2em;
    padding: 0.1em 0.2em;
    width: fit-content;
    margin: 1em auto;
    font-family: auto;
    font-weight: 100;
}


/*MAPCREATOR STARTS HERE*/
/*MAPCREATOR STARTS HERE*/
/*MAPCREATOR STARTS HERE*/
/*MAPCREATOR STARTS HERE*/


.newspek--map--creator--topic--info {
    text-align:center;
    width:100%;
    padding:50px;
    background-color:white;
 
}

.newspek--map--creator--topic--info > h2 {
    padding-bottom:60px;
}

.mapcreator--add--content--input {
    width: 300px;
    height: 40px;
    background-color: #eee;
}

.mapcreator--input {
    width: 80%;
    height: 30px;
    margin-bottom: 20px;
    padding:10px;
}

.mapcreator--add--content--button {
    background-color: forestgreen;
    color: white;
    font-weight: 700;
    width: 300px;
    margin: 0 auto;
}

.map--creator--topic {
    padding-top:10px;
    padding-bottom:10px;
    border-bottom: 1px solid black;
}

.mapcreator--search--wiki {
    width: 80%;
    background-color: forestgreen;
    color: white;
    padding: 10px;
    margin: 0 auto 20px auto;
}

#wiki--searchinput {
    margin-bottom: 0;
}

.map--creator--topic.wiki--topic--main {
    text-align: left;
}

.map--creator--topic.wiki--topic--child {
    text-align:left;
    font-weight:600;
    padding-left:40px;
    font-size:0.9em;
}

/*.newspek--map--creator--topic--info.wiki--topic--child > h2 {
    padding-bottom: 60px;
}*/

.map--creator--topic.wiki--topic--grand {
    text-align:left;
    font-weight:500;
    padding-left: 80px;
    font-size:0.8em;
}

.oldspek--topic {

}

.mapcreator--topic--buttons {
    display: inline-flex;
}

.mapcreator--topic--buttons > p {
    padding:3px 10px;
    color: blue;
    font-size:0.9em;
}

.mapcreator--column {
    float:left;
    width:380px;
    margin: 0px 10px;
}


.mapcreator--children {
    text-align:center;
    margin: 50px auto;
    width:1200px;
}

.mapcreator--topic--headline {
    font-weight:600;
}

.newspek--map--creator--wikipedia--saveall--button {
    background-color: forestgreen;
    color: white;
    font-weight: 700;
    width: 80%;
    margin: 0 auto;
}

.mapcreator--add--topic--button {
    background-color: forestgreen;
    color: white;
    font-weight: 700;
    width: 80%;
    margin: 0 auto;
}

.mapcreator--select--button {
    width: 80%;
    height: 20px;
    margin: 0 auto;
    color: white;
    background-color: red;
    display: none;
}
.mapcreator--select--button.visible {
    display:block;
}




/*Article fetching STUFF*/

.fetch--article--list--container {
    display: block;
    margin: 50px auto;
    width: 1500px;
}

.fetch--article--container {
    display: inline-block;
    float:right;
}

.fetch--article--add {
    
}

.fetch--article--remove {

}

.fetch--article--headline {

}

.fetch--article--more {
    clear:both;
    width: 1500px;
    margin: 0 auto;
    padding:20px;
    background-color:black;
    color:white;
    text-align:center;
}


.fetch--article--topics {
}

/*STUFF FOR IPTC CONNECTING*/
.iptc--ul {
    display: inline-block;
    padding: 200px 0 0 100px;
}
.iptc--link {
    display:inline-block;
    padding:10px;
    font-size:1.4em;
}

.iptc--button {
    display:inline-block;
    padding: 10px;
    font-size:1.4em;
    color: white;
    background-color:lightseagreen;
}

.iptc--to--newspek--item {
    display:inline-block;
    width:100%;
}

.iptc__input {
    display:inline-block;
}

.nav-up .sections__list {
}

.questionnaire--button {
    width: auto;
    height: 50px;
    text-align: center;
    padding: 12px;
    font-size: 20px;
    background-color: white;
    color: #3cb8b2;
}

.topic--keypoints--point {
    list-style-type: disc;
    margin-bottom:15px;
}
.topic--keypoints {
    padding: 20px 20px 5px 50px;
    background-color: #f1fdfb;
    letter-spacing: .4px;
    font-family: arial;
    font-size: 14px;
    line-height: 21px;
    display:none;
}

@media only screen and (max-width: 1024px) {
    .topic--keypoints {
        font-size:12px;
        line-height:16px;
    }
}

.newspek--helper {
    width:100%;
    padding:2em;
    border:1px solid #80808033;
    border-radius:10px;
    background-color:#3cb8b2;
    margin-bottom:2em;
}
.newspek--helper--headline {
    color:white;
    font-size:2.5em;
    text-align:center;
    padding-bottom:.7em;
}

.newspek--helper--content {
    color:white;
    font-size:1.6em;
    line-height:1.3em;
    padding: 1em 0 1em 0;
}

.topicpage--header--background {
    padding:1em;
    background-color:#257571;
}

.sections.nav-up {
    height:50px;
}

.nav-down {
    top: 0;
}

.text-danger {
    color:red;
    font-weight:600;
}

.header--dropdown {
    position: relative;
    color:#6ebebe;
    width: 100px;
}

.header--dropdown--content {
    display: none;
    position: absolute;
    background-color: #3cb8b2;
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 25;
    transition: display 1s ease-in-out;
    top: 128px;
    left: 415px;
}

.header--dropdown--content.dropdown--visible {
    display:block;
}

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
     -webkit-appearance: none;
     border-radius:0;
}

input {
    color: #243e3e;
    background-color: #fff;
    -webkit-border-radius: 0;
    -webkit-appearance: none;
    border-radius: 0;
    border: none;
}

textarea {
    color: #243e3e;
}

#singletopic--admin--relateds {
    display:none;
}

.main-container {
    margin: 0 auto;
    padding: 135px 0 2em 0;
    width: 100%;
    display:block;
    position:relative;
    overflow:hidden;
    min-height:inherit;
}

@media only screen and (max-width:1024px) {
    .main-container {
        padding: 60px 0 2em 0;
        -webkit-overflow-scrolling:touch;
    }
}

.main-container.mindmap--is--open {
    padding:120px 0 0 0;
    overflow:visible;
}

.topicfrontpage--content--container {
    width:85%;
    margin: 0 auto;
}
.topicfrontpage--content--container.feed--topicfrontpage--container {
    width:100%;
    display:none;
}
@media only screen and (max-width:1024px) {
    .topicfrontpage--content--container {
        width:100%;
    }
}

.terms-privacy-cookies {
    width: 50%;
    padding-top:120px;
    
}
@media only screen and (max-width: 1024px) {
    .terms-privacy-cookies {
        width: 100%;
    }
}
.terms-privacy-cookies h1 {
    text-align: center;
    padding-top:50px;
}

.single--page {
    width: 600px;
    margin-left:auto;
    margin-right:auto;
    padding: 4em 1em 1em 1em;
    background-color:rgba(244,240,255,1);
    margin-top:120px;
}
@media only screen and (max-width: 600px) {
    .single--page {
        width: 100%;
    }
    
}

footer p {
    margin-left:auto;
    margin-right: auto;
    font-size: 0.9em;
    text-align:center;
    padding: .5em 0;
    border-top:1px solid #80808080;
}
footer a {
    color: #6ebebe;
}

.feed-container {
    margin-top: 10px;
    margin-left: auto;
    margin-right:auto;
    min-height: 1080px;
    display:flex;
}

@media only screen and (max-width: 1024px) {
    .feed-container {
    margin-top:30px;
    }

}

@media only screen and (min-width: 1024px) {
    .feed-container {
        width:1024px;
        display:flex;
    }
}

@media only screen and (min-width: 1224px) {
    .feed-container {
        width:1410px;
        display:flex;
    }
}

@media only screen and (min-width: 1424px) {
    .feed-container {
        width:1510px;
        display:flex;
    }
}

@media only screen and (min-width: 1624px) {
    .feed-container {
        width:1610px;
        display:flex;
    }
}


@media only screen and (max-width:1023px) {
    .topics-container {
        min-width:100%;
    }
}
.feed--explain {
    width:100%;
    padding-top:4em;
}
.feed--explain--text {
    width:100%;
    text-align:center;
    border-top:3px solid grey;
    border-bottom:3px solid grey;
    padding-top:2em;
    padding-bottom:2em;
}
.feed--explain--text p {
    color:black;
    font-size:1.4em;
}
.feed--explain--text h4 {
    color:black;
    padding:1em;
    font-size: 1.2em;
}

@media only screen and (min-width: 1024px){
    .feed--explain--text {
    width:30%;
    margin-left:auto;
    margin-right:auto;
}
}

.feed--color--container {
    width:100%;
    text-align:center;
}
.feed--color--center {
    margin-top: 30px;
    display:inline-block;
}
.feed--color {
    color:white;
    float:left;
    padding:1em 3em;
    margin: 0 10px;
}

@media only screen and (max-width:1024px) {
    .feed--color {
        width:100%;
        margin:0;
    }
}

.related--remove--button {
    color:rgba(110, 190, 190, 0.7);
    float:right;
    padding-right:.5em;
}
.related--remove--button:hover {
    color:#6ebebe;
    cursor:pointer;
}


@media only screen and (max-width: 1024px) {
    .sidebar-right {
        display:none;
    }
    #show-in-mobile {
        display: inline-block;
    }

}

@media only screen and (min-width: 1024px) {
    #show-in-mobile {
        display:none;
    }
}

.info-box {
    display:block;
    margin-left:auto;
    margin-right:auto;
    width: 100%;
    max-height:1000px;
    margin-bottom:1em;
    background-color:white;
}
@media only screen and (max-width:1024px) {
    .info-box {
        padding-top:2em;
    }
}

.info-box-text {
    margin-left:auto;
    margin-right:auto;
    height:100%;
    width:750px;
    color:black;
    text-align:center;
}
.info-box a {
    color: #6ebebe;
    font-weight:700;
    padding:1em;
}

.info-box-row {
    width:100%;
    display:inline-flex;  
    padding: 1em;


}

.info-box-textcontainer {
    display:inline-block;
}

.info-box-piccontainer span {
    color:white;
}

.info-box-piccontainer {
    border: 1px solid white;
    border-radius: 50px;
    height:100px;
    width:100px;
    padding-top:20px;
    font-size:24px;
    text-align:center;
    display:inline-block;
    margin-right:.5em;
}

.info-box a:hover {
    text-decoration: underline;
}

.info-pic {
    background-size: cover;
    width: 100%;
    height: 220px;
}
@media only screen and (max-width: 1729px) {
    .info-box {
        background-size:cover;
        background-position-x: 80%;
    }
}

@media only screen and (max-width: 1024px) {
    .info-pic {
        height: 155px;
    }
    .info-box-text {
        width:100%;
    }
    
}
@media only screen and (min-width: 1025px) {
    .info-box-text {       
        padding: 3em 3em 1em 3em;
        background-color:white;
    }
}


.info-box p {
    padding: 0;
    font-size:1.1em;
    line-height:1.3em;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    text-align:left;
    display:inline-block;
    color:black;
}

.info-box ul {
    list-style: none;
}


.info-box h1 {
    text-align: center;
    font-size:1.6em;
}

.info-box h3 {
    padding: 0 30px 0 30px;
}

.info-box h2 {
    padding: 10px 30px 20px 30px;
    font-size:1.2em;
    color:#3cb8b2;
}
.create-feed {
    display: block;
    width: 100%;
}

.count--info--container {
    width: 100%;
    background-color:white;
    padding: 2em 0;
}

.count--info--hidecontainer {
    width:50%;
    margin: 0 auto;
    transition: display linear 1s;
    font-size:1.2em;
}

@media only screen and (max-width:1024px) {
    .count--info--hidecontainer {
        width:100%;
    }
}

.count--info--hidecontainer h2,
.count--info--hidecontainer h3 {
    text-align:center;
    padding: 1em;
}
.count--info--hidecontainer h2 {
    color: #3cb8b2;
}

.count--info--hidecontainer b {
    color:#3cb8b2;
}

.count--info--hidecontainer h3 {
    font-weight:400;
    padding-top:2em;
}

.count--info--hidecontainer p {
    font-size:1.2em;
    padding: .5em;
    line-height:1.3em;
}

@media only screen and (max-width:1024px)  {
    .count--info--hidecontainer p {
        font-size:1em;
    }
}

.count--info--textcontainer {
    padding:1em;
}

.count--info--button {
    width:fit-content;
    margin: 0 auto;
    padding:0 1em;
    background-color:white;
    color:darkgrey;
    text-align:center;
    cursor:pointer;
}

.count--info--innercontainer {
    margin: 0 auto;
}

.count--info--innercontainer p {
    text-align:center;
}
.count--info--innercontainer b {
    color:#3cb8b2;
}

@media only screen and (min-width:1024px) {
    #searchbox {
        width: 400px;
        display: table;
        height: 35px;
        margin-top: 0;
        position: relative;
        margin-left: 10px;
        margin-right: auto;
        float: left;
        
    }
    #related--searchbox {
        width: 100%;
        display: inline-block;
        height: 35px;
        position: relative;
        margin: 0 auto;
    }

    #nav-wrapper {
        padding-top:.5em;
        width: 1024px;
        margin-left: auto;
        margin-right: auto;
        display: table;
    }

.search--container {
    padding:5px;
}

.search--topic--result {
    margin-bottom:2px;
}

#searchinput {
    width: 400px;
    height: 50px;
    -webkit-border-radius: 0;
}
#searchinput::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:black;
}
#searchinput:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    black;
   opacity:  1;
}
#searchinput::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    black;
   opacity:  1;
}
#searchinput:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    black;
}
#searchinput::-ms-input-placeholder { /* Microsoft Edge */
   color:black;
}
    #related--searchinput {
        width: 100%;
        height: 35px;
        margin-left:auto;
        margin-right:auto;
        display:inline-block;
        background-color:rgba(255,255,255,0.5);
    }

    .n-logo {
        float: left;
        padding: 5px 0 0 0;
        width: 200px;
        display: table-cell;
    }

    .n-logo img {
        float: left;
        max-width: 100%;
        max-height: 100%;
        height: 40px;
        width: auto;
        position: relative;
        right: 0;
    }
}

.feed--bottom--container {
    display:none;
    clear:both;
    width:80px;
    margin-left:auto;
    margin-right:auto;
    padding:20px 0 20px 0;
}
.feed--bottom--loader {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #6ebebe; /* Blue */
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite;
}

.articlefeed--loader--container {
    display:block;
    width:80px;
    margin-left:auto;
    margin-right:auto;
    padding:20px 0 20px 0;
}
.articlefeed--loader {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #6ebebe; /* Blue */
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite;
}
.search--loader--container {
    display:block;
    width:80px;
    margin-left:auto;
    margin-right:auto;
    padding:20px 0 20px 0;
}
.search--loader {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #6ebebe; /* Blue */
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite;
}

.related--search--loader--container {
    display:block;
    width:80px;
    margin-left:auto;
    margin-right:auto;
    padding:20px 0 20px 0;
}
.related--search--loader {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #6ebebe; /* Blue */
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#searchresults {
    position: absolute;
    z-index: 50;
    background-color: #fff;
    width: 100%;
    list-style: none;
    padding: 0;
    border: 1px solid rgba(110, 190, 190, 0.18);
    box-shadow: 0px 0px 12px 3px #6c6c6c;
}

#related--searchresults {
    z-index: 10000;
    background-color: #fff;
    width: 100%;
    list-style: none;
    padding: 0;
    border: 1px solid rgba(110, 190, 190, 0.18);
    box-shadow: 0px 0px 12px 3px #6c6c6c;
}

#searchresult--container {
    max-height: 350px;
    overflow-y: scroll;
}

#related--searchresult--container {
    max-height: 350px;
    overflow-y: scroll;
}

#searchresult--container a {
    padding:1em;
    width:100%;
}

#related--searchresult--container a {
    padding:1em;
    width:100%;
}

.results-hidden {
    display: none;
}

.searchresult {    
    text-align: left;
    display: block;
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.searchresult p.timestamp {
    font-size: 0.8em;
    text-align: right;
    padding-top: 0.4em;
    padding-right: 10px;
    width: 20%;
    float:right;
    display: table-cell;
}
.searchresult--topicname {
    width:70%;
    float:left;
    display: table-cell;
}

.searchresult a {
    padding-left: 10px;
    color: #000;
    display: table;
    width: 100%;
}


.searchresult:hover {
    background-color: #6ebebe;
    color:white;
    cursor:pointer;
}
.searchresult a:hover {
    color: white;
}

#searchbox {
    border: none;
}

#related--searchbox {
    border:none;
    border-radius:50px;
}

.addtopictext {
    text-align: center;
    padding: 10px 0 10px 0;
    border-top: 1px solid rgba(110,190,190,.3);
    color: #000;
    cursor: pointer;
}

    .addtopictext:hover {
        color: #fff;
        background-color: #6ebebe;
        font-weight: 700;
    }

.feed-container .form-horizontal h4 {
    text-align: center;
}


@media only screen and (max-width:1024px) {
    #nav-wrapper {
        display: table;
        width: 100%;
        position: relative;
    }

    .n-logo {
        width: 10%;
        height: auto;
        padding: 5px 10px 0 10px;
        display: table-cell;
    }

        .n-logo img {
            height: auto;
            width: auto;
            margin-left: auto;
            margin-right: auto;
            max-width: 30px;
        }

    #searchbox {
        height: 50px;
        width: 70%;
        display: table-cell;
        position: absolute;
        padding-top:5px;
        padding-bottom:10px;
    }
    #related--searchbox {
        height: 50px;
        width: 100%;
        display: table-cell;
        position: absolute;
    }

    #searchinput {
        width: 100%;
        height: 100%;
        position: relative;
    }
    #related--searchinput {
        width: 100%;
        height: 100%;
    }
}

#searchinput {
    background-color: white;
    color: black;
    padding-left: 10px;
}

#related--searchinput {
    background-color: rgba(255, 255, 255, 0.7);
    color: black;
    padding-left: 10px;
    border-radius:50px;
}

/*#searchbox ::-webkit-input-placeholder {
    color: white;
}*/

.topic-container {
    font-family: 'Open Sans',arial,verdana;
    margin:0;
}

@media only screen and (max-width:1024px){
    .topic-container {
        padding:0;
    }
}
.topic-container--new {
    border-top: 4px solid #6ebabb;
}
.topics-container {
    padding: 0;
    margin: 0;
    margin-left:auto;
    display:inline-block;
    width:100%;
}

.headline--background {
    background-color:white;
    margin: 0 auto -25px auto;
    padding: .1em;
    border:1px solid lightgrey;
    border-radius:5px;
}

@media only screen and (min-width: 1025px) {
    .headline--background {
        margin: 0 auto 15px auto;
    }
}
.headline--background h1 {
    padding-left:1em;
    font-weight:600;
    color:black;
    font-size:1.6em;
}

.headline--background.second--headline {
    margin-top:3em;
}

@media only screen and (max-width: 1024px) {
    .headline--background {
        margin-bottom:1em;
        width:100%;
    }
}

.right--side--container {
    display:inline-block;
    min-width:350px;
}
@media only screen and (min-width:1024px) {
    .topics-container {
        width: 850px;
    }
}


@media only screen and (min-width: 1024px) {
    .right--side--container {
        width: 350px;
        margin-left:10px;
    }
}
.left--side--container {
    width:20%;
    float:left;
    margin-right:.6em;
}
@media only screen and (max-width: 1024px) {
    .left--side--container {
        display:none;
    }
}

.topic-box {
    width: 100%;
    display: inline-block;
    background-color: white;
    padding: 0;
}
@media only screen and (min-width:1025px) {
    .topic-box {


    }
}

.topic-header {
    font-weight: 800;
    font-size: 22px;
}

.topicname-edit {
    font-size: 1.5em;
    border: 1px solid #6ebebe;
    width: 100%;
    padding-left: 15px;
    padding-bottom:5px;
    padding-top: 5px;
}
.description-edit {
    border: 1px solid #6ebebe;
    padding-left: 15px;
    padding-bottom:5px;
    padding-top: 5px;
    min-height: 150px;
    min-width: 480px;
}

.topic-info {
    color:black;
    transition: 1.5s ease;
}

.topic-form-container {
    background: #fff;
    padding: 20px;
}

.form-heading {
    margin-top: 0;
}

.header-follow {
    overflow: hidden;
    padding: 0;
    display:inline-flex;
    margin: 0 auto;
    width:100%;
    background-color:#257571;
}

.followmap--container {
    width:7%;
    float:right;
    text-align:right;
}

.followmap--button {
    width: 45%;
    cursor:pointer;
    height: 100%;
}



.followmap--button--follow {
    display:inline-flex;
}

.followmap--button--follow i {
    margin: 0 auto;
    color:white;
    font-size: 1.7em;
    margin-top: 5px;
}

.followmap--button--map {
    display: inline-flex;
    text-align: center;
    padding-top: 6px;
    height:33px;
    vertical-align:top;
}

.followmap--button--map img {
    height: 20px;
    margin: 0 auto;
    padding-top: 0px;
}

@media only screen and (max-width:1024px) {
    .followmap--container {
        width:15%
    }
    .followmap--button--map img {
        height: 20px;
    }
    .followmap--button--follow i {
        font-size:22px;
    }
}

.header-follow-simpleui {
    overflow: hidden;
    background-color: #fff;
}
.header-sets {
    width: 92%;
    float: left;
    color:white;
}
.header-sets.related--topics {
    width:auto;
}
.article--timestamp--container.related--topics {
    font-size:.9em;
    vertical-align:sub;
    padding-left:.5em;
}
.article--save--container {
    padding-right:.5em;
    display:inline-block;
    font-size:1em;
    
}

.article--save--container.list--save {
    padding-right:.5em;
    padding-left:.3em;
    padding-top:13px;
    float:right;
}

.article--save--container i {
    color:rgba(108,108,108, .4);
    font-size:1em;
    vertical-align:middle;
}
.article--save--container i:hover {
    cursor:pointer;
    color:#3cb8b2;
}
#saved--waterfall li {
    padding:1em;
    box-shadow:none;
}

#saved--waterfall .article {
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.50);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.50);
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.50);
    margin-bottom:1em;
}

.moreinfo--related--topics {
    width:100%;
    padding:.5em;
    color:#6ebebe;
    text-align:center;
}

.moreinfo--related--topics:hover {
    cursor:pointer;
    text-decoration:underline;
}

.header-sets a {
    color:white;
    font-size:14px;
    letter-spacing:.4px;
}

/*.header-sets.related--topics a {
    color:black;
}*/

.header-sets h1 {
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    width:auto;
    padding-left:20px;
    padding-top:5px;
}

.header-sets p {
    margin-top: 0;
    margin-left: 64px;
    color: #b0b0b0;
    font-weight: 600;
    font-size: 0.8em;
}
.header-sets h1:hover {
    cursor: pointer;
    text-decoration:underline;
}

@media only screen and (max-width:1024px) {
    .header-sets h1 {
        font-size: 16px;
        padding-left:10px;
        padding-top:6px;
    }
}

.follow-btn-holder {
    width: auto;
    float: right;
    transition-property: all;
	transition-duration: 1.5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

@media only screen and (max-width: 800px) {
    .follow-btn-holder {
        margin: 0;
    }
    .description-holder p {
        padding: 20px 20px 20px 20px
    }

}

.follow-btn:hover {
    background-color: #3c87b8;
    color: white;
    border: 1px solid white;
    cursor: pointer;
    transition: .5s;
}

.follow-btn.followTrue {
    background-color: #3c4eb8;
    color:white;
}


.followTrue:hover {
    background-color: #d64e4e;
    border-color: #d64e4e;
    color: #fff;
    cursor: pointer;
}

.follow-btn {
    float: right;
    padding: 12px 16px;
    border: 1px solid #3cb8b2;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    height:100%;
    color: white;
    font-weight: 700;
    font-size: 12px;
    margin: auto;
    outline-style: none;
    box-shadow: none;
    transition: .5s;
    background-color: #3cb8b2;
}

.follow-btn.topicpage {
    color:white;
}

@media only screen and (min-width: 1200px) {
    .follow-btn {
        font-size: 13px;
    }
}

.follow-btn-simpleui {
    border: none;
    background-color: none;
    color: #6ebebe;
}

.follow-btn-simpleui:hover {
    cursor: pointer;
    text-decoration: underline;
    background-color:none;
    color: #6ebebe;
}

.follow-btn:focus {
    outline-style: none;
    box-shadow: none;
}

.relateds--container {
    border-radius:2px;
    -webkit-box-shadow: 0px 3px 6px 2px rgba(0,0,0,0.60);
    -moz-box-shadow: 0px 3px 6px 2px rgba(0,0,0,0.60);
    box-shadow: 0px 3px 6px 2px rgba(0,0,0,0.60);
    padding: 1em .5em .5em .5em;
}

.relateds {
    padding: 0 0 25px 0;
    margin-left:15px;
    margin-right:15px;   
    width:94%;
    max-width:94%;
    transition-property: all;
	transition-duration: 1.5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.related--item {
    font-size:.9em;
    padding:.5em;
    transition: 1s ease;
    margin:2px;
    display:inline-block;
    border: 1px solid white;
    color:white;
}

.related--item:hover,
.related--item:focus,
.related--item:active {
    cursor:pointer;
    
}

.related--headline {
    color:white;
    margin-left:17px;
    padding: 1em 0;
    font-weight:400;
    transition-property: all;
	transition-duration: 1.5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    text-align:center;
}



.description-holder {
    width: 100%;
    margin: 0;
    transition-property: all;
	transition-duration: 1.5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.description-holder p {
    text-align: left;
    font-size: 1.3em;
    line-height: 1.4em;
    padding: 25px 0;
    color:black;
}

@media only screen and (max-width:1024px) {
    .description-holder p {
        line-height:1.4em;
        width:92%;
        margin: 0 auto;
    }
}

.topicitem--topiclink {
    margin: 0 auto;
    width: 92%;
}

.topicitem--topiclink a {
    color:#3cb8b2;
}

.options-and-author {
    width: 95%;
    padding: 0 30px 0 15px;
    margin:0 auto;
    color:blue;
    
}

.options-and-author p {
    font-size: .8em;
    display: inline-block;
    padding: 0 5px 0 0;
    cursor: pointer;
    color:rgba(0,0,0,.2);
}

.options-and-author p:hover {
    text-decoration: underline;
}

.options-and-author a {
    font-size: .8em;
    display: inline-block;
    padding: 0 5px 0 0;
    color:rgba(0,0,0,.2);
}
.options-and-author a:hover,
.options-and-author p:hover {
    color:#2bab9d;
}

.options-and-author a:hover {
    text-decoration: underline;
}

.articlefeed--sort {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    max-height:42px;
    display: block;
    border: none;
    padding: 0;
    overflow: hidden;
    transition-property: all;
	transition-duration: 1.5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

.articlefeed--sort--seein--container {
    display:inline-block;
    
}
.articlefeed--sort--seein {
    /*border-top:1px solid white;
    border-radius:10px;*/
    /*padding-top:5px;
    margin-top:5px;*/
}
.articlefeed--sort--zoomout {
    /*border-top:1px solid white;
    border-radius:10px;*/
    /*padding-top:5px;
    margin-top:5px;*/
}

.articlefeed--sort--zoomout--container {
    display:inline-block;
    /*margin-left:1em;
    padding-left:1em;
    border-left: 2px solid #ffffff6e;*/
    
}

.articlefeed--sort h6 {    
    font-size:.8em;
    width: 100%;
    display: inline-block;
    margin: 0 auto;
    color: white;
    text-align: center;


}
.articlefeed--sort--action img {
    width: 18px;
    height: 18px;
}

.articlefeed--sort--action a {
    color:white;
}
.articlefeed--sort--action {
    display: inline-block;
    cursor:pointer;
    color: white;
    font-size: 1.2em;
    font-weight: 600;
    padding: 10px 15px;
    border: none;
    float: left;
    text-transform:uppercase;
    border-bottom:3px solid #fff0;
}

@media only screen and (max-width:1024px) {
    .articlefeed--sort--action {
        padding: 10px 8px;
        font-size: 1em;
    }
    .articlefeed--sort {
        padding: 0 0 0 .2em;
        max-height:39px;
    }
}

.sort--action--selected {
    border-bottom: 3px solid white;
    color:black;
    background-color:white;
}
.articlefeed--sort--slash {
    display: inline-block;
    font-size: 0.9em;
}
.article-feed {
    /*background-color:white;*/
    transition-property: all;
	transition-duration: 1.5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    padding-bottom:20px;
}

.sequence--next--button {
    background-color:#3cb8b2;
    color:white;
    text-transform:uppercase;
    text-align:center;
    cursor:pointer;
    height:50px;
    font-size:1.4em;
    vertical-align:middle;
    padding-top:7px;
}
.sequence--next--button--container {
    width:20%;
    float:right;
    height:50px;
}
.sequence--next--button span.fa-2x {
    margin-bottom:5px;
    font-size:1.4em;
}

.controls--down {
    display:none;
    position:fixed;
    bottom:0;
    height:50px;
    border:1px solid #3cb8b2;
    width:100%;
    z-index:999999;
    background-color:white;
}

.show--sequence--button {
    width:100%;
    height:75px;
    padding-top:15px;
    border-radius:2px;
    background-color:#3cb8b2;
    color:white;
    vertical-align:middle;
    text-align:center;
    cursor:pointer;
    display:none;
}

.show--sequence--button:hover {
    text-decoration:underline;
}

.show--sequence--button span,
.show--sequence--button h2 {
    display:inline-flex;
    vertical-align:middle;
}
.show--sequence--button span {
    padding-left:4px;
}


.tooltip{
    display: block;
    position: relative;
    font-size: .7em;
}

.article-main-container {
    width:100%;    
    display:block;
    margin: 0 auto;
    transition-property: all;
	transition-duration: 1.5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    background-color:white;  
    /*-webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,.5);
    -moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,.5);
    box-shadow: 0px 0px 2px 0px rgba(0,0,0,.5);*/
    text-align:left;
    padding-left: 15px;
    border-bottom: 1px solid #eaeaea;
    
}

.article-relation-headline {
    display:inline-block;
    width:100%;
    margin-bottom:2px;
}
.article-relation-headline a {
    color: white;
    font-size: 12px;
    font-weight: 400;
    background-color: #3cb8b2;

}

.article-relation-headline span {
    color:#6ebebe;
    font-size:1em;
    display:none;
}

.article--list .article-relation-headline a {
    color:#257571;
    background-color:rgba(0,0,0,0);
}

.article--list .article-relation-headline span {
    display:inline-block;
}

.zoomout--button {
    height:75px;
    width:135px;
    border-radius:25px;
    background-color:#6ebebe;
    position:fixed;
    bottom:25px;
    right:25px;
    z-index:9999;
    text-align:center;
    cursor:pointer;
}
.zoomout--button p {
    color:white;
    font-size:50px;
    padding:.5em;
    font-size:22px;
}

.zoomout--explainer {
    color:#6ebebe;
    bottom: 62px;
    font-size: .9em;
    right: 120px;
    position: fixed;
    font-weight: 700;
    display:none;
}

@media only screen and (min-width: 1024px) {
    .carousel--article .pic-container {
        min-height:100px;
        max-height:190px;
    }
    .zoomout--button {
        bottom:50px;
        right:50px;
    }
}


.carousel--article .actions-container,
.carousel--article--container .actions-container {
    padding: 0 0 2px 0;
    text-align:center;
}

@media only screen and (max-width:1024px) {
    .carousel--article .actions-container,
    .carousel--article--container .actions-container {
        padding: 0 0 8px 0;
    }
}

.video--container {
    padding-bottom:15px;
    background-color: #005cfa14;
    padding-top:15px;
    display:none;
   
}

.video--container .actions-container {
    padding-left:10px;
}

@media only screen and (min-width:1025px) {
    .video--container .article-container {
        padding: 5px 10px 0px 14px;
    }
    .explain--video .actions-container {
        width:96%;
        padding-left:0;
        margin: 0 auto;
    }

    .video-container {
         margin-left:20px;  
    }

    .explain--video .article-container {
        width:92%;
        padding: 5px 0 0 0;
    }
}

.explain--video {
    width:60%;
    margin:0 auto;
}

.article--video--container {
    position: relative;
    height: 0;
    overflow: hidden;
    width:96%;
    margin: 5px auto;
    padding-bottom: 56.25%;
    touch-action:auto;
}

.article--group--container {

}
@media only screen and (min-width:1024px) {
    .article--group--articles .firstarticle {
        padding-right:15px;
        padding-left:15px;
    }
    .article--group--articles .headlines {
        padding-left:15px;
        padding-right:15px;
    }
}


.article--group--headline h2 {
    color: white;
    background-color: #257571;
    padding: .3em;
    font-size: 1em;
    text-align: left;
    font-weight: 400;
    padding-left: 20px;

}



.article--group--morebutton {
    color:rgba(0,0,0,0.50);
    text-align:center;
    padding:.5em;
    margin-bottom:20px;
}

.article--group--morebutton:hover {
    background-color:#eee;
    cursor:pointer;
}

.video--cover--play {
    position:absolute;
    top:0;
    width:100%;
    height:100%;
}

.carousel--article--container .article--video--container {
    max-height: 244px;
}
.article--video--container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    touch-action: auto;
}

.carousel--container {
    padding: 1em 0;
}

.topicpage--main--container {
    width: 100%;
    margin: 0 auto;
    padding-top:3em;
}

@media only screen and (min-width: 1025px) {
    .topicpage--content--container .item {
        width: 20%;
    }
    .topicpage--main--container {
        width:1000px;
        padding-top:1em;
    }
}

.topicpage--single--content {
    margin-top: 1em;
    background-color:white;
}

/*.topicpage--single--content.latest {
    background-color:#643cb8;
}
.topicpage--single--content.rated {
    background-color:#3c4eb8;
}
.topicpage--single--content.opinion {
    background-color:#3c87b8;
}
.topicpage--single--content.related {
    background-color: #3cb8b2;
}
.topicpage--single--content.mostread {
    background-color:#643cb8;
}*/



@media only screen and (max-width:1024px) {
    .topicpage--content--container .item {
        width: 66%;
    }
}


#basicSlider .MS-controls button { position: absolute; }

#basicSlider .MS-controls .MS-left {
  top: 35px;
  left: 10px;
}

#basicSlider .MS-controls .MS-right {
  top: 35px;
  right: 10px;
}



.article {
    height: auto;
    padding: 0; 

}

.pic-container {
    float: left;
    margin: 0;
    width: 100%;
    height: 160px;
    display: none;
    min-height: 180px;
    max-height:250px;
    overflow: hidden;
    background-color: #f2f2f2;
    background-size: contain;
    background-position-x: 50%;
}
.article-pic {
    background-size: cover;
    width: 100%;
    height: 100%;
}

.topic--articlegroups--container {
    background-color:white;
}

.pic-container img {
    width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.article-container {
    padding: 15px 10px 10px 5px;
    overflow: hidden;
    height: 100%;
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.help--container {
    padding:1em;
}

.help--container img {
    max-width: 100%;
    padding: 2em;
}

.help--container h2 {

}

.help--container h3 {

}

.help--container ol,
.help--container ul {
    padding: 2em;
    font-size: 1.2em;
}

.help--container ol li,
.help--container ul li {
    list-style-type:circle;
    padding:.5em;
}

.help--container span {
    color:#3cb8b2;
}

.help--container ul {
 
}

.help--container ul li {

}

.about--people--container {
    display:flex;
}

.about--people--info {
    
}

.about--people--info h4 {
    padding:1em;
}

@media only screen and (max-width:1024px) {
    .about--people--container {
        display:block;
    }
    .about--people--container img {
        margin:0 auto;
    }
}



.main-container.terms--privacy {
    width:100%;
}
@media only screen and (min-width:1024px) {
    .main-container.terms--privacy {
        width:50%;
    }
}

.terms-privacy-cookies p {
    padding:1em;
}
.terms-privacy-cookies h2 {
    padding:1em;
}

.article-container h5 {
        margin: 0;
    color: #c4c4c4;
    padding: 0;
    font-size: 10px;
    width: fit-content;
    overflow: hidden;
    display: inline-block;
    font-weight: 100;
    padding-right: 4px;
}

.article--source--container {
    margin-top:-2px;
    width:fit-content;
    display:inline-block;
}
.article--source--container img {
    float:left;
    margin-right:.4em;
    margin-top:1px;
    height:14px;
    width:14px;
}

.article-source b {
    
    color: grey;
    padding-left: .2em;
    padding-right: .2em;
    font-weight: 100;

}

.article-container h3 {
    margin: 0;
    text-decoration: none;
    padding: 0;
}
 
@media only screen and (max-width:1024px) {
    .article-headline a {
        line-height: 1.2em;
        font-size: 13px;
        font-weight:600;
    }
}

@media only screen and (min-width:1025px) {
    .article-headline a {
        line-height: 1.4em;
        font-size: 15px;
    }
}

.article-headline a {
    color: #303030;
    display: inline-block;
    text-decoration: none;    
    font-weight:600;
    overflow: hidden;
    letter-spacing:.3px;
    text-align:left;
}

.article-headline.first--article--headline {
    font-size:1.4em;
}


.actions-container span {
    padding: 0;
    display: inline-block;
}

.actions-container {
    padding: 0 0 8px 2px;
    margin: 0;
    height: auto;
    width:92%;
    font-size:1.1em;
    display:none;
}

.actions-container p {
    color: rgba(108,108,108, .4);
    font-size: .8em;
    display: inline-block;
    padding: 0 10px 0 0;
    cursor: pointer;
    margin: 0 0 0 0;
}

.reply--fa--reply {
    padding: 5px 0 0 2px;
}

.actions-container p.article--timestamp {
    color:grey;
}
.article--timestamp:hover {
    text-decoration:none;
}
.article--timestamp b {
    color: #6ebebe;
    font-weight:400;
}
.article--timestamp--container i {
    font-size:.6em;
    padding:2px 4px 0 0px;
    color:#c4c4c4;
}

.article--timestamp--container {
    display:inline-block;
    font-size:10px;
    color:#c4c4c4;
    vertical-align:top;
    padding-top:2.5px;
}

.article--timestamp {
    padding-bottom:3px;
}

.fa-reply-rotatex span {
    padding: 0 5px 0 0;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}
.fa-reply-rotatex {
    transform: rotateX(180deg);
    -webkit-transform: rotateX(180deg);
}

.actions-container p:hover {
    color: #6ebebe;
    text-decoration: underline;
}
.article-load-container {
    width: 100%;
    height: 100%;
    background-color: white;
    padding-top: 35px;
    margin-top: 10px;
}
.article-load-container img {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.article-load {
    height: 150px;
    margin-bottom: 10px;
    display: none;
}

.action.is-recommending {
    color:#6ebebe;
}

.article--dropdown {
    position: relative;
    display: inline-block;
    overflow:hidden;
}
.article--dropdown--btn {
    cursor: pointer;
}
.article--dropdown--content {
    display: none;
    position: absolute;
    height:40px;
    width:120px;
    z-index: 3;
    margin-left:130px;
    background-color: #6ebebe;
    -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.5);

}
.article--dropdown--content p.article--dropdown--p  {
    float:left;
    display:inline-block;
    color: #fff;
    padding: .5em;
    width: 100%;
    font-size:1em;
}
.article--dropdown--content p.article--dropdown--p:hover {
    text-decoration: underline;
}
.article--dropdown--show {
    display: block;
}

.article--dropdown--p

.article--reply--btn {
    width: 100%;
    height: auto;
    background-color: white;
    color:#6ebebe;
    text-align: center;
    cursor:pointer;
    padding: 5px 0 5px 0;
    border: 1px solid rgba(110, 190, 190, 0.24);
}
.morebutton--hidden {
    display:none;
}
.morebutton {
    height: auto;
    width: 100%;
    text-align: center;
    text-decoration: none;
    color: #3cb8b2;
    margin: 0 auto;
    background-color:white;
    padding: 10px 0 10px 0;
    position: relative;
    top: 0px;
    /*border-radius: 50px;*/
    transition: .5s;
    /*-webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.26);
    -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.26);
    box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.26);*/
}

.carousel--topic .morebutton {
    color:white;
}

.morebutton:hover {
    cursor: pointer;
}

.topicpage--morebutton {
    height: auto;
    text-align: center;
    text-decoration: none;
    color: white;
    margin: 0 auto;
    padding: 10px 0 10px 0;
    position: relative;
    top: 0px;
    background-color: #3cb8b2;
    transition: .5s;
}

.timeline--more--articles {
    text-align:center;
    color:white;
    padding: 10px 0 5px 0;
    cursor:pointer;
}
.timeline--more--articles:hover {
    text-decoration:underline;
    cursor:pointer;
}
.timeline--date {
    padding-top:5px;
    padding-bottom: 5px;
    font-size:1.2em;
    text-align:center;
    color:white;
}
@media only screen and (max-width:1024px) {
    .topicpage--morebutton {
        width: 50%;
    }
}

.topicpage--morebutton:hover {
    background-color: white;
    color: #6ebebe;
    cursor: pointer;
    transition: .5s;
}

.article-loader {
    display: none;
    height: 63px;
    color: #6ebebe;
}
.article-loader.fa {
    z-index: 3;
    display: none;
}
.article-loader_visible {
    display:block;
}



.morearticles-text {
    display: inline-block;
    width: 100%;
    font-size: 1.1em;
    text-align: right;
    padding-right:1em;

}

@media only screen and (max-width:1024px) {
    .morearticles-text {
        padding-right:0;
        font-size:1em;
    }
}

.article--list .morearticles-text {
    text-align:center;
    padding-right:0;
}
.articles-remaining {
    display: inline-block;
    font-size: 0.8em;
    margin-left:auto;
    margin-right:auto;
}

.articles-remaining p {
    display: inline;
}

.add-container {
    border:1px solid grey;
    border-radius:10px;
    height: 30px;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 2px 0 2px;
}

.add-button {
    float: left;
    cursor: pointer;
    padding: 5px 10px 10px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    color: grey;
    font-weight: 700;
    margin: 0;
    width: 20%;
    font-size: 1em;
    height: 100%;
    border: none;
    border-right: 1px solid grey;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color:transparent;
}

    .add-button:hover {
        background-color: #6ebebe;
        color: #fff;
        cursor: pointer;
    }

.add-input {
    float: right;
    background-color: rgba(0,0,0,0);
    border: 0;
    width: 80%;
    color:grey;
    height: 100%;
    padding: 0 0 0 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.add-input::placeholder {
    color:grey;
}

/*Settings for reply*/
.hidden {
    display: none;
}

.moretopics {
    width: 100%;
    padding: 10px 0 10px 0;
    color: #6ebebe;
    font-weight: 700;
    border: 1px solid #6ebebe;
    background-color: #fff;
    margin-top: 5px;
    display:block;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    clear:both;
}
.moretopics:hover {
    cursor: pointer;
    color: white;
    background-color:#6ebebe;
}

@media only screen and (min-width:100px) {
    .moretopics {
        width: 30%;
        height:50px;
        border-radius:25px;

    }
}

.addtopicname {
    width: 100%;
    display: inline-block;
    background-color: #fff;
    color:black;
}

.basic-input {
    background-color: #f2f2f2;
    border: none;
    display: inline-block;
    font-family: inherit;
    font-size: 14px;    
    padding: 1rem;
    width: 100%;
}

.basic-input--border {
    border: 2px solid #7ad4d4;
}

.addtopicdescription {
    width: 100%;
    display: inline-block;
    min-height: 100px;
    resize: vertical;
}
.addkeywords {
    width: 100%;
    display: inline-block;
    min-height: 50px;
    resize: vertical;
}

.create-button {
    width: 100%;
    padding: 10px 0 10px 0;
    color: white;
    font-weight: 700;
    background-color: #3cb8b2;
    margin-top: 5px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-block;
}

.user-list-admin {
    margin-top: 10px;
    float: left;
}

.user-list-admin li {
    text-decoration: none;
}

.admin--action--container {
    width:100%;
    padding: 2em 1em;
}

.status {
    position: fixed;
    top: 50px;
    visibility: hidden;
    backface-visibility: hidden;
    width: 100%;
    z-index: 9999;
}

.status__content {
    background: #6ebabb;
    color: #fff;
    font-weight: 700;
    left: 50%;
    margin: 0 0 1rem;
    opacity: 0;
    padding: 1rem;
    position: relative;
    text-transform: uppercase;
    transform: translateX(-50%);
    visibility: hidden;
    backface-visibility: hidden;
    width: 100%;

    -webkit-transform: translate3d(-50%, -20%, 0);
    -moz-transform: translate3d(-50%, -20%, 0);
    -ms-transform: translate3d(-50%, -20%, 0);
    transform: translate3d(-50%, -20%, 0);

    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}

.status--visible {
    visibility: visible;
}

.status--visible .status__content {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate3d(-50%, 0, 0);
    -moz-transform: translate3d(-50%, 0, 0);
    -ms-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
}

.status__content--error {
    background: #d64e4e;
}

@media only screen and (min-width:600px) {
    .status__content {
        width: 600px;
    }
}

.modal__content {
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    background-color: white;
    border: none;
    margin: auto;
    border-radius:20px;
    padding: 30px;
    position: relative;
}
.modal--show .modal__content {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

#RememberMe {
    border: 1px solid #e2e2e2;
}

textarea.topic--create--input, 
input[type="text"].topic--create--input, 
input[type="button"].topic--create--input, 
.topic--create--input {
    background-color: #f2f2f2;
    border-radius:20px;
    
}

.create--topic--headline {
    padding: .5em;
    padding-left: 0;
    color: #3cb8b2;
}


.feed__modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 20000;
    visibility: hidden;
    backface-visibility: hidden;
    transform: translateX(-50%) translateY(-50%);
}
@media only screen and (max-width:800px) {
    .feed__modal {
        width:100%
    }
    .modal__content {
        padding:5px;
    }
    .modal__content .sections {
        display: block;
    }
}

.modal--show {
    visibility: visible;
}

.modal-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    background: rgba(110, 186, 187, .8);
    transition: all 0.3s;
}

.modal--show ~ .modal-overlay {
    opacity: 1;
    visibility: visible;
}

.modal__close-btn {
    color: #6ebebe;
    font-size: 2em;
    font-weight: bold;
    line-height: 1em;
    position: absolute;
    right: .75em;
    top: .5em;
    z-index: 3000;
}

.modal__close-btn:hover, .modal__close-btn:focus {
    color: #243e3e;
    text-decoration: none;
    cursor: pointer;
}

.modal__content h2 {
    margin-top: 0;
}

@media only screen and (max-width:1024px) {
    .modal__content {
        max-height:500px;
        overflow-y:scroll;
        -webkit-overflow-scrolling:touch;
        width: 100%;
    }
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group__checkbox {
    float: left;
}

.form-group__checkbox-label {
    margin-left: 5px;
    vertical-align: sub;
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
}

.loginBtn {
    box-sizing: border-box;
    position: relative;
    margin: .2em;
    padding: 0 15px 0 46px;
    border: none;
    text-align: left;
    line-height: 34px;
    white-space: nowrap;
    border-radius: .2em;
    font-size: 16px;
    color: #fff;
}

.loginBtn:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 100%;
}

.loginBtn:focus {
    outline: none;
}

.loginBtn:active {
    box-shadow: inset 0 0 0 32px rgba(0,0,0,.1);
}

.loginBtn--facebook {
    background-color: #4c69ba;
    background-image: linear-gradient(#4c69ba,#3b55a0);
    text-shadow: 0 -1px 0 #354c8c;
}

.loginBtn--facebook:before {
    border-right: #364e92 1px solid;
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 6px 6px no-repeat;
}

.loginBtn--facebook:hover, .loginBtn--facebook:focus {
    background-color: #5b7bd5;
    background-image: linear-gradient(#5b7bd5,#4864b1);
}

.loginBtn--google {
    background: #dd4b39;
}

.loginBtn--google:before {
    border-right: #bb3f30 1px solid;
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
}

.loginBtn--google:hover, .loginBtn--google:focus {
    background: #e74b37;
}

*, *::after, *::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input[type=checkbox] {
    display: inline-block;
    width: 19px;
    height: 19px;
    -webkit-appearance: none;
    outline: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

input[type=checkbox]:not(:checked) {
    background-image: url(img/symbols/rememberoff.png);
}

input[type=checkbox]:checked {
    background-image: url(img/symbols/rememberon.png);
}

.checkbox label {
    font-size: 0.9em;
    padding-bottom: 4px;
}

.submit-btn {
    padding: 12px 20px 12px 20px;
    border: 2px solid #7ad4d4;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    letter-spacing: 1px;
    display: inline-block;
    color: #6ebebe;
    font-weight: 700;
    background-color: #fff;
    margin: 1em 0 0;
    outline-style: none;
    box-shadow: none;
    text-transform: uppercase;
}

.submit-btn:hover,
.submit-btn:focus {
    border-color: #6ebebe;
    background: #6ebebe;
    color: #fff;
}

#loginForm a {
    color: #6ebebe;
}


.terms-privacy-register {
    color: rgba(0, 0, 0, 0.7);
    font-size: 0.8em;
}

.terms-privacy-register a {
    color: #6ebebe;
}

.terms-privacy-cookies-container {
    background-color:black;
    color:white;
    padding-top:2em;
}
.terms-privacy-cookies-container h2,
.terms-privacy-cookies-container h3,
.terms-privacy-cookies-container p,
.terms-privacy-cookies-container ul {
    padding:20px;
    font-size:1.2em;
    line-height:1.6em;
}
.terms-privacy-cookies-container h1 {
    text-align:center;
}

.app--button--container {
    text-align:center;
}

.contact-p {
    padding-top:5px;
    font-size:1em;
}

.contact-a {
    padding-left: 20px;
    padding-bottom: 20px;
    font-size: 1.3em;
    color: #9797f1;
    cursor: pointer;
    text-decoration:underline;
}

.app--button {
    width: 40%;
    display: inline-block;
    padding: 15px;
    cursor:pointer;
}

.app--button img {
    max-width:100%;
    border-radius:12px;
}

@media only screen and (max-width:1024px) {
    .app--button {
        width:100%;
    }
}

/*Sections BEGIN*/

.sections {
    margin: 0 auto;
    padding: 0 0 1.5em 0;
    position:absolute;
    top:65px;
    background-color:#3cb8b2;
    height:70px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    white-space:nowrap;
    overflow-y:hidden;
    z-index:10;
}
@media only screen and (max-width:1024px) {
    .sections {
        top:50px;
        height:40px;
    }
}


.parents {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    white-space:nowrap;
    overflow-y:hidden;
    z-index:10;
    display:none;
}

.topicpage--main--container .parents {
    display:block;
}

.sections.roof {
    top: 26px;
    background-color:white;

}

.sections::-webkit-scrollbar {
    display:none;
}
@media only screen and (max-width:1024px) {
    .sections {
        overflow-x: scroll;
        -webkit-overflow-scrolling:touch;
    }   
}


.parents::-webkit-scrollbar {
    display:none;
}
@media only screen and (max-width:1024px) {
    .parents {
        overflow-x: scroll;
        -webkit-overflow-scrolling:touch;
    }   
}

.roof--container {
    top: 109px;
    position: absolute;
    height: 50px;
    width: 100%;
}

#sections__scroll {
    display: inline-block;
    height:70px;
}
.roof--scroller {
    position: absolute;
    height:70px;
    width:40px;
    background-color:rgba(255,255,255,.1);
    color: rgba(255,255,255,.5);
    top:26px;
    z-index:10000;
    text-align:center;
}
.roof--scroller:hover {
    background-color: rgba(255,255,255,.3);
    color:white;
}

.roof--scroller span {
    padding-top:1.2rem;
}

@media only screen and (max-width:1024px) {
    .roof--scroller {
        display:none;
    }
}

.scroller--left {
    left:0;
}

.scroller--right {
    right:0;
}

#roof__scroll {
    max-height: 44px;
    display: inline-block;
    height:44px;
}

@media only screen and (min-width:1024px) {
    #roof__scroll {
        padding-left:2.5em;
    }
}

.sections__list {
    list-style-type: none;
    text-align: center;
    width: 100%;
    margin: 0;
    position:relative;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    max-width:100%; 
}

.parents__list {
     list-style-type: none;
    text-align: center;
    width: 100%;
    margin: 0;
    display:inline-block;
    position:relative;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    max-width:100%; 
}

.sections__list.roof {
    width:auto;
    max-width:none;
}


@media only screen and (max-width: 1024px) {
    .sections__list {
        padding-left: 0;       
    }
}
@media only screen and (min-width:1025px) {
    .sections__list {
        margin: 0;
        height:100%;
        margin-left:auto;
        margin-right:auto;
        padding:0;
    }
}


@media only screen and (max-width: 1024px) {
    .parents__list {
        padding-left: 0;       
    }
}
@media only screen and (min-width:1025px) {
    .parents__list {
        margin: 0;
        height:100%;
        margin-left:auto;
        margin-right:auto;
        padding:0;
    }
}

.sections__item {
    display: inline;
    margin: 0 .3em .3em 0;
}

.parents__item {
    display:inline;
    margin:0 1em 0 0;
}

.parents__item a {
    display: inline-block;
    position: relative;
    padding-bottom: 10px;
    color: grey;
    font-size: 1em;
    font-weight: 600;
    background-color: white;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 45px;
}

.parents__item a:hover {
    color:black;
}

.parents__item a::after {
    content: "|";
    color: #3cb8b2;
    position: absolute;
    top: 34px;
    left: 30px;
    font-size: 15px;
}
.create__sections__link {
    background: #dadada;
    color: #fff;
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    margin: .5rem .25rem;
    padding: 1rem 1rem 1rem 1rem;
    text-transform: uppercase;
    transition: .5s;
}

.sections__link {
    color: white;
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    height:70px;
    margin: 0 .25rem;
    padding: 2.5rem 1rem 1rem 1rem;
    text-transform: uppercase;
    transition: .5s;
    background-color:rgba(0,0,0,0);
}

@media only screen and (max-width:1024px) {
    .sections__link,
    .nav-up .sections__link {
        height:40px;
        padding:1rem;
    }
    #sections__scroll {
        height:40px;
    }
    .sections.nav-up {
        height:40px;
    }
}

.roof__link  {
     color: darkgrey;;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    height:70px;
    margin: 0 .25rem;
    padding: 2.5rem 1rem 1rem 1rem;
    text-transform: uppercase;
    transition: .5s;
    background-color:rgba(0,0,0,0);
}

.sections__link i {
    padding-left: 5px;
}

.roof__link i {
    padding-left: 5px;
}


.sections__link.sections__link--selected {
    border-bottom: 4px solid #732c7b;
    color:#732c7b;
}

.roof__link.roof__link--selected {
    border-bottom: 4px solid #3cb8b2;
    color:#3cb8b2;
}

.create__sections__link.sections__link--selected {
    background-color: #6ebebe;
    color:white;
}

@media only screen and (min-width:1000px) {
    .sections__link:hover,
    .sections__link:active,
    .sections__link:focus {
        border-bottom: 4px solid #732c7b;
        color:#732c7b;
    }
    .create__sections__link:hover,
    .create__sections__link:active,
    .create__sections__link:focus {
        background: white;
        color:#3cb8b2;
    }
    .roof__link:hover,
    .roof__link:active,
    .roof__link:focus {
        border-bottom: 4px solid #3cb8b2;
        color:#3cb8b2;
    }
}



/*Sections for topic creating*/

.sections-selection {
    list-style-type: none;
    padding: 0;
}

.sections-item {
    clear: both;
    margin-bottom: 10px;
}

/*.sections-item-btn {
    font-weight: 700;
    margin-left: 5px;
    text-transform: uppercase;
    vertical-align: middle;
}*/

#create__sections .sections-item-checkbox {
    display: none;
    float: left;
}
#create__sections .sections-item-checkbox:hover {
    cursor:pointer;
}

.sections-item-checkbox--border {
    border: 2px solid #7ad4d4;
}

.feed-loader {
    display: none;
    margin-left: -15px;
    margin-top: -15px;
    position: fixed;
    top: 50%;
    z-index:5000;
    left: 50%;
}

.feed-loader--visible {
    display: block;
}

.feed-loader__circle {
    -webkit-animation-name: loader-scale 1s ease-out infinite;
    -moz-animation-name: loader-scale 1s ease-out infinite;
    -ms-animation-name: loader-scale 1s ease-out infinite;
    animation: loader-scale 1s ease-out infinite;
    border: 4px solid #6ebebe;
    border-radius: 50%;
    height: 40px;
    margin: -28px auto 0 auto;
    position: relative;
    top: 50%;
    width: 40px;
}

@keyframes loader-scale {
  0% {
    transform: scale(0);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    transform: scale(1);
    opacity: 0; } }

.addrssarticle--headline {
    text-decoration: none;
    color: black;
    font-size: 1.1em;
    margin-left:20px;

}
.rss--done--button {
    width: 79%;
    margin: 20px auto;
    padding: 10px 0 10px 0;
    color: #6ebebe;
    font-weight: 700;
    border: 2px solid #6ebebe;
    background-color: #fff;
    display:block;
    text-align:center;
}
.rss--add--button {
    float: right;
    cursor: pointer;
    padding: 10px 10px 10px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    color: #fff;
    font-weight: 700;
    background-color: #6ebebe;
    margin: 0;
    width: 100%;
    font-size: 1em;
    height: 100%;
    border: none;
    border: 1px solid #6ebebe;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.rss--search--container {
    margin: 0 auto;
    width:50%;
}
@media only screen and (max-width: 1024px) {
    .rss--search--container {
        width:100%;
    }
}

.rss--search--container input {
    width:100%;
    height:40px;
    background-color:lightgray;
}


.rss--add--button:hover {
    color:#6ebebe;
    background-color: #fff;
}

.rss--done--button a:hover {
    color:#fff;
}
.rss--done--button a {
    color: #6ebebe;
}
.rss--done--button:hover {
    color:#fff;
    background-color:#6ebebe;
    cursor: pointer;
}
.morearticles--rss {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 0 10px 0;
    color: #6ebebe;
    font-weight: 700;
    border: 2px solid #6ebebe;
    background-color: #fff;
    margin-top: 5px;
    display:block;
    text-align:center;
    clear:both;
}
.morearticles--rss:hover {
    color:#fff;
    background-color:#6ebebe;
    cursor: pointer;
}
.rss--article {
    width: 100%;
    height: 50px;
    display: inline-block;
}
#rssarticle-container {
    height: auto;
    display: block;
    margin-bottom:5px;
    margin-left: auto;
    margin-right:auto;
    padding:0;
}
.rss--addinfo {
    width:79%;
    margin-left:auto;
    margin-right:auto;
    padding: 30px 0 30px 0;
    text-align:center;
    background-color: #fff;
    margin-top: 15px;
}
.rss--feed--container {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}
@media only screen and (max-width: 1024px) {
    .rss--feed--container {
        width:100%;
    }
}
.rss--add--container {
    width:15%;
    float:right;
    display:inline-block;
    margin-top:20px;
}
@media only screen and (max-width:1024px) {
    .rss--add--container {
        margin-top:30px;
        margin-right:30px;
    }
}
.rss--article--datetime {
    margin:0;
    padding: 10px 0 0 0;
}
.inner--rssarticle--container {
    padding: 10px 0;
    overflow: hidden;
    height: 60%;
    display: inline-block;
    width: 79%;
    margin-left: 10px;
    background-color:#fff;
}
.inner--rssarticle--container h5 {
    font-size: 11px;
    margin: 0;
    color: #5e676c;
    padding: 0 0 0 0;
}

.inner--rssarticle--container h3 {
    margin: 0 0 -5px 0;
    text-decoration: none;
    max-height: 4em;
}

@media only screen and (max-width:1024px) {
    .inner--rssarticle--container h3 {
        font-size: 1em;
    }
    .inner--rssarticle--container a {
        line-height: 1em;
        max-height: 3.1em;
        font-size: 1.1em;
    }
    .rss--addinfo {
        width: 100%;
    }
    .rss--done--button {
        width: 100%;
    }
    .morearticles--rss {
        width:100%;
    }
}
.rss--article--container {
    background-color: white;
    width:100%;
}

.rss--article--container .article {
        padding: 0px 0px 0px 0px;
        margin-top: 0;
    }
@media only screen and (max-width:800px) {

    .rss--article--container {
        margin-bottom: 1em;
    }
    
}
@media only screen and (min-width:800px) {
    .rss--article--container {
        float:left;
        margin:1em;
    }
}

@media only screen and (min-width: 1500px) {
    .rss--article--container .article-main-container {
        border-bottom: none;
    }
}


/*Settings for waterfall(gridUI). wf in names stands for waterfall*/

.wf--topicli {
    list-style: none;
}

/*Settings for timeline*/
.timeline--background {
    width: 100%;
    height: auto;
    /*background-repeat: no-repeat, no-repeat, repeat-x;
    background-position: left top, right top, center top;*/
    background-size: cover;
    margin-left: auto;
    margin-right: auto;
    /*background-image: url(https://www.newspek.com/Content/img/logos/info_pic.jpg);
    background-size: cover;*/
}
.timeline--topicinfo--gradient {
    height: 100%;
    margin: 0 auto;
    background-color:white;
}
@media only screen and (max-width:1024px) {
    .timeline--topicinfo--gradient {
        width:100%;
    }
}

.timeline--topicinfo {
    height: auto;
    margin-left: auto;
    margin-right: auto;
    color: black;
    vertical-align: bottom;
}
.timeline--topicinfo h2 {
    font-size: 1.1em;
    line-height:1.6em;
    font-weight: 400;
    text-align: left;
    clear:both;
    margin-top:20px;
    margin-bottom:20px;
}

.timeline--topicinfo a {
        font-size: 1em;
    word-break: break-word;
    color: white;
    font-weight: 400;
}

.topicinfo--follow--holder {
    margin:0;
}
.topicinfo--follow--btn {
    background-color:rgba(255, 255, 255, 0)
}
.timeline-admin {
    text-align:center;
    padding:1em;
    display:none;
}
.timeline .add-container {
    max-width: 500px;
    width: 1500px;
    margin-left: auto;
    margin-right: auto;
    background-color:white;
    margin-top:1em;
    border:1px solid rgba(110,190,190,.3);
    border-radius:10px;
    max-width:900px;
}
.timeline--article--container {
    background-color: white;
    width:100%;
    margin: 0;
    transition: display 1s ease;
}
.timeline--article.article-main-container {
    width: 100%;
}

.timeline--topicinfo h1 {
    width:79%;
    display:inline-block;
    margin:0;

}


.timeline--article--container .article-headline a {
    font-size:1.1em;
    line-height:1.3em;
}

.timeline--article--container .article {
        padding: 0px 0px 0px 0px;
        margin-top: 0;
    }

@media only screen and (max-width:800px) {
    .timeline--topicinfo {
        width: 100%;
    }
    .timeline--background {
        width:100%;
    }
    .timeline--topicinfo a {
        font-size:18px;
    }
    .timeline--topicinfo h1 {
        line-height:22px;
    }
    
}

.timeline--article--container .pic-container img {
    width: 100%;
}
.timeline--moment  {
    display:block;
    padding: 10px 0 10px 0;
    clear:both;
}
.timeline--moment--time {
    font-size: 1.5em;
    width: 100%;
    clear: both;
    display: block;
    text-decoration: underline;
    margin-left: 2em;
}
@media only screen and (max-width: 1024px) {
    .timeline--moment--time {
        font-size: 1em;
        margin-left: 0.5em;
    }
}

.events-content ol {
    padding: 0;
    margin: 0;
}
.events-content ul {
    padding:0;
}

/*From here on settings for topicFrontPage*/

.topicpage--topics--container {
    width: 90%;
    margin-left:auto;
    margin-right:auto;
}

.topicpage--area {
    margin:1em;
        -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.50);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.50);
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.50);
    background-color:white;
}
.topicpage--area.frontpage--latest {
    background-color:rgb(84,85,108);
}
.topicpage--area.frontpage--rated {
    background-color:rgb(237,175,30);
}
.topicpage--area.frontpage--opinion {
    background-color:rgb(28,82,83);
}

@media only screen and (max-width: 1024px) {
    .topicpage--area {
        width: 100%;
    }
    .topicpage--topics--container {
        width:100%;
    }
}
.goback--button {
    vertical-align:middle;
    cursor:pointer;
    padding-top:1em;
}

.topic--upnav--angle { 
    height: 100%;
    display: inline-block;
    float: left;
    color: white;
    font-size: 2em;
}

.topic--upnav--text {   
    padding-left: 30px;
    font-size: 1.2em;
    vertical-align: middle;
    color: white;
    margin-bottom: 105px;
}

.topicpage--nav--wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #6ebebe;
    color:white;
    display:flex;
    height: 60px;
    box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.2), 0 -6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index:2;
}
.topicpage--nav--list {
    -webkit-box-flex: 1;
    flex: 1;
    -ms-flex: 1;
    justify-content: space-around;
    align-items: center;
    display: flex;
    display: -webkit-box;
    display:-ms-flexbox;
    -ms-flex-pack: distribute;
    height: 100%;
}
.topicpage--nav--item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-transform: uppercase;
    text-decoration: none;
    color: white;
    font-size: .9em;
}
.nav--item--selected {
    background-color:white;
    color:#6ebebe;
}
.topicpage--nav--item:hover,
.topicpage--nav--item:focus,
.topicpage--nav--item:target {
    cursor:pointer;
    color:#6ebebe;
    background-color:white;
    transition: .5s ease-in-out;
}

article-container h5.black--text {
    color:black;
}

.newspek--text {
    color: #6ebebe;
}
#goback {
    font-size: 1.5em;
    margin-left:10px;
}
.latestrated--container {
    width:100%;
    margin:0;
    padding: .5em 0 .5em 0;
}
@media only screen and (min-width:1025px) {
    .latestrated--container {
    margin-left:auto;
    margin-right:auto;
    }
}

.rated--container {
    margin-top:2em;    
}
.opinion--container {
    margin-top:2em;
}
.latest--container {
    margin-top:2em;
}

.topicpage--related--container {
    margin: 3em 1em 1em 1em;
    background-color:rgb(224,62,82);
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.50);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.50);
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.50);
    color:white;
    padding-bottom:2px;
}

.topicpage--related--item {
    padding: 1em;
    background-color:rgb(224,62,82);
}
.related--item--headline {
    color:white;
    padding:1em;
    font-size:1.3em;
}

.related--item--description {
    padding: 0 1em 1em 1em;
}

.topicpage--topichole {
    margin: 0 auto;
}

.topic--data--container {
    padding-bottom:2em;
    padding-left:2em;
    font-size:.8em;
    cursor:pointer;
}

.topic--data--container a {
    color:white;
}

.add--article--container {
    display:none;
    width:100%;
}

.topic--data--container p {
   margin-right:.5em;
   display:inline-block;
}

.add--articles--button {
    background-color: #3c58b8;
    font-size: 1.4em;
    color: white;
    padding: .5em 1em;
    border-radius: 5px;
}

.topic--data--container b {
    color: #3cb8b2;
}

.frontpage--headline {
    text-align:left;
    color:white;
    width: fit-content;
    /*background-color:rgb(115, 44, 123);*/
    position:relative;
    font-size:1.2em;
    z-index: 9999;
}
.topicfrontpage--content--container .frontpage--headline {
    background-color:rgb(115, 44, 123);
}

.carousel--topic .frontpage--headline {
    background-color: rgba(0,0,0,0);
}


.frontpage--headline::before {
    content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  bottom: -24px;
  /*border: 12px solid;*/
  border-color: rgb(115, 44, 123) transparent transparent rgb(115, 44, 123);
  z-index: -1;
}
.frontpage--headline::after {
    content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 0px;
  bottom: -24px;
  /*border: 15px solid;*/
  border-color: rgb(115, 44, 123) transparent transparent rgb(115, 44, 123);
  z-index:-1;
}
@media only screen and (max-width:1024px) {
    .frontpage--headline {
    font-size:1.2em;
    padding:10px 1em;
    padding-bottom:5px;
    
}
    .frontpage--headline::before {
      bottom: -20px;
    }
    .frontpage--headline::after {

      bottom: -20px;

    }
}

./*frontpage--headline.timeline--headline {
    background-color:#732c7b;
}
.frontpage--headline.timeline--headline::before {
    border-color: #732c7b transparent transparent #732c7b;
}
.frontpage--headline.timeline--headline::after {
    border-color: #732c7b transparent transparent #732c7b;*/
frontpage--headline.latest--headline {
    background-color:#732c7b;
}
.frontpage--headline.latest--headline::before {
    border-color: #732c7b transparent transparent #732c7b;
}
.frontpage--headline.latest--headline::after {
    border-color: #732c7b transparent transparent #732c7b;
}
.frontpage--headline.rated--headline {
    background-color:#643cb8;
}
.frontpage--headline.rated--headline::before {
    border-color: #643cb8 transparent transparent #643cb8;
}
.frontpage--headline.rated--headline::after {
    border-color: #643cb8 transparent transparent #643cb8;
}
.frontpage--headline.opinion--headline {
    background-color:#3c4eb8;
}
.frontpage--headline.opinion--headline::before {
    border-color: #3c4eb8 transparent transparent #3c4eb8;
}
.frontpage--headline.opinion--headline::after {
    border-color: #3c4eb8 transparent transparent #3c4eb8;
}
.frontpage--headline.related--headline {
    background-color:#3c87b8;
}
.frontpage--headline.related--headline::before {
    border-color: #3c87b8 transparent transparent #3c87b8;
}
.frontpage--headline.related--headline::after {
    border-color: #3c87b8 transparent transparent #3c87b8;
}

.frontpage--headline.video--headline {
    background-color:#3cb8b2;
}
.frontpage--headline.video--headline::before {
    border-color: #3cb8b2 transparent transparent #3cb8b2;
}
.frontpage--headline.video--headline::after {
    border-color: #3cb8b2 transparent transparent #3cb8b2;
}
/*.frontpage--headline.topicitem--headline::before {
    top:30px;
}
.frontpage--headline.topicitem--headline::after {
    top:35px;
}*/
.frontpage--headline.headerOne {
    background-color:#732c7b;
}
.frontpage--headline.headerOne::before {
    border-color: #732c7b transparent transparent #732c7b;
}
.frontpage--headline.headerOne::after {
    border-color: #732c7b transparent transparent #732c7b;
}
.frontpage--headline.headerTwo {
    background-color:#3cb8b2;
}
.frontpage--headline.headerTwo::before {
    border-color: #3cb8b2 transparent transparent #3cb8b2;
}
.frontpage--headline.headerTwo::after {
    border-color: #3cb8b2 transparent transparent #3cb8b2;
}
.frontpage--headline.headerThree {
    background-color:#643cb8;
}
.frontpage--headline.headerThree::before {
    border-color: #643cb8 transparent transparent #643cb8;
}
.frontpage--headline.headerThree::after {
    border-color: #643cb8 transparent transparent #643cb8;
}
.frontpage--headline.headerFour {
    background-color:#3c4eb8;
}
.frontpage--headline.headerFour::before {
    border-color: #3c4eb8 transparent transparent #3c4eb8;
}
.frontpage--headline.headerFour::after {
    border-color: #3c4eb8 transparent transparent #3c4eb8;
}
.frontpage--headline.headerFive {
    background-color:#3c87b8;
}
.frontpage--headline.headerFive::before {
    border-color: #3c87b8 transparent transparent #3c87b8;
}
.frontpage--headline.headerFive::after {
    border-color: #3c87b8 transparent transparent #3c87b8;
}
.rated--headline {
    text-align:center;
    margin:0;
    
    color:white;
}
.rated--headline h3 {
    font-size: 1em;
}
.rated--headline p {
    font-size:1.2em;
}

.rated.article {
    padding:0;
    display:inline-flex;
    width:100%;
}
.rated.article-main-container {
    width:94%;
    background-color:white;
}
.rated > .article-headline {
    font-size:1.2em;
}
.rated--li--count {
    font-size:1.5em;
    color:#6ebebe;
    padding:0.5em;
}
@media only screen and (max-width:1024px) {
    .rated--li--count {
        font-size:1.5em;
    }
}
@media only screen and (min-width:1025px) {
    .rated--li--count {
        padding: 1.5em 1em 1.5em 1em;
    }
}



.no--related {
    font-size:1em;
    text-align:center;
    padding:1em;
    font-weight:600;

}


/*Vertical Timeline style*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 /* INTRO SECTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.intro {
  background: #732c7b;
  padding: 50px 0;
  -webkit-box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.40);
    -moz-box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.40);
    box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.40);
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.timeline--topicname {
    color:white;
    font-size:2em;
}


/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/*.timeline > ul {
  background: #3c4eb8;
  padding: 50px 0;
}

.timeline > ul > li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #fff;
}

.timeline > ul > li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit;
}

.timeline > ul > li > div {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 15px;
  background: #3cb8b2;
  -webkit-box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.40);
    -moz-box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.40);
    box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.40);
}

.timeline > ul > li > div::before {
  content: '';
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline > ul > li:nth-child(odd) > div {
  left: 45px;
}

.timeline > ul > li:nth-child(odd) > div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #F45B69 transparent transparent;
}

.timeline > ul > li:nth-child(even) > div {
  left: -439px;
}

.timeline > ul > li:nth-child(even) > div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #F45B69;
}

time {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
}*/


/* EFFECTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/*.timeline > ul > li::after {
  transition: background .5s ease-in-out;
}

.timeline > ul > li.in-view::after {
  background: #F45B69;
}

.timeline > ul > li > div {
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease-in-out;
}

.timeline > ul > li:nth-child(odd) > div {
  transform: translate3d(200px, 0, 0);
}

.timeline > ul > li:nth-child(even) > div {
  transform: translate3d(-200px, 0, 0);
}

.timeline > ul > li.in-view > div {
  transform: none;
  visibility: visible;
  opacity: 1;
}*/


/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/*@media screen and (max-width: 900px) {
  .timeline > ul > li > div {
    width: 250px;
  }
  .timeline > ul > li:nth-child(even) > div {
    left: -289px;
  }
}

@media screen and (max-width: 600px) {
  .timeline > ul > li {
    margin-left: 20px;
  }
  .timeline > ul > li > div {
    width: calc(100vw - 91px);
  }
  .timeline > ul > li:nth-child(even) > div {
    left: 45px;
  }
  .timeline > ul > li:nth-child(even) > div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent #F45B69 transparent transparent;
  }
}*/

.language--selectionlist {
    width:100%;
    text-align:center;
    height:100%;
    min-height:200px;
}
.language--selectionlist li {
    list-style: none;
    text-align:center;
    float: left;
    margin: 0 .5em;
}
.language--selectionlist a {
    color: white;
    width:100%;
    background-color:#6ebebe;
    padding:.3em;
    transition: 1s ease;
    padding:.5em;
    margin:.5em;
    display:block;
}
.language--selectionlist a:hover {
    color: #6ebebe;
    background-color:white;
    cursor:pointer;
}


/*Comments starting from here*/



.article--commentfeed {
    display:inline-block;
}

.article--comments--container {
    display:none;
    transition: display 1s ease;
}

.comment--replies--container {
    display:none;
    transition: display 1s ease;
    padding-left:80px;
}

.comment--text--container {
    background-color:#e5e5e5;
    padding:1em;
    border-radius:10px;
}
.comment--actions--container {
    display:inline-flex;
}
.comment--actions--container p {
    float:left;
    padding:.5em .2em;
    font-size:.8em;
}
.comment--actions--container i {
    float:left;
    padding:0.75em 0 .5em 0;
    font-size:.8em;  
}
.comment--actions--container i.turn--around {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    margin-top:2px;
}
.comment--actions--container p:hover {
    text-decoration:underline;
    cursor:pointer;
}
.comment--timestamp p:hover {
    text-decoration:none;
    cursor:inherit;
}
.comment--replyfeed {
    border-left: 1px solid white;
    padding-left:1em;
}
.comment--action {
    padding-left:.7em;
    color: #3cb8b2;
}
.comment--timestamp {
    color:rgba(255,255,255,0.5)
}

.more--comments--button {
    display:inline-flex;
    text-align:center;
    width:100%;
    color:white;
    font-size:.9em;
    padding:.4em;
}

.morecomments--pcontainer {
    margin-left:auto;
    margin-right:auto;
    display:inline-flex;
}
.comment.add-container {
    height:30px;
    border:none;
    border-radius:0;
    padding:1em 2px;
    background-color:white;
}
.comment.add-input {
    height:30px;
    border:none;
    background-color:rgba(0, 0, 0, 0.1);
    
}
.comment.add-button {
    height:30px;
    padding:0;
    border:none;
    background-color:#3cb8b2;
    color:white;
}

.comment--timestamp i {
    padding: 5px 3px 0 1em;
    font-size:.5em;
}

.article--left {
    font-size:.8em;
    color:rgba(255, 255, 255, 0.5);
    padding-top:2px;
}
.more--comments--text {
    padding-right:1em;
}
.more--comments--text:hover {
    text-decoration:underline;
    cursor:pointer;
}
.comment--container {
    margin-top:5px;
}

.week--comments--container {
    background-color:black;
    width:100%;
    margin-left:auto;
    margin-right:auto;
}
@media only screen and (min-width:1025px) {
    .week--comments--container {
        width:40%;
    }
}

.latestactions--topics--container {
    width:45%;
    float:left;
}

.latestactions--articles--container {
    width:45%;
    float:right;
}

/*Article list settings for front page*/



.lists--container {  
    
    
}

@media only screen and (max-width:1024px) {
    .lists--container {
        
    }
    .right--side--container {
        margin:0 auto;
        width:100%;
        float:none;
    }
    .right--side--container footer {
        display:none;
    }
}

.menu--buttons {
    font-size:1.2em;
    color:black;
    text-align:center;
    display:flex;
}

.mobile--only {
    width: 33%;
    text-align: center;
    display:inline-block;
    padding-top:.5em;
}


.mobile--only > a {
    display:inline-block;
    color:black;
    
    padding-top:5px;
}

@media only screen and (max-width:1024px) {
    .mobile--only > a {
        
    }

    .menu--buttons {
        display: flex;
        font-size: 1em;
    }
}

.article--list--container {
    background-color:white;
    /*-webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.40);
    -moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.40);
    box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.40);*/
    border:1px solid #80808033;
}
@media only screen and (min-width:1025px) {
    .article--list--container {
        margin: 0 10px 10px 10px;
    }
  
}
.article--list--container h2 {  
    color: white;
    font-size: 14px;
    padding: 1em;
    text-align: center;
    font-weight: 600;
    background-color: #257571;
}
.article-headline.list--container--article {
    margin:0;
}

.list--headline {
    font-size:1em;
}

.list--article--headline {
    margin:0;
    color:black;
}

.article-headline.list--article--headline {
    margin:0;
}

.article-headline.list--article--headline h3 {
   font-size:1.1em;
    margin:0;
    color:black;
}
.article-headline.list--article--headline a {
    font-size:12px;

}

.article-main-container.list--article--container {
    width:100%;
    box-shadow:none;
    margin:0;
    padding-top:2px;
    
}
.article-container.list--article--container {
    margin-left:0;
    border:none;
}
.article-container.list--article--container h5 {
    font-size: 10px;
    color:grey;
}

.article-source a {
    color:#6ebebe;
    margin-left:5px;
    padding-left:5px;
    border-left:3px solid #2c497b;
    font-size:.9em;
}

.article-source {    
    font-size: 1.1em;
    padding-bottom: .3em;
    width: fit-content;
    float: left;
    padding-right: .4em;
    font-weight:400;
    padding-top:2.5px;
}

.article-container.list--article.list--container--article {
    margin:0;
}

.article.list--article {
    border:none;
}
.article--list--topiclink {
    
    color: white;
    background-color: #732c7b;
    font-weight: 700;
    font-size: .9em;
    padding: 2px 8px 2px 5px;
    margin-top: 2px;
    
}

.articlelist--topiclink {
    padding-left:2em;
}

.articlelist--topiclink a,
.articlelist--topiclink i {
    color:white;
}

/*Settings for small-UI topics*/

/*div.hidden--topic div.topic-info {
    display:none;
}*/






/*div.semi--hidden--topic div.articles-remaining,
div.hidden--topic div.articles-remaining {
    display:none;
}*/

@media only screen and (max-width: 1024px) {
    .article-feed-innercontainer.headlines > .one-article:nth-child(2) {
        display:none;
    }
}


.wf--topicli .follow-btn-holder {
    display:none;
}

div.semi--hidden--topic .more--add--container {
    display:none;
}




.morearticles-text b {
    text-transform:uppercase;
}

.small--picture.article {
    display:flex;
}



div.small--picture > img {
    width:auto;
    height:100%;
}

div.small--picture div.pic-container {
    max-height: 110px;
    min-height:110px;
    width:35%;
    min-width:120px;
    background-size:cover;
}

div.small--picture div.article-source h5 {
    font-size: .9em;
}

div.small--picture div.morebutton {
    padding: 5px 0;
}
div.small--picture div.morearticles-text {
    font-size:.9em;
}

.feedback {
    margin:10px;
    margin-top:20px;
    text-align:center;
}
.feedback h3 {
    padding:15px;
    color:white;
    background-color:#3cb8b2;
    font-weight:400;
    font-size:16px;
    
}
.feedback--textarea {
    width:100%;
    min-height:12em;
    padding:1em;
    border:none;
}
.feedback--submit {
    width:100%;
    height:40px;
    color:white;
    background-color:#3cb8b2;
    border:none;
    text-transform:uppercase;
    margin-top:-2px;
    font-weight:600;
    font-size:1.1em;
}

.reply--container {
    display:none;
    background-color:#f6f6f6;
}

.add--reply--container {
    padding:1em 1em;
}

/*Best of the day starting from here*/

.article--bot--container {
    position:relative;
    margin-bottom:-30px;
    left:0;
    width:auto;
    height:30px;
    
}
.article--bot--background {
    height:auto;
    padding:.5em;
    text-align:center;
    background-color:#ffd700db;
    color:white;
    font-weight:700;
    text-transform:uppercase;
    display:inline-flex;
}
.article--bot--background p {
    padding-left:.3em;
}

.discussion--main--container {
    width:50%;
    margin: 0 auto;
}
@media only screen and (max-width:1024px) {
    .discussion--main--container {
        width:100%;
    }
}

.discussion--info--container h1,
.discussion--info--container h2 {
    text-align:center;
}
.discussion--info--container h2 {
    font-weight:400;
    font-size: 1.2em;
}

.discussion--info--container {
    text-align:center;
    padding-bottom:2em;
}

.discussion--comment--container {
    border-radius:10px;
    background-color:white;
    margin-top:1em;
}

.discussion--comment--container.reply {
    border-radius:0;
    border-top:1px solid #d7d7d7; 
}

.discussion--comment {
    padding:1em;
}

.discussion--comment p {
    padding-top:1em;
    line-height:1.4em;
}

.discussion--comment--replyfeed {
    margin-left:2em;
    border-left: 5px solid #3cb8b2;
}

.comment--replies {
    display:none;
    padding:2em;
}

.discussion--comment--replycontainer {
    display:inline-block;
    width:100%;
    padding: 1em 0 0 2em;
}


.show--comment--replyfeed {
    width:100%;
    background-color:#3cb8b2;
    text-align:center;
    padding: .5em 0;
    color:white;
    text-transform:uppercase;
    cursor:pointer;
}

.discussion--addcomment--postbutton {
    
    width: 100%;
    height: 30px;
    background-color: #3cb8b2;
    color: white;
    font-weight: 700;

}

.discussion--addcomment--textarea {
    
    width: 100%;
    min-height: 100px;

}

.fullname--input--container button {
    color:white;
    background-color:#3cb8b2;
    padding:.2em;
    height:30px;
}

.fullname--input--container input {
    height:30px;
}

.discussion--frontpage--button {
    margin: 0 auto;
    width:100%;
    display:inline-flex;
}
.discussion--frontpage--button span {
    color:#3cb8b2;
}
.discussion--frontpage--button a {
    color:#3cb8b2;
    font-size:1.6em;
    padding-left:.3em;
}

.frontpage--button--container {
    margin: 0 auto;
}

.parent--container {
    
}
.parent--button {
    width:100%;
    display:flex;
    margin-bottom:15px;
}
.parent--button p {
    padding:15px;
    background-color:white;
    font-size:1.2em;
    color: #3cb8b2;
    text-transform:uppercase;
    width:100%;
    text-align:center;
    transition: 1s ease ease-in-out;
}
.parent--button span {
    vertical-align:sub;
}

.parent--button p:hover {
   color:white;
   background-color:#3cb8b2;
   cursor:pointer;
}
.parent--hidden {
    display:none;
}

.more--add--container {
    width:100%;
    display:flex;
}
.more--container {
    width:30%;
}
.add--container {
    width:70%;
}

.add--container .add-container {
    border-radius:0px;
    border:none;
    padding-left:0;
    float:left;
    width:100%;
}

.add--container .add-container:hover {
    background-color: lightgrey;
    cursor:pointer;
}

.more--container .morebutton {
    color:lightslategrey;
}
.add--container .morebutton:hover {
    color:#3cb8b2;
    cursor:pointer;
}
.add--container .add-button {
    background-color:#3cb8b2;
    color:white;
    border-right:none;
    margin-left: -2px;
    display:none;
}

.morearticles-text span {
    padding-left:.2em;
    display:inline-block;
}

.add--container .add-input {
    border-left:.5px solid lightgray;
    border-bottom:.5px solid lightgray;
    float:none;
}
@media only screen and (min-width:1025px) {
    .add--container .add-input {
        min-width: 200px;
    }
}
@media only screen and (max-width:1024px) {
    .add--container {
        width: 60%;
    }
    .more--container {
        width:40%;
    }
}


.suggest--register--container {
    width:100%;
}
.suggest--register--headline {
    width:100%;
    padding:1em;
}

.suggest--register--text {
    width:100%;
    padding:2em;
}

suggest--register--buttons--container {
    width:100%;
}

suggest--register--button {
    text-align:center;
    padding:.5em;
    background-color: #3cb8b2;
}

.suggest--register--button a {
    color:white;
    font-weight:600;
    text-transform:uppercase;
}

.suggest--login {
    background-color:#3c87b8;
}


/* VARIABLES */
/*
COLORS

Main color:
#2bab9d
			#09ab99
			rgb(110, 190, 190)

Main color darkened:
#238c81

White:
#ffffff

Gray:
#888888

Black:
#111111

Background:
#f5f5f2
			#f4f4e7
			rgb(238, 238, 238)

Red (recent):
#ee4444

FONT SIZES
(other than headings)

	30px: large
	24px: emphasized
	16px: normal
	14px: tiny
*/

/* FONT FILES */

/*@font-face {
  font-family: 'Liberation Serif';
  src: url(fonts/liberation-serif/LiberationSerif-Regular.ttf);
}
@font-face {
  font-family: 'Liberation Serif';
  src: url(fonts/liberation-serif/LiberationSerif-Bold.ttf);
  font-weight: bold;
}
@font-face {
  font-family: 'Liberation Serif';
  src: url(fonts/liberation-serif/LiberationSerif-Italic.ttf);
	font-style: italic;
}
@font-face {
  font-family: 'Liberation Serif';
  src: url(fonts/liberation-serif/LiberationSerif-BoldItalic.ttf);
  font-weight: bold;
	font-style: italic;
}*/

@font-face {
  font-family: 'FreeSerif';
  src: url(/Content/fonts/freeserif/FreeSerif.ttf);
}
@font-face {
  font-family: 'FreeSerif';
  src: url(/Content/fonts/freeserif/FreeSerifBold.ttf);
  font-weight: bold;
}
@font-face {
  font-family: 'FreeSerif';
  src: url(/Content/fonts/freeserif/FreeSerifItalic.ttf);
	font-style: italic;
}
@font-face {
  font-family: 'FreeSerif';
  src: url(/Content/fonts/freeserif/FreeSerifBoldItalic.ttf);
  font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'Open Sans';
  src: url(/Content/fonts/open-sans/OpenSans-Regular.ttf);
}
@font-face {
	font-family: 'Open Sans';
  src: url(/Content/fonts/open-sans/OpenSans-Bold.ttf);
  font-weight: bold;
}
@font-face {
	font-family: 'Open Sans';
  src: url(/Content/fonts/open-sans/OpenSans-Italic.ttf);
	font-style: italic;
}
@font-face {
	font-family: 'Open Sans';
  src: url(/Content/fonts/open-sans/OpenSans-BoldItalic.ttf);
  font-weight: bold;
	font-style: italic;
}

/* LAYOUT ELEMENTS */

.mindmap-container {
	height: 100%;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	z-index: 1;
}
.mindmap-visualization {
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;
	top: 0px;
	width: 100%;
}
.mindmap-svg {
	height: 100%;
	position: absolute;
	width: 100%;
}
/* Eg. the home page or topic page */
.mindmap-other-content {
	position: relative;
}
.geometry-tests {
	visibility: hidden;
}


/* GENERAL ELEMENTS */

.button {
	background-color: #2bab9d;
	border: 0;
	color: white;
	cursor: pointer;
	display: inline-block;
	font-family: 'Open Sans', Helvetica, Arial, sans;
	font-weight: bold;
	height: 50px;
	padding: 10px;
	text-align: center;
	width: 100px;
	-webkit-transition: background-color 0.15s;
	transition: background-color 0.15s;
}
.button:hover {
	background-color: #238c81;
}
.button, .button:active, .button:focus {
	outline: none !important;
	text-decoration: none !important;
	border: none !important;
  -moz-outline-style: none !important;
}

.link-button {
	background: none;
	color: #888888;
	cursor: pointer;
	display: inline-block;
	font-size: 24px;
	font-weight: bold;
	height: 24px;
	line-height: 24px;
	margin: 0;
	padding: 8px;
}
.link-button:hover {
	color: #2bab9d;
}

.full-width-more-button {
	background-color: #dddddd;
	bottom: 0px;
	color: #111111;
	left: 0px;
	position: absolute;
	width: 100%;
}
.full-width-more-button:hover {
	background-color: #e0e0e0;
}



/* TYPOHRAPHY */

/* Reset */

.heading {
	/*color: #111111;*/
	color: #2bab9d;
	font-weight: bold;
}



/* SPECIFIC ELEMENTS */

/* Loaders */

.mindmap-loader, .mindmap-content-items-loader {
	display: none;
	text-align: center;

	position: absolute;
	left: 50%;
	margin-left: -50px; /*Half of width*/
	width: 100px;
}
.mindmap-loader {
	top: 30vh;
}
.mindmap-content-items-loader {
	top: 100px;
}

/* Controls */

.mindmap-controls {
	display: inline-block;
	left: 0;
	position: fixed;
	top: 60px;
	z-index: 2;
    display:none;
}
.mindmap-controls-back {
}


/* MINDMAP COMPONENTS */

/* Non-selected topics */
.mindmap-topic.is-not-selected {
	padding: 0;
	position: absolute;
	text-align: center;
	vertical-align: middle;
    background-color: white;
    border-radius: 50px;
    box-shadow:2px 2px 2px 2px rgba(0,0,0,.2);
}
.mindmap-topic.is-not-selected .topic-title {
	/*background-color: #ffffff;*/
	/*border: solid #f5f5f2 2px;*/
	color: #111111;
	cursor: pointer;
	display: inline;
  border-radius: 4px;
  font-family: 'Open Sans';
	font-weight: bold;
	left: 50%;
	letter-spacing: 0px;
	margin: 0;
  padding: 8px;
	position: absolute;
	overflow-wrap: break-word;
	text-align: center;
	top: 50%;
	transform: translate(-50%, -50%);
  -webkit-transition: color 0.15s, background-color 0.15s, border-color 0.15s;
	transition: color 0.15s, background-color 0.15s, border-color 0.15s;
  word-break: break-word;
  width: 90%;
}
.mindmap-topic.is-not-selected .topic-subheading {
	display: block;
	font-weight: normal;
}
.mindmap-topic.is-not-selected .topic-title:hover {
	background-color: #ffffff;
  color: #2bab9d;
  /*font-size: 16px;*/
  -webkit-transition: background-color 0.15s, color 0.15s, font-size 0.15s;
	transition: background-color 0.15s, color 0.15s, font-size 0.15s;
  z-index: 3;
}

.mindmap-topic.is-not-selected.weak {
    opacity: .7;
    font-size:14px;
    background-color:beige;
}

.mindmap-topic.is-not-selected.normal {
    opacity: .85;
    font-size:16px;
    background-color:#f1f1eb;
}

.mindmap-topic.is-not-selected.strong {
    font-size:18px;
    color:#3c87b8
}


/* Relation line */
.mindmap-relation {
	stroke: rgb(43, 171, 157);
	stroke-width: 2;
}



/* SELECTED TOPIC */
.mindmap-topic.is-selected {
	background-color: #ffffff;
	box-sizing: border-box;
	border: 0;
	display: block;
	overflow: hidden;
	position: absolute;
}
.mindmap-topic.is-selected .topic-subheading {
	display: block;
	font-weight: bold;
}
/* Top right buttons */
.topic-top-right-buttons {
	float: right;
}
.topic-top-right-buttons * {
	display: inline-block;
}
.topic-top-right-buttons *:not(:first-child) {
	margin-left: 10px;
}
.topic-follow-button {

}
.topic-follow-button.is-followed {
	background-color: #238c81;
}
.topic-follow-button.is-followed:hover {
	background-color: #2bab9d;
}
.topic-open-button {
}

/* Description */
.topic-description-begin {
	font-weight: bold;
}
.topic-description-source {
	color: #888888;
	font-size: 14px;
}
/* Topic stats */
.topic-stats {
}
.topic-stats.row {
}
.topic-stats-data {
	color: #2bab9d;
	font-size: 16px;
	font-weight: bold;
}
.topic-stats-legend {
	color: #888888;
	font-size: 16px;
}

/* Content items */
.content-item {
	color: #111111;
  cursor: pointer;
	text-decoration: none;
}
.content-item-emphasized {
}

.content-image-wrapper {
	align-items: center;
	display: flex;
	justify-content: center;
	overflow: hidden;
}
.content-image {
	width: 100%;
	display: block;
}
.content-title {
	font-weight: bold;
}
.content-item:hover .content-title {
	text-decoration: underline #2bab9d;
}

.content-meta {
	color: #888888;
}
.source-flag {
	width: 16px;
	height: 12px;
	margin-right: 5px;
}

.source-name {

}
.content-item:hover .source-name {
	font-weight: bold;
}
.content-published {
  display: inline-block;
  margin-left: 8px;
}
.published-recently {
	color: #ee4444;
}



/* RESPONSIVE PARTS BELOW */

/* LAYOUT */

.mindmap-container {
	min-width: 300px;
	width: 100%;
	/*background-color: red !important;*/
}
.mindmap-topic.is-selected {
	padding: 25px;
	padding-top: 25px;
	padding-bottom: 80px;
}
.topic-top-right-buttons {
	margin-right: -25px;
	margin-top: -25px;
}
.mindmap-topic.is-selected .topic-title {
	margin-bottom: 20px;
}

.mindmap-topic.is-not-selected.weak .topic-title {
    font-size:12px;
    font-weight:400;
}
.mindmap-topic.is-not-selected.normal .topic-title {
    font-size:14px;
}
.mindmap-topic.is-not-selected.strong .topic-title {
    font-size: 20px;
}

@media only screen and (max-width: 1024px) {
    .mindmap-topic.is-not-selected.weak .topic-title {
        font-size:9px;
        font-weight:400;
    }
    .mindmap-topic.is-not-selected.normal .topic-title {
        font-size:12px;
    }
    .mindmap-topic.is-not-selected.strong .topic-title {
        font-size: 15px;
    }
}

/* Column layout */
.topic-columns {
	display: flex;
}
.topic-column {
	/*border: solid black 1px;*/
}
.topic-column-1 {
	display: none;
}
.topic-column-234 {
	position: relative;
	width: 100%;
}
.topic-description {
}
.content-item {
	display: none;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-top: 0px;
	width: 100%;
}
.content-item-emphasized {
	align-items: center;
	display: flex;
	width: 100%;
}
.content-image-wrapper {
	margin-right: 4%;
	width: 48%;
}
.content-text {
	width: 48%;
}
.content-title, .content-meta {
}

/* Typography responsive parts */
.heading-1 {
	font-size: 24px;
	letter-spacing: 0px;
}
.mindmap-topic.is-not-selected .topic-title {
	font-size: 12px;
}
.mindmap-topic.is-not-selected .topic-subheading {
	font-size: 12px;
	margin-top: 2px;
}
.mindmap-topic.is-selected .topic-title {

}
.mindmap-topic.is-selected .topic-subheading {
	font-size: 18px;
}
.content-image-wrapper {
	min-height: 150px;
	margin-bottom: 0px;
}
.content-title {
	font-size: 16px;
}
.content-item-emphasized .content-title {
	font-size: 16px;
}
.content-meta {
	font-size: 14px;
	margin-top: 5px;
}
.content-item-emphasized .content-meta {
	font-size: 14px;
}
/*.content-topics {
  color: #2bab9d;
  font-weight: bold;
  font-size: 14px;
}*/
/*.content-topic {

}
.content-topic:before {
  content: '>';
}*/




@media screen and (min-width: 620px) {
	.mindmap-container {
		width: 600px;
		/*background-color: brown !important;*/
	}
	.mindmap-topic.is-selected {
		padding: 25px;
		padding-top: 25px;
		padding-bottom: 80px;
	}
	.topic-top-right-buttons {
		margin-right: -25px;
		margin-top: -25px;
	}
	.heading-1 {
		font-size: 32px;
		letter-spacing: 0px;
	}
	.mindmap-topic.is-not-selected .topic-title {
	}
	.mindmap-topic.is-selected .topic-title {
        margin-top: 0px;
		margin-bottom: 20px;
	}
	.topic-columns {
	}
	.topic-column-1 {
		display: block;
		margin-right: 0px;
		width: 285px;
	}
	.topic-description {
		margin-bottom: 25px;
	}
	.topic-description-begin {
		font-size: 16px;
		margin-bottom: 5px;
	}
	.topic-description-rest {
		display: none;
	}
	.topic-column-234 {
		width: 315px;
	}
	.content-item {
		float: left;
		margin-bottom: 20px;
		margin-left: 30px;
		width: 285px;
	}
	.content-item-emphasized {
		align-items: stretch;
		display: block;
		margin-top: 0px;
		width: 285px;
	}
	.content-image-wrapper {
		/* 16:9 */
		float: none;
		height: 160px;
		margin-bottom: 20px;
		margin-right: 0;
		width: 100%;
	}
	.content-text {
		width: auto;
	}
	.content-title {
		font-size: 14px;
	}
	.content-item-emphasized .content-title {
		font-size: 16px;
	}
	.content-meta {
		font-size: 12px;
		margin-top: 5px;
	}
	.content-item-emphasized .content-meta {
		font-size: 14px;
	}
}
@media screen and (min-width: 900px) {

	/* TODO: Recognize touch screens with some other method than screen size*/
	.source-flag {
		filter: grayscale(100%);
    -webkit-transition: filter 0.4s;
  	transition: filter 0.4s;
	}
	.content-item:hover .source-flag {
		filter: none;
	}

	.mindmap-container {
		width: 800px;
		/*background-color: green !important;*/
	}
	.mindmap-topic.is-selected {
		padding: 40px;
		padding-top: 25px;
		padding-bottom: 80px;
	}
	.topic-top-right-buttons {
		margin-right: -40px;
		margin-top: -25px;
	}
	.heading-1 {
		font-size: 40px;
		letter-spacing: 1px;
	}
	.mindmap-topic.is-not-selected .topic-title {
	}
	.mindmap-topic.is-selected .topic-title {
  }
	.topic-column-1 {
		margin-right: 0px;
		width: 240px;
	}
	.topic-description-begin {
		font-size: 20px;
		margin-bottom: 10px;
	}
	.topic-description-rest {
		display: block;
		font-size: 16px;
		margin-bottom: 10px;
	}
	.topic-column-234 {
		width: 480px;
	}
	.content-item {
		margin-bottom: 20px;
		margin-left: 30px;
		width: 200px;
	}
	.content-item:nth-child(1), .content-item:nth-child(2), .content-item:nth-child(3), .content-item:nth-child(4) {
		display: block;
	}
	.content-item-emphasized {
		width: 220px;
	}
	.content-image-wrapper {
		/* 16:9 */
		height: 123.75px;
	}
	.content-title {
		font-size: 16px;
	}
	.content-item-emphasized .content-title {
		font-size: 20px;
	}
	.content-meta {
		font-size: 12px;
		margin-top: 5px;
	}
	.content-item-emphasized .content-meta {
		font-size: 14px;
	}
}
@media screen and (min-width: 1100px) {

	.mindmap-container {
		width: 1000px;
		/*background-color: green !important;*/
	}
	.mindmap-topic.is-selected {
		padding: 50px;
		padding-top: 25px;
		padding-bottom: 80px;
	}
	.topic-top-right-buttons {
		margin-right: -50px;
		margin-top: -25px;
	}
	.mindmap-topic.is-selected .topic-title {
    margin-top: 20px;
	}
	.mindmap-topic.is-not-selected .topic-title {
		font-size: 14px;
	}
	.topic-column-1 {
		margin-right: 0px;
		width: 250px;
	}
	.topic-description-begin {
	}
	.topic-column-234 {
		width: 650px;
	}
	.content-item {
		margin-left: 40px;
		width: 270px;
	}
	.content-item-emphasized {
		width: 300px;
	}
	.content-image-wrapper {
		/* 16:9 */
		height: 168.75px;
	}
	.content-item-emphasized .content-title {
		font-size: 20px;
	}
	.content-meta {
		font-size: 12px;
		margin-top: 5px;
	}
	.content-item-emphasized .content-meta {
		font-size: 14px;
	}
}
@media screen and (min-width: 1400px) {
	.mindmap-container {
		width: 1300px;
		/*background-color: blue !important;*/
	}
	.mindmap-topic.is-selected {
		padding: 80px;
		padding-top: 25px;
		padding-bottom: 80px;
	}
	.topic-top-right-buttons {
		margin-right: -80px;
	}
	.mindmap-topic.is-selected .topic-title {
		margin-bottom: 30px;
	}
	.topic-column-1 {
		margin-right: 20px;
		width: 300px;
	}
	.topic-description-begin {
		font-size: 24px;
		margin-bottom: 10px;
	}
	.topic-column-234 {
		width: 820px;
	}
	.content-item {
		margin-left: 60px;
		width: 300px;
	}
	.content-item:nth-child(5) {
		display: block;
	}
	.content-item-emphasized {
		width: 400px;
	}
	.content-image-wrapper {
		/* 16:9 */
		height: 225px;
	}
	.content-item-emphasized .content-title {
		font-size: 24px;
	}
	.content-meta {
		font-size: 14px;
		margin-top: 8px;
	}
	.content-item-emphasized .content-meta {
		font-size: 16px;
	}
}
@media screen and (min-width: 1800px) {
	.mindmap-container {
		/*background-color: gray !important;*/
		width: 1700px;
	}
	.mindmap-topic.is-selected {
		padding: 80px;
		padding-top: 25px;
		padding-bottom: 80px;
	}
	.topic-top-right-buttons {
		margin-right: -80px;
	}
	.topic-column-1 {
		margin-right: 20px;
		width: 400px;
	}
	.topic-description-begin {
	}
	.topic-column-234 {
		width: 1140px;
	}
	.content-item {
		display: block;
		margin-left: 80px;
		width: 450px;
	}
	.content-item-emphasized {
		width: 480px;
	}
	.content-image-wrapper {
		/* 16:9 */
		height: 270px;
	}
	.mindmap-topic.is-not-selected .topic-title {
		/*font-size: 18px;*/
	}
	.mindmap-topic.is-not-selected .topic-subheading {
		font-size: 12px;
	}
	.heading-1 {
		font-size: 48px;
		letter-spacing: 1px;
	}
	.mindmap-topic.is-selected .topic-subheading {
		font-size: 30px;
	}
	.topic-description {
		margin-bottom: 25px;
	}
	.topic-description-rest {
		font-size: 16px;
		margin-bottom: 10px;
	}
	.content-image-wrapper {
		margin-bottom: 20px;
	}
	.content-title {
		font-size: 18px;
	}
	.content-item-emphasized .content-title {
		font-size: 24px;
	}
	.content-meta {
		font-size: 14px;
		margin-top: 8px;
	}
	.content-item-emphasized .content-meta {
		font-size: 16px;
	}
}
/* -------------------------------- 

Primary style

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

html {
  font-size: 62.5%;
  overflow-x:hidden;
}

a {
  text-decoration: none;
}

/* -------------------------------- 

Main Components 

-------------------------------- */
header {
  position: fixed;
  z-index: 9999;
  height: 65px;
  width: 100%;
  top: 0;
  left: 0;
  background-color:white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.5s, top 0.5s ease-in-out;
  -moz-transition: -moz-transform 0.5s, top 0.5s ease-in-out;
  transition: transform 0.5s, top 0.5s ease-in-out;
}

@media only screen and (max-width:1024px) {
    header {
        height:50px;
    }
}

header.nav-is-visible {
  -webkit-transform: translateX(-230px);
  -moz-transform: translateX(-230px);
  -ms-transform: translateX(-230px);
  -o-transform: translateX(-230px);
  transform: translateX(-230px);
}
header::before {
  /* never visible - this is used in jQuery to check the current MQ */
  display: none;
  content: 'mobile';
}
@media only screen and (min-width: 1024px) {
  header {
    height: 65px;
  }
  header.nav-is-visible {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  header::before {
    content: 'desktop';
  }
}

.cd-logo {
  display: inline-block;
  height: 100%;
  margin-left: 15px;
  /* remove jump on iOS devices - when we fire the navigation */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cd-logo img {
  display: block;
  max-width: 100%;
  margin-top: 0px;
}
@media only screen and (min-width: 1024px) {
  .cd-logo {
    position: absolute;
    z-index: 2;
    margin-left: 5%;
  }
  .cd-logo img {
    margin-top: 0px;
  }
}

.cd-nav-trigger {
  display: table-cell;
  position: absolute;
  right: 4px;
  top: 4px;
  height: 90%;
  width: 10%;
  /* hide text */
  overflow: hidden;
  white-space: nowrap;
  color: transparent;
}
.cd-nav-trigger span {
  /* hamburger icon created in CSS */
  position: absolute;
  height: 2px;
  width: 20px;
  top: 50%;
  color:white;
  margin-top: -1px;
  left: 50%;
  margin-left: -10px;
  -webkit-transition: background-color 0.3s 0.3s;
  -moz-transition: background-color 0.3s 0.3s;
  transition: background-color 0.3s 0.3s;
  background-color: white;
}
.cd-nav-trigger span::before, .cd-nav-trigger span::after {
  /* upper and lower lines of the menu icon */
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s 0.3s;
  -moz-transition: -moz-transform 0.3s 0.3s;
  transition: transform 0.3s 0.3s;
}
.cd-nav-trigger span::before {
  -webkit-transform: translateY(-6px);
  -moz-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  -o-transform: translateY(-6px);
  transform: translateY(-6px);
}
.cd-nav-trigger span::after {
  -webkit-transform: translateY(6px);
  -moz-transform: translateY(6px);
  -ms-transform: translateY(6px);
  -o-transform: translateY(6px);
  transform: translateY(6px);
}
.nav-is-visible .cd-nav-trigger span {
  background-color: #ffffff;
}
.nav-is-visible .cd-nav-trigger span::before {
  -webkit-transform: translateY(0) rotate(-45deg);
  -moz-transform: translateY(0) rotate(-45deg);
  -ms-transform: translateY(0) rotate(-45deg);
  -o-transform: translateY(0) rotate(-45deg);
  transform: translateY(0) rotate(-45deg);
}
.nav-is-visible .cd-nav-trigger span::after {
  -webkit-transform: translateY(0) rotate(45deg);
  -moz-transform: translateY(0) rotate(45deg);
  -ms-transform: translateY(0) rotate(45deg);
  -o-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
}
@media only screen and (min-width: 1024px) {
  .cd-nav-trigger {
    display: none;
  }
}

.cd-main-nav {
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  width: 230px;
  height: 100vh;
  margin-top: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  background: #1e262c;
  -webkit-transition: visibility 0s 0.3s;
  -moz-transition: visibility 0s 0.3s;
  transition: visibility 0s 0.3s;
  list-style: none;
}
.cd-main-nav a {
  display: block;
  font-size: 1.8rem;
  padding: .9em 2em .9em 1em;
  border-bottom: 1px solid #33414a;
  color: white;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
}
.cd-main-nav li ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: translateX(230px);
  -moz-transform: translateX(230px);
  -ms-transform: translateX(230px);
  -o-transform: translateX(230px);
  transform: translateX(230px);
  list-style: none;
}
.cd-main-nav.nav-is-visible {
  visibility: visible;
  -webkit-transition: visibility 0s 0s;
  -moz-transition: visibility 0s 0s;
  transition: visibility 0s 0s;
  padding-left: 10px;
}
.cd-main-nav.moves-out > li > a {
  /* push the navigation items to the left - and lower down opacity - when secondary nav slides in */
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  opacity: 0;
}
.cd-main-nav.moves-out > li > ul {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.cd-main-nav .cd-subnav-trigger, .cd-main-nav .go-back a {
  position: relative;
}
.cd-main-nav .cd-subnav-trigger::before, .cd-main-nav .cd-subnav-trigger::after, .cd-main-nav .go-back a::before, .cd-main-nav .go-back a::after {
  /* arrow icon in CSS */
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -1px;
  display: inline-block;
  height: 2px;
  width: 10px;
  background-color: #ffffff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.cd-subnav-trigger li a {
    color: white;
}
.cd-main-nav .cd-subnav-trigger::before, .cd-main-nav .go-back a::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.cd-main-nav .cd-subnav-trigger::after, .cd-main-nav .go-back a::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.cd-main-nav .cd-subnav-trigger::before, .cd-main-nav .cd-subnav-trigger::after {
  /* arrow goes on the right side - children navigation */
  right: 20px;
  -webkit-transform-origin: 9px 50%;
  -moz-transform-origin: 9px 50%;
  -ms-transform-origin: 9px 50%;
  -o-transform-origin: 9px 50%;
  transform-origin: 9px 50%;
}
.cd-main-nav .go-back a {
  padding-left: 2em;
}
.cd-main-nav .go-back a::before, .cd-main-nav .go-back a::after {
  /* arrow goes on the left side - go back button */
  left: 20px;
  -webkit-transform-origin: 1px 50%;
  -moz-transform-origin: 1px 50%;
  -ms-transform-origin: 1px 50%;
  -o-transform-origin: 1px 50%;
  transform-origin: 1px 50%;
}
.cd-main-nav .placeholder {
  /* never visible or clickable- it is used to take up the same space as the .cd-subnav-trigger */
  display: none;
}
@media only screen and (min-width: 1024px) {
    .cd-main-nav-wrapper {
        width: auto;
        float: right;
        padding: 0 0 0 10px;
        font-size: 0.6em;
        display: table-cell;
        margin-left: 0;
    }
  .cd-main-nav {
    position: static;
    visibility: visible;
    width: 400px;
    height: 50px;
    line-height: 50px;
    /* padding left = logo size + logo left position*/
    padding: 0 0 0 0;
    background: transparent;
    float:right;

    /*text-align: left;
    white-space: nowrap;
    float: left;*/
  }
  .cd-main-nav li {
    display: inline-block;
    height: 100%;
    padding: 0;

  }
  .cd-main-nav li a {
    display: inline-block;
    padding: .8em;
    line-height: 1;
    font-size: 1.5rem;
    border-bottom: none;
    /* Prevent .cd-subnav-trigger flicker is Safari */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s;
  }
  .cd-main-nav li a:not(.cd-subnav-trigger):hover {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity: .6;
  }
  .cd-main-nav .go-back {
    display: none;
  }
  .cd-main-nav .cd-subnav-trigger {
    z-index: 1;
   /* border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 5em;*/
    -webkit-transition: border 0.3s;
    -moz-transition: border 0.3s;
    transition: border 0.3s;
  }
  .cd-main-nav .cd-subnav-trigger:hover {
    border-color: rgba(255, 255, 255, 0.4);
  }
  .cd-main-nav .cd-subnav-trigger::before, .cd-main-nav .cd-subnav-trigger::after {
    top: 22px;
    right: 17px;
    background-color: #6ebebe;
    /* change transform-origin to rotate the arrow */
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transition: -webkit-transform 0.3s, width 0.3s, right 0.3s;
    -moz-transition: -moz-transform 0.3s, width 0.3s, right 0.3s;
    transition: transform 0.3s, width 0.3s, right 0.3s;
  }
  .cd-main-nav .cd-subnav-trigger::before {
    right: 23px;
  }
  .cd-main-nav .cd-subnav-trigger, .cd-main-nav .placeholder {
    padding-right: 2.4em;
    padding-left: 1.1em;
  }
  .cd-main-nav li ul {
    height: 50px;
    border-bottom: 1px solid #6ebebe;
    background-color: #ffffff;
    /* padding left = logo size + logo left position*/
    padding: 0;
    -webkit-transform: translateY(-80px);
    -moz-transform: translateY(-80px);
    -ms-transform: translateY(-80px);
    -o-transform: translateY(-80px);
    transform: translateY(-80px);
    -webkit-transition: -webkit-transform 0.3s 0.2s;
    -moz-transition: -moz-transform 0.3s 0.2s;
    transition: transform 0.3s 0.2s;
  }
  .cd-main-nav li ul li {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    transform: translateY(-20px);
    -webkit-transition: -webkit-transform 0.3s 0s, opacity 0.3s 0s;
    -moz-transition: -moz-transform 0.3s 0s, opacity 0.3s 0s;
    transition: transform 0.3s 0s, opacity 0.3s 0s;
  }
  .cd-main-nav .placeholder {
    /* never visible or clickable- it is used to take up the same space as the .cd-subnav-trigger */
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-event: none;
  }
  .cd-main-nav.moves-out > li > a {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  .cd-main-nav.moves-out > li > ul {
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  .cd-main-nav.moves-out > li ul li {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform 0.3s 0.2s, opacity 0.3s 0.2s;
    -moz-transition: -moz-transform 0.3s 0.2s, opacity 0.3s 0.2s;
    transition: transform 0.3s 0.2s, opacity 0.3s 0.2s;
  }
  .cd-main-nav.moves-out .cd-subnav-trigger::before, .cd-main-nav.moves-out .cd-subnav-trigger::after {
    width: 14px;
    right: 17px;
  }
  .cd-main-nav.moves-out .cd-subnav-trigger::before {
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    transform: rotate(225deg);
  }
  .cd-main-nav.moves-out .cd-subnav-trigger::after {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }
}

.cd-main-content::before {
  /* never visible - this is used in jQuery to check the current MQ */
  display: none;
  content: 'mobile';
}
@media only screen and (min-width: 1024px) {
  .cd-main-content::before {
    content: 'desktop';
  }
}

.cd-main-content {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-color: black;
    padding-top: 50px;
}

@media only screen and (min-width:1024px) {
    .cd-main-content {
        
    }
}

.cd-main-content.nav-is-visible {
  -webkit-transform: translateX(-230px);
  -moz-transform: translateX(-230px);
  -ms-transform: translateX(-230px);
  -o-transform: translateX(-230px);
  transform: translateX(-230px);
}
@media only screen and (min-width: 1024px) {

  .cd-main-content.nav-is-visible {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}

.no-js .cd-nav-trigger, .no-js .cd-subnav-trigger {
  display: none;
}

.no-js header {
  position: relative;
  height: auto;
}

.no-js .cd-logo img {
  margin-bottom: 14px;
}

.no-js .cd-main-nav {
  position: static;
  width: 100%;
  height: auto;
  visibility: visible;
  overflow: visible;
}
.no-js .cd-main-nav li {
  display: inline-block;
}
.no-js .cd-main-nav li:last-child {
  display: block;
}
.no-js .cd-main-nav .go-back {
  display: none;
}
.no-js .cd-main-nav li ul {
  position: static;
  width: 100%;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
@media only screen and (min-width: 1024px) {
  .no-js .cd-main-nav {
    height: 50px;
  }
  .no-js .cd-main-nav li ul {
    position: absolute;
    top: 50px;
  }
  .no-js .cd-main-nav li ul li {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
  .no-js .cd-main-nav li ul li:last-child {
    display: none;
  }
}

.no-js .cd-main-content {
  padding-top: 0;
}
@media only screen and (min-width: 1024px) {
  .no-js .cd-main-content {
    padding-top: 50px;
  }

  /*Omia muutoksia*/
 

}

/* -------------------------------- 

Primary style

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

/* -------------------------------- 

Main Components 

-------------------------------- */
.cd-horizontal-timeline {
  opacity: 0;
  margin: 2em auto;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.cd-horizontal-timeline::before {
  /* never visible - this is used in jQuery to check the current MQ */
  content: 'mobile';
  display: none;
}
.cd-horizontal-timeline.loaded {
  /* show the timeline after events position has been set (using JavaScript) */
  opacity: 1;
}
.cd-horizontal-timeline .timeline {
  position: relative;
  height: 65px;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (max-width: 960px) {
    .cd-horizontal-timeline {
        margin: 0 auto;
    }
    .cd-horizontal-timeline .timeline {
    width: 100%;
}
    .cd-horizontal-timeline .events a {
        font-size: 1.3rem;
    }
}

.cd-horizontal-timeline .events-wrapper {
  position: relative;
  height: 100%;
  margin: 0 40px;
  overflow: hidden;
}
.cd-horizontal-timeline .events-wrapper::after, .cd-horizontal-timeline .events-wrapper::before {
  /* these are used to create a shadow effect at the sides of the timeline */
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  height: 100%;
  width: 20px;
}
.cd-horizontal-timeline .events-wrapper::before {
  left: 0;
}
.cd-horizontal-timeline .events-wrapper::after {
  right: 0;
}
.cd-horizontal-timeline .events {
  /* this is the grey line/timeline */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 49px;
  height: 2px;
  /* width will be set using JavaScript */
  background: #dfdfdf;
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  transition: transform 0.4s;
}
.cd-horizontal-timeline .filling-line {
  /* this is used to create the green line filling the timeline */
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #732c7b;
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
.cd-horizontal-timeline .events a {
  position: absolute;
  bottom: 0;
  z-index: 2;
  text-align: center;
  font-size: 1.2rem;
  padding-bottom: 15px;
  color: black;
  /* fix bug on Safari - text flickering while timeline translates */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.cd-horizontal-timeline .events a::after {
  /* this is used to create the event spot */
  content: '';
  position: absolute;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -5px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  border: 2px solid #3cb8b2;
  background-color: #3cb8b2;
  -webkit-transition: background-color 0.3s, border-color 0.3s;
  -moz-transition: background-color 0.3s, border-color 0.3s;
  transition: background-color 0.3s, border-color 0.3s;
}
.no-touch .cd-horizontal-timeline .events a:hover::after {
  background-color: #732c7b;
  border-color: #732c7b;
}
.cd-horizontal-timeline .events a.selected {
  pointer-events: none;
  font-size:1.7rem;
  font-weight:700;
}
.cd-horizontal-timeline .events a.selected::after {
  background-color:#732c7b;
  border-color: #732c7b;
}
.cd-horizontal-timeline .events a.older-event::after {
  border-color: #732c7b;
}
@media only screen and (min-width: 1100px) {
  .cd-horizontal-timeline {
    margin: 2em auto;
  }
  .cd-horizontal-timeline::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'desktop';
  }
}

.cd-timeline-navigation a {
  /* these are the left/right arrows to navigate the timeline */
  position: absolute;
  z-index: 1;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 34px;
  width: 34px;
  border-radius: 50%;
  /* replace text with an icon */
  overflow: hidden;
  color: transparent;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: border-color 0.3s;
  -moz-transition: border-color 0.3s;
  transition: border-color 0.3s;
}
.cd-timeline-navigation a::after {
  /* arrow icon */
  content: '';
  position: absolute;
  height: 16px;
  width: 16px;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url(../Content/img/symbols/cd-arrow.svg) no-repeat 0 0;
}
.cd-timeline-navigation a.prev {
  left: 0;
  -webkit-transform: translateY(-50%) rotate(180deg);
  -moz-transform: translateY(-50%) rotate(180deg);
  -ms-transform: translateY(-50%) rotate(180deg);
  -o-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}
.cd-timeline-navigation a.next {
  right: 0;
}
.no-touch .cd-timeline-navigation a:hover {
  border-color: #7b9d6f;
}
.cd-timeline-navigation a.inactive {
  cursor: not-allowed;
}
.cd-timeline-navigation a.inactive::after {
  background-position: 0 -16px;
}
.no-touch .cd-timeline-navigation a.inactive:hover {
  border-color: #dfdfdf;
}

.cd-horizontal-timeline .events-content {
  position: relative;
  width: 100%;
  margin-left:auto;
  margin-right:auto;
  overflow: hidden;
  -webkit-transition: height 0.4s;
  -moz-transition: height 0.4s;
  transition: height 0.4s;
}
@media only screen and (max-width: 800px) {
    .cd-horizontal-timeline .events-content {
        width: 100%;
    }
}
.cd-horizontal-timeline .events-content li {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 0;
  top: 0;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
  padding: 0;
  opacity: 0;
  -webkit-animation-duration: 0.4s;
  -moz-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
.cd-horizontal-timeline .events-content li.selected {
  /* visible event content */
  position: relative;
  z-index: 2;
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.cd-horizontal-timeline .events-content li.enter-right, .cd-horizontal-timeline .events-content li.leave-right {
  -webkit-animation-name: cd-enter-right;
  -moz-animation-name: cd-enter-right;
  animation-name: cd-enter-right;
}
.cd-horizontal-timeline .events-content li.enter-left, .cd-horizontal-timeline .events-content li.leave-left {
  -webkit-animation-name: cd-enter-left;
  -moz-animation-name: cd-enter-left;
  animation-name: cd-enter-left;
}
.cd-horizontal-timeline .events-content li.leave-right, .cd-horizontal-timeline .events-content li.leave-left {
  -webkit-animation-direction: reverse;
  -moz-animation-direction: reverse;
  animation-direction: reverse;
}
.cd-horizontal-timeline .events-content li > * {
  margin: 0 auto;
}
.cd-horizontal-timeline .events-content h2 {
  font-weight: bold;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.2;
}
.cd-horizontal-timeline .events-content em {
  display: block;
  font-style: italic;
  margin: 10px auto;
}
.cd-horizontal-timeline .events-content em::before {
  content: '- ';
}
.cd-horizontal-timeline .events-content p {
  font-size: 1.4rem;
  color: #959595;
}
.cd-horizontal-timeline .events-content em, .cd-horizontal-timeline .events-content p {
  line-height: 1.6;
}
@media only screen and (min-width: 768px) {
  .cd-horizontal-timeline .events-content h2 {
    font-size: 7rem;
  }
  .cd-horizontal-timeline .events-content em {
    font-size: 2rem;
  }
  .cd-horizontal-timeline p {
    font-size: 1.8rem;
  }
}

@-webkit-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
@-moz-keyframes cd-enter-right {
  0% {
    opacity: 0;
    -moz-transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
  }
}
@keyframes cd-enter-right {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@-webkit-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
@-moz-keyframes cd-enter-left {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0%);
  }
}
@keyframes cd-enter-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
  }
}