@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';
@import '../../themes/animation';
@import '../../themes/common-variables';
@import '../../themes/font-mixins.scss';
@import '../../themes/media-queries.scss';
.nav-block {
    padding-top: rem(50px);
    padding-bottom: rem(10px);
    @media (max-width: $screen-xs-max) {
        padding-top: rem(30px);
        padding-bottom: rem(5px);
    }
}

.general-subnav {
    @media (max-width: $screen-md-min) {
        display: none;
    }
}

.seoHidden {
    display: none;
}

.slided-down-category {
    transition: all 0.1s ease;
    h1 {
        font-size: $font-size-medium !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    @media (max-width: $screen-md-min) {
        display: none;
    }
}

.photography {
    h1, span {
        color: $gray-97 !important;
    }
}

.hide-category {
    visibility: hidden;
}

.nav-category {
    transform: translateX(-40%);
}

.menu-item {
    display: inline;
    margin-right: 40px;
    transition: border 0.3s ease-in;
    h1 {
        display: inline-block;
        font-weight: $font-weight-bold;
        font-size: $font-size-base;
    }
}

.active h1 {
    padding-bottom: 8px;
    border-bottom: 3px solid $gray;
}

.topBar {
    text-align: right;
    padding-top: 9px;
    padding-right: 0.8rem;
    background: $light-gray;
    @include fade-in-down(0.5s);
}

.nav-item-algin {
    display: inline-block;
    float: left;
    margin: 0 0.5rem;
}

.slidedUpNav {
    > div {
        padding-top: 0.7rem;
        padding-bottom: 0.5rem;
    }
}

.articleTitle {
    vertical-align: middle;
    display: inline-block;
    margin: 0 auto;
    @include fade-in-left(0.5s);
    @media (max-width: $screen-xs-max) {
        display: none;
    }
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.titleText {
    color: $gray-15;
    font-weight: $font-weight-bold;
    font-size: $font-size-base;
    display: inline-block;
}

.articleTitleText {
    @extend .titleText;
    transform: translateX(-50%);
    &.photography {
      color: #F7F7F7 !important;
    }
}

.topicTitleText {
    @extend .titleText;
    transform: translateX(-45%);
    &.photography {
      color: #F7F7F7 !important;
    }
}

.fadeRight {
    @include fade-in-left(0.5s);
}

.fadeLeft {
    @include fade-in-right(0.5s);
}

.slideUp {
    @include slide-up(0.3s, 5px);
}

.slideDown {
    @include slide-down(0.5s, 5px);
}

.linkOuterContainer {
    background: $light-gray;
    @include fade-in-down(0.5s);
}

.catLinkContainer {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin: 0 1em 1em 1em;
    transition: all .5s ease;
    a {
        visibility: visible;
        width: 33%;
        height: 60px;
        margin: auto;
        text-align: center;
        font-size: 135%;
        animation: item-animation .3s linear forwards;
    }
}

.navContainer {
    width: 100%;
    min-height: 3rem;
    text-align: center;
    transition: height 0.5s, transform 0.5s;
    -moz-transition: height 0.5s, transform 0.5s;
    -webkit-transition: height 0.5s, transform 0.5s;
}

.navLeft {
    @extend .nav-block;
    float: left;
    padding-left: 2.6rem;
    min-width: 9rem;
    min-height: 3rem;
    @media (max-width: $screen-xs-max) {
        padding-left: 1rem;
        min-width: 3rem;
    }
}

.navCenter {
    @extend .nav-block;
    display: inline-block;
    min-width: 9rem;
    min-height: 3rem;
    transform: translate(-42%, -6%);
    @media (max-width: $screen-xs-max) {
        transform: translate(-3.5%, -3%);
    }
}

.navRight {
    @extend .nav-block;
    float: right;
    min-height: 3rem;
    padding-right: 2.6rem;
    @media (max-width: $screen-xs-max) {
        padding-right: 1rem;
    }
}

.navLogo {
    img {
        width: rem(119px);
    }
    @include fade-in(0.5s);
}

.logoRight {
    height: rem(30px);
    img {
        height: rem(30px);
    }
}

.donateButton {
    @extend .nav-item-algin;
    height: rem(25px);
    margin-left: 1.5rem;
    display: table;
    transition: all 0.3s;
    font-size: $font-size-xsmall;
    @media (max-width: $screen-xs-max) {
        display: none;
    }
    > * {
        display: table-cell;
        vertical-align: middle;
    }
    img {
        width: auto;
        height: 90%;
        min-width: rem(25px);
        margin-top: rem(3px);
        transition: transform 0.3s;
    }
    span {
        padding-left: rem(7px);
        color: $gray-50;
        transition: color 0.3s;
    }
    &:hover {
        span {
            color: $primary-color;
        }
        img {
            transform: translateY(-15%);
        }
    }
}

.up {
    span {
        display: none;
        @media (min-width: $screen-sm-max) {
            display: table-cell;
        }
    }
    @media (max-width: $screen-xs-max) {
        display: table;
    }
}

.donateIcon {
    width: 2.2rem;
    padding-right: 0.5rem;
    padding-bottom: 0.2rem;
}

.navButton {
    @extend .nav-item-algin;
    width: 32px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    user-select: none;
    position: relative;
    img {
        width: 100%;
        height: auto;
        transition: all 0.1s;
    }
    &:hover {
        img {
            width: 110%;
            margin-left: -5%;
            margin-top: -10%;
        }
    }
    .topic-count {
        position: absolute;
        top: rem(-5px);
        right: rem(-12px);
        font-size: $font-size-tiny;
        border-radius: 5rem;
        width: 0.9rem;
        height: 0.9rem;
        background: $primary-color;
        color: $white;
    }
}

// START - burger menu icon
.navIcon {
    @extend .nav-item-algin;
    width: 26px;
    height: 20px;
    margin-left: 0.7rem;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    margin-top: 5px;
}

.navIcon span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: $gray-tag-bg;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.iconOpen span {
    background: $gray-tag-bg;
}

.navIcon span:nth-child(1) {
    top: 0px;
}

.navIcon span:nth-child(2),
.navIcon span:nth-child(3) {
    top: 8px;
}

.navIcon span:nth-child(4) {
    top: 16px;
}

.iconOpen span:nth-child(1) {
    top: 8px;
    width: 0%;
    left: 50%;
}

.iconOpen span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.iconOpen span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.iconOpen span:nth-child(4) {
    top: 16px;
    width: 0%;
    left: 50%;
}

// END - burger menu icon