/* 
Telegram Neue
by TG Studio 
*/

/* Basics */

@font-face {
    font-family: "Fjalla One CRO";
    /*src: url("fonts/fjalla_croat/FjallaOne-Regular.1.woff2") format("woff2"), url("fonts/fjalla_croat/FjallaOne-Regular.1.woff") format("woff"), url("fonts/fjalla_croat/FjallaOne-Regular.1.svg") format("svg"), url("fonts/fjalla_croat/FjallaOne-Regular.1.eot") format("embedded-opentype");*/
    src: url("fonts/fjalla_croat/FjallaOne-Regular.1.woff") format("woff");
    font-weight: bold;
    font-style: normal;
  }
html {
    margin: 0;
    padding: 0;
    border: 0;
    overflow-x: hidden;
    font-family: 'Lora', serif;
    color: #111111;
}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline; list-style: none; -webkit-font-smoothing:antialiased; }
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    font-weight: 400;
}
a {
    text-decoration: none;
    color: inherit;
}
b, strong, .bold { 
    font-weight: 700; 
}
i, em, .italic { 
    font-style: italic; 
}
.underline {
    text-decoration: underline;
}
:focus { 
    outline: none; 
}
img {
    display: block;
    max-width: 100%;
    height: auto;
}
.animate {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

/* Layout */

.container {
    position: relative;
    width: 1230px;
    height: auto;
    margin: 0 auto;
    padding: 0px 15px;
}
.flex {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}
.third {
    width: 33.33%;
}
.two-thirds {
    width: 66.67%;
}
.fourth {
    width: 24.99%;
}
.three-fourths {
    width: 74.99%;
}
.half {
    width: 49.99%;
}
.full {
    width: 100%;
}
.sixty {
    width: 59.99%;
}
.forty {
    width: 39.99%;
}
.twenty {
    width: 19.99%;
}
.eighty {
    width: 79.99%;
}
.center-text {
    text-align: center;
}
.right-text {
    text-align: right;
}
.relative {
    position: relative;
}
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.shoo-top {
    margin-top: 25px;
}
.shoo-bottom {
    margin-bottom: 25px;
}
.shoo-left {
    margin-left: 25px;
}
.shoo-right {
    margin-right: 25px;
}
.gray-divider {
    border-top: 1px solid #dddddd;
}
.vertical-gray-divider {
    border-right: 1px solid #dddddd;
}
.horizontal-gray-divider {
    border-bottom: 1px solid #dddddd;
}
.horizontal-black-divider {
    border-bottom: 1px solid #464646;
}
.pad-me {
    padding: 15px;
}
.pad-right {
    padding-right: 15px;
}
.pad-left {
    padding-left: 15px;
}
.pad-top {
    padding-top: 15px;
}
.pad-bot {
    padding-bottom: 15px;
}
.stretch {
    align-items: stretch;
}
.clickable {
    cursor: pointer;
}

/* Colors */

.gray-text {
    color: #847e7e;
}
.red-text {
    color: #ae3737;
}

/* Top-hat */

.top-hat {
    margin-top: 150px;
    padding-bottom: 27px;
}
.mega-divider {
    height: 12px;
    border-top: 1px solid #464646;
    border-bottom: 5px solid #111111;
}
.top-hat nav {
    padding-top: 20px;
    padding-bottom: 40px;
    font-size: 16px;
    letter-spacing: -0.08px;
    font-style: italic;
}
.top-hat nav div {
    margin: 0px 15px;
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    cursor: pointer;
}
.top-hat nav div:first-child {
    margin-left: 0px;
}
.top-hat nav div:last-child {
    margin-right: 0px;
}
/*.top-hat nav div:hover {
    color: white;
    cursor: pointer;
}
.top-hat nav div::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -0.25em;
    right: -0.25em;
    background-color: #ae3737;
    transform-origin: center right;
    transform: scaleX(0);
    transition: transform 0.2s ease-in-out;
}
.top-hat nav div:hover::before {
    transform: scaleX(1);
    transform-origin: center left;
}*/
.top-hat .top-logo {
    width: 100%;
    max-width: 510px;
}
.top-hat .top-logo svg {
    width: 100%;
    height: auto;
}

/* Content */

/* 
b(n) su redovi - boxes, breaks, etc.
g(n) su klasični članci
c(n) su kolumne
*/


.b1 .eighty, .b1 .twenty {
    padding: 45px 0px;
}
.b1 .eighty > div {
    padding-right: 15px;
}
.b1 .twenty > .full:first-child {
    margin-bottom: 20px;
}
.b1 .eighty .sixty .article-image {
    width: 100%;
    height: 460px;
    object-fit: cover;
}
.g1 .article-tag{
    font-family: "Fjalla One CRO", sans-serif;
    color: #9c3636;
    font-size: 25px;
    letter-spacing:-1.25px;
    text-transform: uppercase;
    padding: 10px 0px;
}
.g1 .article-title {
    padding: 10px 0px;
    font-family: "Fjalla One CRO", sans-serif;
    font-size: 42px;
    line-height: 50px;
    letter-spacing: -0.21px;
}
.g1 .article-subtitle {
    font-family: 'Lora', serif;
    font-size: 17px;
    line-height: 23px;
    color: #444444;
    padding: 10px 0px;
}
.article-info {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 10px;
    letter-spacing: -0.25px;
    color: #949292;
    text-transform: uppercase;
    padding: 5px 0px;
}
.article-info span {
    padding-right: 5px;
}
.article-info span:last-child {
    padding-right: 0px;
}
.article-image-credit {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 9px;
    color: #949292;
    letter-spacing: -0.225px;
    margin-top: 10px;
    text-align: right;
    text-transform: uppercase;
}
.column-tag {
    font-family: "Fjalla One CRO", sans-serif;
    font-size: 25px;
    letter-spacing: -1.25px;
    text-transform: uppercase;
    padding-bottom: 10px;
}
.c1 {
    padding: 20px 0px 10px 15px;
    border-bottom: 1px solid #dddddd;
}
.c1:last-child {
    border-bottom: none;
}
.col-author img {
    display: inline-block;
    width: 37px;
    position: relative;
}
.col-author span {
    color: #8e8e8e;
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.095px;
    padding-right: 7px;
    font-style: italic;
}
.c1 .article-title {
    font-size: 17px;
    font-family: 'Lora', serif;
    font-weight: 700;
    line-height: 21px;
    padding: 5px 0px;
}
.newsletter {
    font-style: italic;
    font-family: 'Lora', serif;
    font-size: 16px;
    letter-spacing: -0.08px;
    padding: 20px 0px;
}
.newsletter span {
    padding-right: 5px;
}