/**
--------------------------
----- Content table ------
--------------------------
1. General
2. Header
3. Navigation
4. Content
5. Aside
6. Footer
7. Additional
8. Grid System
 */

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

/**********************************/
/*--------- 1. General ------------*/
/**********************************/

* {
    box-sizing      : border-box;
    font-family     : 'Roboto Condensed', sans-serif;
}

body {
    color           : #242424; /* Svi elementi imaju tu boju fonta, da ne bude default crna */
    padding         : 0;
}

a {
    text-decoration : none;
}
a:link {
    color : #1E88E5;
}
a:visited {
    color : #1E88E5;
}
a:hover {
    color : #0D47A1;
}
a:active {
    color : #F50057;
}

li {
    margin-bottom   : 0.5rem;
    line-height     : 1.25;
    text-align      : left!important;
}

p {
    margin-bottom           : 0.5rem;
    line-height             : 1.25;
    -webkit-margin-before   : 0.5rem;
    -webkit-margin-after    : 0.5rem;
    margin-before           : 0.5rem;
    margin-after            : 0.5rem;
    -webkit-margin-start    : 0;
    -webkit-margin-end      : 0;
    text-align              : justify;
}


.gradijent-1 {
    flex-basis          : auto;
    flex-grow           : 1;
    flex-shrink         : 1;
    background          : rgb(255,255,255);
    background          : -moz-linear-gradient(left, rgba(255,255,255,1) 66%, rgba(238,238,238,1) 100%);
    background          : -webkit-linear-gradient(left, rgba(255,255,255,1) 66%,rgba(238,238,238,1) 100%);
    background          : linear-gradient(to right, rgba(255,255,255,1) 66%,rgba(238,238,238,1) 100%);
}

.gradijent-2 {
    flex-basis: auto;
    flex-grow           : 1;
    flex-shrink         : 1;
    background          : rgb(255,255,255);
    background          : -moz-linear-gradient(right, rgba(255,255,255,1) 66%, rgba(238,238,238,1) 100%);
    background          : -webkit-linear-gradient(right, rgba(255,255,255,1) 66%,rgba(238,238,238,1) 100%);
    background          : linear-gradient(to left, rgba(255,255,255,1) 66%,rgba(238,238,238,1) 100%);
}

.websiteContainer {
    display             : flex;
}

.contentContainer {
    max-width           : 80rem;
    min-height          : 100vh;
    flex-basis          : 80%;
    flex-grow           : 1;
    flex-shrink         : 1;
    border              : 0.5rem solid transparent;
    display             : flex;
    flex-direction      : column;
}

@media all and (max-width: 1282px) {
    .gradijenti {
        display         : none;
    }

    .websiteContainer {
        display         : flex;
        flex-direction  : column;
    }

    .contentContainer {
        width           : 100vw;
        padding         : 0;
    }
}

.success {
    background-color    : #b1dfbb;
    padding             : 0.3125rem;
    border              : 0.0625rem solid darkgreen;
}

.error {
    background-color    : #f5c6cb;
    padding             : 0.3125rem;
    border              : 0.0625rem solid darkred;
}

.label-for-field {
    color               : #888888;
    display             : block;
    margin-bottom       : 0.5rem;
}

.input-field {
    display             : block;
    width               : 80%;
    padding             : 0.3125rem;
    margin-bottom       : 0.75rem;
}
.input-notice {
    font-size           : 0.9rem;
    margin              : 0 0 0.3125rem 0;
}

.button-press {
    padding             : 1rem 0.5rem ;
    background-color    : #0D47A1;
    color               : white;
    outline             : none;
    border              : none;
    cursor              : pointer;
    margin              : 0.5rem 0 0.75rem 0;
}

.plain-textarea {
    width               : 80%;
    height              : 4rem;
    resize              : none;
    padding             : 0.3125rem;
    border              : 1px solid #888888;
    background-color    : #FAFAFA;
    color               : #424242;
    font-size           : 0.9rem;
}

.required {
    color               : #C62828;
    font-weight         : bold;
}

/**********************************/
/*--------- 2. Header ------------*/
/**********************************/
.topNavigation {
    background-color    : #035BBF;
    padding             : 0.3125rem;
    color               : white;
    text-align          : right;
}

.topNavigation a {
    color               : #bfbfbf;
}

.mainHeader {
    background          : url("../images/main_header.png") no-repeat;
    background-position : top right;
    background-size     : cover;
    background-clip     : border-box;
    min-height          : 12rem; /* 13.75 */
    width               : 100%;
    position            : relative;
    margin              : 0 auto;
}

.mainHeader__sideNav {
    position            : absolute;
    right               : 1rem;
}
@media screen and (max-width: 48.6875rem) {
.mainHeader__sideNav {
    display : none;
}
}

