/*Dictionary*/
.dictionary-index {
    margin-top: -7em;
    z-index: 500;
}
.dictionary-index > div {
    overflow: hidden;
    padding: 0;
    width: 100%;
    }
.dictionary-index ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    background-color: #b38b5a;
    color: #fff;
    text-align: center;
    line-height: 2;
    /*fix border*/
    margin: 0 -1px -1px 0;
    padding: 0;
}
.dictionary-index ul li {
    flex-basis: calc(1 / 13 * 100%);
    border-right: 1px solid rgba(0,0,0,0.4);
    border-bottom: 1px solid rgba(0,0,0,0.4);
    cursor: pointer;
    user-select: none;
}
.dictionary-index-disabled {
    color: rgba(255, 255, 255, 0.2);
    cursor: default !important;
}
.dictionary-letter {
    font-size: 3.2rem;
    line-height: 1.2;
    color:#9b724d;
    font-weight: 700;
}
.dictionary ul {
    border-bottom: 2px solid #9b724d;
}
.dictionary ul li {
    padding: 0.5em 0;
    border-bottom: 2px dashed #efefef;
}
.dictionary ul li:last-child {
    border-bottom: none;
}
.dictionary ul li span {
    font-weight: 700;
}



.dictionary-show, .dictionary-back {display: none;}

.dictionary-holder {
    max-width: 1300px;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* !!!*/
header {height: 346px; margin-top:60px;}
.mainbanner.fixed {
    position: fixed;
    /*top:-140px;*/
	top: 0;
    width: 100%;
    height: 346px;
    z-index: 400;
	
	transition: top 0.2s ease-in-out;
}
/*new*/
.topnavrow.nav-up + .mainbanner.fixed { top: -60px; }
.mainbanner h1 { padding-bottom: 2rem; }

@media only screen and (max-width: 576px) {
	
	.mainbanner h1 { padding-bottom: 0; }

    .dictionary-index{
        margin-top: 0;
        position: static;
        padding: 0;
        display: none;
    }
    .dictionary-index ul li {
        flex-basis:20%;
    }

    /* main {overflow: hidden;}*/
    header {height:auto;}

    .mainbanner.fixed {
        position: static;
        width: auto;
    }

    .dictionary-show, .dictionary-back {display: block;}

    .dictionary-show{
        background-color: #b6956c;
        width: 9em;
        height: 32px;
        line-height: 32px;
        border-radius: 16px;
        color: white;
        padding-left: 12px;
        transition: all .4s ease-in-out;
        z-index:20;
        cursor: pointer;
        position:relative;
        margin-left: auto;
        margin-right: 0px;
        margin-top: 2rem;
    }
    .dictionary-show::after {
        content: "";
        position: absolute;
        background-image: url(../img/icons/dictionary-mob-idx.png);
        background-size: cover;
        width: 32px;
        height: 32px;
        border-radius: 16px;
        top: 0;
        right: 0;
        background-color: #9c724a;

        transition: all .4s ease-in-out;
    }
    .dictionary-show.fixed {
        position: fixed;
        top: 60px;
        right: 22px;

        width:48px;
        height:48px;
        border-radius: 24px;
        line-height:48px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        animation-name: shadow-pulse;
        animation-duration: 3000ms;
        animation-iteration-count: 10;
        animation-timing-function: linear;

        margin-top: 0;
    }
    @keyframes shadow-pulse {
        0% { box-shadow: 0 0 0 0px rgba(0, 0, 0, 0); }
        92% { box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2); }
        100% { box-shadow: 0 0 0 18px rgba(0, 0, 0, 0); }
    }
    .dictionary-show.fixed::after {
        width:48px;
        height:48px;
        border-radius: 24px;
    }
    .dictionary-show.show{ animation-play-state: paused;}

    .dictionary-index {
        width: calc(100% + 30px);
        transition: all .4s ease-in-out;
        display:flex;
    }
    .dictionary-index.show {
        margin-left:0;
    }

    .dictionary-index-container.fixed {
        position: fixed;
        top: 60px;
        width: 100%;
    }

    .dictionary-index > div.col{
        width: calc(100% - 50px);
        display:inline-block;
    }
    .dictionary-back {
        background-color: #9c724a;
        display: inline-block;
        flex-basis: 48px;
        cursor: pointer;

        background-image: url(../img/icons/chevron-thin-right.svg);
        background-position: right center;
        background-repeat: no-repeat;
        right: 0;
        border-left: 1px solid #676767;
    }


    .dictionary-holder{ position:relative;}

    /*new*/
    #dcindex {
        padding:0;
        width: 100%;
    }
    .dictionary-index-container {
        overflow: hidden;
        position: absolute;
        width: calc(100% + 15px);
        left:0;
        margin-top: -32px;
        z-index:15;

    }
    .dictionary-index {
        margin-left:100%;
    }
}