@font-face {
    font-family: "IRANSans";
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/IRANSansWeb_Bold.eot');
    src: url('../fonts/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/IRANSansWeb_Bold.woff') format('woff'),
    url('../fonts/IRANSansWeb_Bold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: "IRANSans";
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/IRANSansWeb.eot');
    src: url('../fonts/IRANSansWeb.eot?#iefix') format('embedded-opentype'),
    url('../fonts/IRANSansWeb.woff') format('woff'),
    url('../fonts/IRANSansWeb.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: "IRANSans";
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/IRANSansWeb_Medium.eot');
    src: url('../fonts/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/IRANSansWeb_Medium.woff') format('woff'),
    url('../fonts/IRANSansWeb_Medium.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: "IRANSans";
    font-weight: normal;
    src: url('../fonts/IRANSansWeb(FaNum).eot');
    src: url('../fonts/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'),
    url('../fonts/IRANSansWeb(FaNum).woff') format('woff'),
    url('../fonts/IRANSansWeb(FaNum).ttf') format('truetype');
    font-display: swap;
}


@font-face {
    font-family: 'BTitrBold';
    src: url('../fonts/BTitrBold.eot?#') format('eot'), /* IE6–8 */ url('../fonts/BTitrBold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/BTitrBold.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

@font-face {
    font-family: 'BNazanin';
    src: url('../fonts/BNazanin.eot?#') format('eot'), /* IE6–8 */ url('../fonts/BNazanin.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('../fonts/BNazanin.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}


body {
    font-family: BTitrBold;
    margin: 0;
    padding: 0;
}

header {
    font-family: BNazanin;
    width: 100%;
    height: 90px;
    background-color: rgb(192 205 180 / 57%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery-container {
    /*position: absolute;*/
    margin: auto;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 90%;
}

.item {
    height: 100%;
    cursor: pointer;
    opacity: 0.6;
}

.pos {
    position: absolute;
    display: inline-block;
    writing-mode: vertical-lr;
    background-color: rgba(88, 86, 86, 0.87);
    top: 50%;
    text-align: center;
    border-radius: 20px;
    padding: 25px;
    opacity: 0;
}

.pos a {
    opacity: 0;
    color: white;
}

.item:hover a {
    opacity: 1;
    color: white;
    text-orientation: mixed;
    word-spacing: 7px;
}

.item:hover .pos {
    opacity: 1;
}

.item:hover {
    opacity: 1;
}