.sideNav__linkContainer {
    border              : 1px solid transparent;
    display             : flex;
    justify-content     : space-between;
    background-color    :  #EEEEEE;
}

.mainHeader__sidelink {
    font-size   : 0.9rem;
    display     : inline-block;
    color       : #cc3333;
    width       : 2.1875rem;
    text-align  : center;
    padding     : 0.2rem;
    margin      : 0 0.3125rem 0 0;
}

.mainHeader__logoTitle {
    margin-top      : 0.5rem;
    display         : flex;
    position        : relative;
    margin-bottom   : 2.5rem;
}

.mainHeader__logo {
    margin-left : 0.625rem;
}

.mainHeader__logo img {
    height : 5rem;
}

.mainHeader__title--small, .mainHeader__title--large {
    margin-left : 1rem;
}

@media screen and (max-width: 29.99rem) {
.mainHeader__title--large {
    display : none;
}
}
@media screen and (min-width: 30rem) {
.mainHeader__title--small {
    display : none;
}
}

.mainHeader__title--large h1 {
    margin              : 0 0 0.2rem 0;
    font-size           : 1.7rem;
    color               : #cc3333;
    padding             : 0.125rem 0.3125rem 0.125rem 0.3125rem;
    font-weight         : bold;
}
.mainHeader__title--large h2 {
    margin              : 0 0 0.3125rem 0;
    font-size           : 0.9rem;
    color               : #cc3333;
    background-color    : #eeeeee;
    padding             : 0.125rem 0.3125rem 0.125rem 0.3125rem;
    font-weight         : bold;
    display             : inline-block;
}

.mainHeader__title--small h1 {
    margin              : 1rem 0 0.2rem 0;
    font-size           : 2.25rem;
    color               : #cc3333;
    background-color    : #eeeeee;
    padding             : 0.125rem 0.3125rem 0.125rem 0.3125rem;
    font-weight         : normal;
}

/**************************************/
/*--------- 3. Navigation ------------*/
/**************************************/

.mainNavigation {
    background-color  : #3366cc;
    position          : absolute;
    bottom            : 0;
    width             : 100%;
}

.navbar {
    overflow        : hidden;
    display         : flex;
    justify-content : space-between;
    max-width       : 80rem;
    margin          : 0 auto;

}
@media all and (max-width: 72.1875rem) {
.navbar {
    display : none;
}
}
@media all and (min-width: 72.25rem)  {
.navbar {
    min-width : 63.9375rem!important;
}
}

.navbar>a {
    font-size       : 1rem!important;
    color           : white;
    line-height     : 1.15;
    padding-top     : 0.875rem;
    padding-bottom  : 0.875rem;
    text-decoration : none;
}


/*.navbar>a:hover, .dropdown:hover .dropbtn {*/
/*    background-color : #0D47A1;*/
/*}*/

/*.dropdown {*/
/*    overflow : hidden;*/
/*}*/

.dropdown .dropbtn {
    border              : none;
    outline             : none;
    color               : white;
    font-size           : 1rem!important;
    padding-top         : 0.875rem;
    padding-bottom      : 0.875rem;
    background-color    : inherit;
}

.dropdown-content {
    display          : none;
    position         : absolute;
    background-color : #f9f9f9;
    min-width        : 10rem;
    box-shadow       : 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2);
    z-index          : 1000;
}

.dropdown:last-child > .dropdown-content {
    right: 0;
}

.dropdown-content a {
    float           : none;
    color           : black;
    padding         : 0.75rem 0.625rem 0.75rem 0.3125rem;
    text-decoration : none;
    display         : block;
    text-align      : left;
}

.dropdown-content .section {
    float            : none;
    color            : black;
    font-weight      : bold;
    background-color : #bfbfbf;
    padding          : 0.75rem 1rem;
    display          : block;
    text-align       : left;
}

.dropdown-content a:hover {
    background-color : #e3e3e3;
}
.dropdown-submenu{

}
.dropdown-submenu-list{
    display: none;
    position: absolute;
    left: 100%;
    top:-0.75rem;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
}
.dropdown:hover >.dropdown-submenu-list{
    display: block;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.dropdown-submenu::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
    transform: rotate(-90deg);
}



/**************************************/
/*--------- 4. Content ------------*/
/**************************************/

.Site {
    display             : flex;
    min-height          : 100vh;
    flex-direction      : column;
}

.mainContent {
    width               : 100%;
    border-top          : 0.5rem solid transparent;
    flex                : 1;
}

.title {
    font-size           : 1.25rem;
    background-color    : #cc3333;
    color               : white;
    padding             : 0.3125rem;
    margin              : 0.625rem 0 0.3125rem;
}
.subtitle {
    font-size           : 1.00rem;
    background-color    : #cc3333;
    color               : white;
    padding             : 0.3125rem;
    margin              : 0.625rem 0 0.3125rem;
}
.subtitle img{
    border-radius: 100%;
}

.media-frame {
    /*background-color    : #F5F5F5;*/
    text-align          : center;
    padding             : 0.3125rem;
}

.media-frame:nth-child(odd) {
    width               : calc(50% - 1rem);
    margin-right        : 1rem;
}

@media all and (max-width: 37.5rem) {
    .media-frame {
        background-color    : #F5F5F5;
        padding             : 0.3125rem;
        width               : 100%;
    }

    .media-frame:nth-child(odd) {
        width               : 100%;
        margin-right        : 0;
    }
}

/*.accordion {*/
/*    display             : block;*/
/*    background-color    : #0D47A1;*/
/*    position            : relative;*/
/*    color               : white;*/
/*    cursor              : pointer;*/
/*    padding-left        : 0.3125rem;*/
/*    padding-top         : 0.625rem;*/
/*    padding-bottom      : 0.625rem;*/
/*    width               : 100%;*/
/*    text-align          : left;*/
/*    border              : none;*/
/*    outline             : none;*/
/*    transition          : 0.4s;*/
/*}*/

/*!* Accordion *!*/
/*.active, .accordion:hover {*/
/*    !*background-color    : #42A5F5;*!*/
/*    color               : #f8f8f6;*/
/*}*/


.panel {
    background-color    : white;
    display             : none;
    overflow            : hidden;
}
.up, .down {
    /*position            : absolute;*/
    top                 : 32%;
    right               : 0.5rem;
}
.down {
    display             : inline;
}
.up {
    display             : none;
}
.active .down {
    display             : none;
}
.active .up {
    display             : inline;
}
/**************************************/
/*----------- 6. Footer --------------*/
/**************************************/

.mainFooter {
    background-color    : #3366cc;
    padding             : 1rem 0.625rem 1rem 0.625rem;
    margin-top          : 0.625rem;
    color               : white;
    font-size           : 0.875rem;
    position            : relative;
    min-height          : 6rem;
}

.mainFooter a:link {
    color               : white;
}

/**************************************/
/*--------- 7. Additional ------------*/
/**************************************/
.background-overlay {
    display             : none;
    position            : absolute;
    top                 : 0;
    bottom              : 0;
    left                : 0;
    right               : 0;
    background-color    : rgba(58, 58, 68,0.75);
    z-index             : 10;
}
.pdf-container {
    position            : absolute;
    top                 : 5%;
    bottom              : 5%;
    left                : 10%;
    right               : 10%;
    background          : white;
    padding             :  0.3125rem;
    border              : 2px solid #888;
}

.pdf-nav {
    display             :  flex;
    justify-content     : space-between;
}

.pdf-info {
    display             : none;
}

.pdf-preview {
    position            : absolute;
    top                 : 3.5rem;
    bottom              : 5%;
    left                : 0;
    right               : 0;
}

@media all and (max-width: 48rem) {
    .pdf-container {
        top             : 0;
        bottom          : 0;
        left            : 0;
        right           : 0;
        border          : none;
    }
}

/**************************************/
/*--------- 8. Grid System -----------*/
/**************************************/
.grid-row {
    display             : flex;
    flex-direction      : row;
    flex-wrap           : wrap;
}

.grid-cell-10 {
    width               : 10%;
    flex-grow           : 1;
}

.grid-cell-20 {
    width               : 20%;
    flex-grow           : 1;
}

.grid-cell-30 {
    width               : 30%;
    flex-grow           : 1;
}

.grid-cell-50 {
    width               : 50%;
    flex-grow           : 1;
}

.grid-cell-70 {
    width               : 70%;
    flex-grow           : 1;
}

.grid-padding-right-1 {
    padding-right       : 1rem;
}

.grid-margin-bottom-1 {
    margin-bottom       : 1rem;
}

.grid-margin-right-1 {
    margin-right        : 1rem;
}

.desktop-hide {
    display             : none;
}

.mobile-hide {
    display             : block;
}

@media all and (max-width: 37.5rem) {
.grid-row {
    flex-direction      : column;
}

.grid-order-1 {
    order               : 1;
}
.grid-order-2 {
    order               : 2;
}
.grid-order-3 {
    order               : 3;
}

.grid-padding-right-1 {
    padding-right       : 0;
}

.grid-margin-right-1 {
    margin-right        : 0;
}

.grid-cell-30, .grid-cell-50, .grid-cell-70 {
    width               : 100%;
    flex-grow           : 1;
    flex-shrink         : 0;
}

.desktop-hide {
    display             : block;
}
.mobile-hide {
    display             : none;
}

}