@font-face {
    font-family: 'shabnam';
    src: url('https://khorshidneshan.ir/CDN/Fonts/shabnam.eot');
    src: local('?'), url('https://khorshidneshan.ir/CDN/Fonts/shabnam.woff') format('woff'), url('https://khorshidneshan.ir/CDN/Fonts/shabnam.ttf') format('truetype');
}

:root {
    --green: #0B9E43;
    --white: #fff;
    --black: #20292f;
    --gray: #7e7e7eeb;
    --bgWhite: #f8f9fa;
}

* {
    font-size: 14px;
    font-family: shabnam, tahoma;
}

body {
    margin: 0;
    padding: 0;
    direction: rtl;
}

a {
    text-decoration: none;
}

/* public */
.moreBtn a, .notices a {
    background-image: linear-gradient(270deg, #A8DC51 0%, #4CA754 100%);
    box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 50%);
    padding: 15px 60px;
    display: inline-block;
    border-radius: 20px;
    margin: 45px 0;
    cursor: pointer;
    transition: .5s;
}

    .moreBtn a:hover, .notices a:hover {
        box-shadow: 0 0 28px #00000038;
    }

.moreBtn a, .notices a {
    color: #FFFFFF;
}

.topScroll {
    position: fixed;
    bottom: 15px;
    left: 10px;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    transform: translateY(160%);
    transition: .5s;
    cursor: pointer;
    background-color: #e6ae4a;
    padding: 8px;
    box-sizing: border-box;
    width: 35px;
    height: 35px;
    object-fit: contain;
    z-index: 2;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
}

/*.title1 {
    color: var(--green);
    font-size: 18px;
    padding: 0 15px;
}*/

.title2 {
    color: var(--black);
    font-size: 28px;
    font-weight: bold;
    padding: 10px 15px;
}

.title3 {
    color: var(--black);
    font-size: 18px;
    padding: 5px 30px;
    font-weight: bold;
}

.title4 {
    font-size: 15px;
    color: var(--black);
    padding: 5px 30px;
    font-weight: bold;
}

.paragraph {
    color: var(--gray);
    padding: 10px 0;
}

.container {
    padding: 40px 5vw;
}

.itemSkin3 .abstract a,
.itemSkin2 .title a,
.itemSkin3 .title a,
.itemSkin4 .title a,
.itemSkin7 .title a,
.itemSkin4 .abstract a,
.itemSkin7 .abstract a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.itemSkin2 .title a,
.itemSkin3 .title a,
.itemSkin4 .title a,
.itemSkin7 .title a {
    -webkit-line-clamp: 1;
}

.itemSkin3 .abstract a,
.itemSkin4 .abstract a,
.itemSkin7 .abstract a {
    -webkit-line-clamp: 3;
    height: 4em;
}

.menuIcon {
    display: none;
}

/*notices*/
.notices {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 4;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
    width: 100%;
    height: 100%;
    margin: auto;
}

    .notices:target {
        opacity: 1;
        pointer-events: auto;
    }

    .notices > div {
        position: relative;
        top: 20%;
        background-color: #fff;
        box-shadow: 0 0 10px #4e4e4e38;
        width: 45%;
        padding: 10px;
        border-radius: 10px;
        overflow: auto;
        animation: notices 2s infinite;
        box-sizing: border-box;
        margin: auto;
        height: 45%;
        z-index: 1;
    }

        .notices > div::-webkit-scrollbar {
            display: none;
        }

@keyframes notices {
    from {
        box-shadow: 0 0 19px #0bab4f;
        /*#ff0000ad*/
    }

    to {
        box-shadow: 0 0 10px #4e4e4e38;
    }
}

.notices .noticeBackImage {
    position: fixed;
    z-index: -1;
    top: 20%;
    background-color: #fff;
    width: 45%;
    border-radius: 10px;
    height: 45%;
    overflow: auto;
    object-fit: cover;
}

.notices .noticeIcon {
    position: fixed;
    z-index: -1;
    top: 22%;
    left: 30%;
    width: 12%;
    object-fit: cover;
}

.notices .noticesContent {
    width: 60%;
}

.notices .pre-noticesIcon {
    border-radius: 50%;
    background-color: #0bab4f;
    padding: 10px;
    position: absolute;
    top: 13px;
    right: 10px;
}

    .notices .pre-noticesIcon img {
        width: 30px;
        vertical-align: middle;
    }

.notices .closePopup {
    cursor: pointer;
    padding-bottom: 5px;
    filter: brightness(0.4);
    width: 20px;
}

.notices .ContentTitle {
    color: #0bab4f;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
}

.notices .ContentAbstract,
.notices .contentImagesDiv {
    display: none;
}

.notices a {
    margin: 0;
}
/* header */
header {
    background: var(--white);
    box-shadow: 0 0 5px 0 #20292f52;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.headerFixed {
    position: fixed;
    top: 0;
    z-index: 2;
    right: 0;
    left: 0;
    animation: showMenu .6s;
}

@keyframes showMenu {
    0% {
        opacity: .5;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

header .logo {
    display: inline-block;
    width: 27%;
    vertical-align: middle;
}

    header .logo a {
        color: var(--green);
        font-weight: bold;
    }

    header .logo img {
        width: 85px;
        vertical-align: middle;
        /*  filter: invert(1);*/
    }

    header .logo div {
        display: inline-block;
        vertical-align: middle;
        width: 77%;
    }

header .nav {
    width: 66%;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

    header .nav .navItem {
        display: inline-block;
        padding: 0 4px;
        box-sizing: border-box;
        position: relative;
    }

        header .nav .navItem .menuItem {
            cursor: pointer;
        }

            header .nav .navItem .menuItem:hover {
                color: var(--green);
            }

header .menuItem img {
    transform: rotate(180deg);
    vertical-align: middle;
    width: 8px;
    filter: invert(1);
}

header .menuItem:hover img {
    filter: invert(42%) sepia(65%) saturate(4168%) hue-rotate(124deg) brightness(93%) contrast(91%);
}

header .nav .navItem ul {
    list-style: none;
    background: var(--white);
    padding: 4px 14px;
    position: absolute;
    top: 20px;
    right: 7px;
    z-index: 2;
    width: 120px;
    box-shadow: 0 0 12px #0000001a;
    border-radius: 5px;
    padding: 10px;
    transform-origin: top;
    transform: scale3d(1, 0, 1);
    transition: transform 0.5s;
}

    header .nav .navItem ul li {
        padding: 10px 0px;
        text-align: right;
    }

header .nav a {
    color: var(--black);
}

    header .nav a:hover, header .nav .navItemActive {
        color: var(--green);
    }

header .nav .navItem ul.openSubMenu {
    transform: scale3d(1, 1, 1);
    transition: 0.5s;
}

.spaceAround, .spaceAroundP {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #23232308;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
}

.activeSpaceAround, .activeSpaceAroundP {
    opacity: 1;
    visibility: visible;
}

header .headLeft {
    display: inline-block;
    width: 8%;
    text-align: left;
    vertical-align: middle;
}

    header .headLeft .address {
        display: inline-block;
        vertical-align: middle;
        color: var(--black);
        padding: 0 10px;
    }


        header .headLeft .address img {
            vertical-align: middle;
            filter: invert(12%) sepia(23%) saturate(509%) hue-rotate(160deg) brightness(99%) contrast(92%);
        }

    header .headLeft .number a {
        color: var(--black);
    }

header .number img {
    width: 15px;
    filter: invert(42%) sepia(85%) saturate(467%) hue-rotate(90deg) brightness(84%) contrast(84%);
    vertical-align: middle;
}

/* slider */
.slider {
    height: 60vh;
    overflow: hidden;
    position: relative;
}

    .slider * {
        height: 100%;
    }

.sliders .itemSkin1 {
    display: none;
    /*min-height: 83vh;*/
    height: 100%;
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    0% {
        opacity: .4;
    }

    100% {
        opacity: 1;
    }
}

.slider img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.slider .content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

.slider .titleSlider {
    color: #4CA754;
    font-size: 50px;
    font-weight: bold;
}

.slider .titleSlider2 {
    color: var(--white);
    font-size: 50px;
    font-weight: bold;
    text-shadow: 0 0 0.05em #fff, 0 0 0.2em rgb(0 0 0), 0 0 0.3em rgb(0 0 0);
}

.slider .content .paragraphSlider {
    color: var(--white);
    text-align: justify;
    padding: 20px 25vw;
    text-shadow: 0 0 0.05em #fff, 0 0 0.2em rgb(0 0 0), 0 0 0.3em rgb(0 0 0);
}

.slider .progress-container {
    position: absolute;
    width: 100%;
    height: 7px;
    top: 0;
}

    .slider .progress-container .progress {
        width: 0;
        height: 4px;
        background: linear-gradient(90deg, rgb(11 158 67 / 0%) 1%, rgba(70,156,32,1) 13.5%, rgba(11,158,67,1) 26%, rgba(75,187,26,1) 38.5%, rgba(11,158,67,1) 51%, rgba(11,158,67,1) 63.5%, rgba(70,156,32,1) 76%, rgba(11,158,67,1) 88.5%, rgba(75,187,26,1) 100%);
        /*border-bottom: 1px solid #0000006e;*/
    }

/* attributes */
.attributes {
    transform: translateY(-30%);
    text-align: center;
}

    .attributes .item {
        background: var(--white);
        padding: 30px 22px;
        border-radius: 30px;
        display: inline-block;
        vertical-align: top;
        margin: 0 10px;
        width: 19%;
        box-shadow: 0 0 12px #0000001a;
        box-sizing: border-box;
    }

        .attributes .item .borderBottom {
            border-bottom: 2px dashed var(--green);
            display: inline-block;
        }

        .attributes .item img {
            width: 40px;
        }

/* about */
.about {
    background: url('File.aspx?t=image&s=bgimage.png');
    overflow: hidden;
}

    .about .right {
        width: 38%;
        display: inline-block;
        vertical-align: middle;
        padding-left: 50px;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
    }

.team .itemSkin7 .image,
.gallery .itemSkin2,
main .itemSkin4.GalleryItemClass {
    position: relative;
    overflow: hidden;
}

    .about .right:before,
    .team .itemSkin7 .image::before,
    .gallery .itemSkin2::before,
    main .itemSkin4.GalleryItemClass::before {
        position: absolute;
        top: 0;
        left: -85%;
        z-index: 2;
        display: block;
        content: '';
        width: 50%;
        height: 100%;
        background: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);
        transform: skewX(-25deg);
        pointer-events: none;
        box-sizing: border-box;
    }

    .about .right:hover:before,
    .team .itemSkin7 .image:hover::before,
    .gallery .itemSkin2:hover::before,
    main .itemSkin4.GalleryItemClass:hover::before {
        animation: shine 1s;
    }

@keyframes shine {
    100% {
        left: 100%;
    }
}

.about .right img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
}

.about .left {
    display: inline-block;
    vertical-align: middle;
    width: 48%;
    padding-right: 50px;
}

.about .paragraph, .aboutMojtama .right .paragraph {
    padding: 5px 15px;
    text-align: justify;
}

.about .image {
    display: inline-block;
    width: 10%;
    transform: rotate(180deg);
}

    .about .image img {
        width: 100%;
    }

/* aboutMojtama */
.aboutMojtama {
    background: url('File.aspx?t=image&s=bgimage4.png');
    margin: -7px 0;
}

    .aboutMojtama .right, .aboutMojtama .left {
        display: inline-block;
        vertical-align: middle;
        width: 48%;
        padding: 10px;
        box-sizing: border-box;
    }

    .aboutMojtama .item {
        display: inline-block;
        vertical-align: top;
        width: 45%;
        background-color: #fff;
        padding: 40px 20px;
        box-sizing: border-box;
        margin: 8px;
        border-radius: 40px;
        text-align: center;
        box-shadow: 0px 1px 60px 30px rgb(0 0 0 / 5%);
    }

    .aboutMojtama .aboutMSutak {
        background-color: #C8E5F1;
    }

    .aboutMojtama .aboutMQasedak {
        background-color: #F9CA5F;
    }

    .aboutMojtama .aboutMMajale {
        background-color: #F7EB94;
    }

    .aboutMojtama .aboutMDanshA {
        background-color: #DBE8A3;
    }

    .aboutMojtama .item .image {
        border-radius: 50%;
        width: 40%;
        margin: auto;
        box-shadow: 0 0 40px #6e6e6e40;
        background-color: #fff;
        padding: 10px;
        box-sizing: border-box;
    }

    .aboutMojtama .item img {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 50%;
    }

    .aboutMojtama .title3 {
        padding: 20px 0;
    }

    .aboutMojtama .left .paragraph {
        padding: 0;
        height: 3em;
        overflow: hidden;
    }
/* counter */
/*.counter {
    text-align: center;
}

    .counter .item {
        display: inline-block;
        vertical-align: top;
        width: 23%;
        padding: 0 50px;
        border-left: 1px solid #7e7e7e36;
        box-sizing: border-box;
    }

        .counter .item:last-child {
            border-left: none;
        }

        .counter .item:nth-child(odd) {
            color: #75A825;
        }

        .counter .item:nth-child(even) {
            color: #15949F;
        }

        .counter .item .count {
            font-size: 80px;
            font-weight: bold;
            font-family: Arial;
        }

        .counter .item .text {
            font-size: 16px;
        }

.line {
    background: #0b9e430f;
    height: 4px;
    width: 79%;
    margin: 0 auto 80px;
}*/
/* team */
.team {
    text-align: center;
    background: url('File.aspx?t=image&s=bgimage3.png');
}

    .team .title2 {
        margin-bottom: 45px;
    }

    .team .itemSkin7 {
        display: inline-block;
        vertical-align: top;
        width: 23%;
        padding: 0 20px;
        position: relative;
        box-sizing: border-box;
    }

        .team .itemSkin7 .text {
            background: var(--white);
            border-radius: 40px;
            box-shadow: 0 0 12px #0000001a;
            padding: 15px;
            margin: -70px 10px;
            position: relative;
        }

        .team .itemSkin7 img {
            width: 100%;
            border-radius: 50px;
        }


        .team .itemSkin7 .title a {
            color: var(--black);
            font-size: 18px;
            font-weight: bold;
        }

        .team .itemSkin7 .abstract::before {
            content: '';
            position: absolute;
            right: 50%;
            background: url(File.aspx?t=icon&s=cannabis-3.png) no-repeat;
            width: 40px;
            height: 40px;
            top: 32%;
            transform: translateX(50%);
        }

        .team .itemSkin7 .abstract {
            margin-top: 70px;
        }

            .team .itemSkin7 .abstract a {
                color: var(--gray);
                text-align: justify;
            }

        .team .itemSkin7 .more {
            display: none;
        }

    .team .moreBtn {
        margin: 100px 0 45px;
    }

    .team .imageBg {
        display: inline-block;
        width: 10%;
        transform: rotate(180deg);
    }

        .team .imageBg img {
            width: 100%;
        }
/* gallery */
.gallery {
    text-align: center;
    margin: -7px 0;
    background: url("File.aspx?t=image&s=bgimage4.png");
}

.imageTop img {
    width: 100%;
    height: 100%;
    display: block;
}

.gallery .title2 {
    margin-bottom: 45px;
}

.gallery .itemSkin2, main .itemSkin4.GalleryItemClass {
    display: inline-block;
    width: 22%;
    vertical-align: top;
    border-radius: 10px;
    margin: 0 20px;
    background: var(--white);
    box-shadow: 0 0 10px #00000014;
}

    .gallery .itemSkin2 img, main .itemSkin4.GalleryItemClass img {
        width: 100%;
        border-radius: 10px 10px 0 0;
    }

    .gallery .itemSkin2 .title, main .itemSkin4.GalleryItemClass .title {
        padding: 7px 0;
    }

        .gallery .itemSkin2 .title a, main .itemSkin4.GalleryItemClass .title a {
            color: var(--black);
            font-size: 18px;
            margin: 5px 15px;
            font-weight: bold;
        }

    main .itemSkin4.GalleryItemClass .abstract {
        display: none;
    }

    main .itemSkin4.GalleryItemClass .more {
        display: none;
    }

/* skills */
.skills {
    text-align: center;
    background: url('File.aspx?t=image&s=bgimage2.png');
}

    .skills .paragraph {
        margin-bottom: 100px;
    }

    .skills .itemSkin4,
    main .itemSkin4.SkillsItemClass,
    main .itemSkin4.CoachItemClass {
        display: inline-block;
        vertical-align: top;
        width: 40%;
        box-shadow: 0px 1px 60px 30px rgb(76 167 84 / 14%);
        border-radius: 15px;
        margin: 20px;
        position: relative;
        box-sizing: border-box;
    }

    .skills .itemSkin4, main .itemSkin4.SkillsItemClass {
        padding: 20px;
    }


main .itemSkin4.CoachItemClass {
    height: 40vh;
    padding: 40px;
}

    main .itemSkin4.CoachItemClass:nth-child(odd) {
        background: url(File.aspx/?t=image&s=coachesOdd.jpg) no-repeat;
        background-size: cover;
    }


    main .itemSkin4.CoachItemClass:nth-child(even) {
        background: url(File.aspx/?t=image&s=coachesEven.jpg) no-repeat;
        background-size: cover;
    }

    main .itemSkin4.CoachItemClass .child {
        width: 52%;
    }

.skills .itemSkin4 .image, main .itemSkin4.SkillsItemClass .image {
    float: left;
    width: 45%;
}

.skills .itemSkin4 img, main .itemSkin4.SkillsItemClass img {
    width: calc(100% - 20px);
    height: 28vh;
    object-fit: cover;
    border-radius: 10px;
    margin-right: 10px;
    box-sizing: border-box;
    display: block;
}

main .itemSkin4.CoachItemClass .image {
    display: none;
}

.skills .itemSkin4 .title, main .itemSkin4.SkillsItemClass .title, .skills .itemSkin4 .abstract, main .itemSkin4.SkillsItemClass .abstract, .skills .itemSkin4 .more, main .itemSkin4.SkillsItemClass .more {
    width: 60%;
}

.skills .itemSkin4 .title,
main .itemSkin4.SkillsItemClass .title,
main .itemSkin4.CoachItemClass .title {
    text-align: right;
}

    .skills .itemSkin4 .title a,
    main .itemSkin4.SkillsItemClass .title a,
    main .itemSkin4.CoachItemClass .title a {
        color: var(--black);
        font-size: 18px;
        font-weight: bold;
    }

.skills .itemSkin4 .abstract,
main .itemSkin4.SkillsItemClass .abstract,
main .itemSkin4.CoachItemClass .abstract {
    text-align: justify;
    padding: 10px 0;
    word-spacing: -4px;
    line-height: 1.4em;
}

    .skills .itemSkin4 .abstract a,
    main .itemSkin4.SkillsItemClass .abstract a,
    main .itemSkin4.CoachItemClass .abstract a {
        color: #454545eb;
    }

.skills .itemSkin4 .more,
main .itemSkin4.SkillsItemClass .more,
main .itemSkin4.CoachItemClass .more {
    text-align: right;
    margin: 15px 0;
}

    .skills .itemSkin4 .more a,
    main .itemSkin4.SkillsItemClass .more a,
    main .itemSkin4.CoachItemClass .more a {
        color: var(--green);
        border-bottom: 2px dashed var(--green);
        font-weight: bold;
        padding: 10px;
    }

/* news */
.news {
    text-align: center;
    background: url('File.aspx?t=image&s=bgimage3.png');
}

.articles {
    text-align: center;
}

    .news .itemSkin4,
    .articles .itemSkin4,
    main .itemSkin4.newsItemClass,
    main .itemSkin4.CouncilItemClass,
    main .itemSkin4.ArticlesClass {
        display: inline-block;
        vertical-align: top;
        width: 23%;
        margin: 10px;
        background: var(--white);
        box-shadow: 0 0 12px #0000001a;
        border-radius: 15px;
    }

    .news .itemSkin4,
    .articles .itemSkin4,
    main .itemSkin4.ArticlesClass {
        width: 22%;
    }

        .news .itemSkin4 .image,
        .articles .itemSkin4 .image,
        main .itemSkin4.newsItemClass .image,
        main .itemSkin4.CouncilItemClass .image,
        main .itemSkin4.ArticlesClass .image {
            overflow: hidden;
            border-radius: 15px 15px 0 0;
        }

        .news .itemSkin4 img,
        .articles .itemSkin4 img,
        main .itemSkin4.newsItemClass img,
        main .itemSkin4.CouncilItemClass img,
        main .itemSkin4.ArticlesClass img {
            width: 100%;
            border-radius: 15px 15px 0 0;
            display: block;
            transition: .5s
        }

        .news .itemSkin4:hover img,
        .articles .itemSkin4:hover img,
        main .itemSkin4.newsItemClass:hover img,
        main .itemSkin4.CouncilItemClass:hover img,
        main .itemSkin4.ArticlesClass:hover img {
            transform: scale(1.2);
        }

        .news .itemSkin4 .title,
        .articles .itemSkin4 .title,
        main .itemSkin4.newsItemClass .title,
        main .itemSkin4.CouncilItemClass .title,
        main .itemSkin4.ArticlesClass .title {
            padding: 10px;
        }

            .news .itemSkin4 .title a,
            .articles .itemSkin4 .title a,
            main .itemSkin4.newsItemClass .title a,
            main .itemSkin4.CouncilItemClass .title a,
            main .itemSkin4.ArticlesClass .title a {
                color: var(--black);
                font-size: 18px;
                font-weight: bold;
                transition: .5s;
            }

                .news .itemSkin4 .title a:hover,
                .articles .itemSkin4 title a:hover,
                main .itemSkin4.newsItemClass .title a:hover,
                main .itemSkin4.CouncilItemClass .title a:hover,
                main .itemSkin4.ArticlesClass .title a:hover {
                    color: var(--green);
                }

        .news .itemSkin4 .abstract,
        .articles .itemSkin4 .abstract,
        main .itemSkin4.newsItemClass .abstract,
        main .itemSkin4.CouncilItemClass .abstract,
        main .itemSkin4.ArticlesClass .abstract {
            text-align: justify;
            padding: 10px;
            word-spacing: -3px;
        }

            .news .itemSkin4 .abstract a,
            .articles .itemSkin4 .abstract a,
            main .itemSkin4.newsItemClass .abstract a,
            main .itemSkin4.CouncilItemClass .abstract a,
            main .itemSkin4.ArticlesClass .abstract a {
                color: var(--gray);
            }

        .news .itemSkin4 .more,
        .articles .itemSkin4 .more,
        main .itemSkin4.newsItemClass .more,
        main .itemSkin4.ArticlesClass .more {
            padding: 20px 15px;
            text-align: right;
        }

            .news .itemSkin4 .more a,
            .articles .itemSkin4 .more a,
            .itemSkin4.newsItemClass .more a,
            main .itemSkin4.ArticlesClass .more a {
                color: var(--gray);
                transition: .5s;
            }

                .news .itemSkin4 .more a:hover,
                .articles .itemSkin4 .more a:hover,
                .itemSkin4.newsItemClass .more a:hover,
                main .itemSkin4.ArticlesClass .more a:hover {
                    color: var(--green);
                }

main .itemSkin4.CouncilItemClass .more {
    display: none;
}
/* honors */
.honors {
    text-align: center;
}

    .honors .itemSkin3,
    main .itemSkin4.HonorItemClass,
    main .itemSkin4.TeamItemClass,
    main .itemSkin4.itemSkin4.MessageItemClass {
        display: inline-block;
        vertical-align: top;
        width: 30%;
        margin: 10px;
        background: var(--white);
        border-radius: 15px;
        box-shadow: 0px 6px 24px 0px rgb(0 0 0 / 10%);
        padding: 20px;
        box-sizing: border-box;
    }

main .itemSkin4.TeamItemClass,
main .itemSkin4.HonorItemClass {
    width: 23%;
}

    .honors .itemSkin3 .image,
    main .itemSkin4.HonorItemClass .image,
    main .itemSkin4.TeamItemClass .image,
    main .itemSkin4.MessageItemClass .image {
        width: 40%;
        margin: auto;
    }

    .honors .itemSkin3 img,
    main .itemSkin4.HonorItemClass img,
    main .itemSkin4.TeamItemClass img,
    main .itemSkin4.MessageItemClass img {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 50%;
    }

    .honors .itemSkin3 .title,
    main .itemSkin4.HonorItemClass .title, main .itemSkin4.TeamItemClass .title, main .itemSkin4.MessageItemClass .title {
        padding: 10px;
        white-space: normal;
    }

        .honors .itemSkin3 .title a,
        main .itemSkin4.HonorItemClass .title a,
        main .itemSkin4.TeamItemClass .title a,
        main .itemSkin4.MessageItemClass .title a {
            color: var(--black);
            font-size: 18px;
            font-weight: bold;
        }

    .honors .itemSkin3 .abstract,
    main .itemSkin4.HonorItemClass .abstract,
    main .itemSkin4.TeamItemClass .abstract,
    main .itemSkin4.MessageItemClass .abstract {
        text-align: justify;
        padding: 10px;
        word-spacing: -3px;
        white-space: normal;
    }

        .honors .itemSkin3 .abstract a,
        main .itemSkin4.HonorItemClass .abstract a,
        main .itemSkin4.TeamItemClass .abstract a,
        main .itemSkin4.MessageItemClass .abstract a {
            color: var(--gray);
            /* -webkit-line-clamp: 6;
            height: 8.4em;
            line-height: 1.4em;*/
        }

    main .itemSkin4.HonorItemClass .more,
    main .itemSkin4.TeamItemClass .more,
    main .itemSkin4.MessageItemClass .more {
        display: none;
    }

.honors .items {
    display: inline-block;
    vertical-align: middle;
    width: 80%;
    overflow: hidden;
}

.honors .ContentsItems {
    white-space: nowrap;
    transition: .5s;
}

.honors .icon {
    width: 28px;
    height: 24px;
    padding: 8px;
    box-sizing: border-box;
    cursor: pointer;
    background-color: #1b8f45;
    border-radius: 50%;
}

    .honors .icon:hover {
        filter: drop-shadow(0 0 3px #0e0e0e61);
    }

.honors .prev {
    transform: rotate(90deg);
    opacity: .2;
}

.honors .next {
    transform: rotate(-90deg);
}

/* footer */
.footer {
    background: #ffffff;
    padding: 50px 100px 0;
    box-shadow: 0 0 30px #dddddd63;
}

    .footer .title3 {
        position: relative;
        display: inline-block;
        padding: 5px 10px;
        vertical-align: middle;
    }

    .footer .title4 {
        position: relative;
        padding: 5px;
    }

    .footer .col {
        display: inline-block;
        vertical-align: top;
        width: 28%;
        padding: 10px;
    }

        .footer .col .logo {
            width: 95px;
            display: inline-block;
            vertical-align: middle;
            padding: 0 5px;
        }

        .footer .col .paragraph {
            padding: 20px 15px;
            text-align: justify;
        }

        .footer .col img {
            width: 20px;
            padding: 5px 5px 0;
        }

        .footer .col .item {
            display: inline-block;
            vertical-align: top;
            margin: 15px 2px;
        }

            .footer .col .item a {
                background: var(--green);
                display: inline-block;
                padding: 5px;
                border-radius: 50%;
                transform: scale(.9);
                transition: .5s;
            }

                .footer .col .item a:hover {
                    transform: scale(1);
                }

        .footer .col .address {
            color: var(--black);
        }

        .footer .col .address {
            text-align: justify;
        }

        .footer .col .phoneCall,
        .footer .col .address,
        .footer .col .emailAddress {
            padding: 5px 15px;
        }

        .footer .col a {
            color: var(--gray);
        }

        .footer .col iframe {
            height: 35vh;
            width: 100%;
            border: none;
        }

/* knkFooter */
.knkFooter {
    color: var(--gray);
    margin-top: 10px;
    border-top: 1px solid #cccccc4d;
}

    .knkFooter .knk2 img {
        width: 50px;
        vertical-align: middle;
    }

    .knkFooter .knk2 > div {
        display: inline-block;
        width: 48%;
        vertical-align: middle;
        color: var(--gray);
    }

    .knkFooter .knk {
        text-align: left;
    }

        .knkFooter .knk div {
            display: inline-block;
            color: var(--gray);
        }

/* main */
main {
    padding: 40px 3vw;
    text-align: center;
    min-height: 40vh;
}

    main .ContentsTitle {
        text-align: center;
        font-size: 25px;
        color: var(--green);
        padding-bottom: 25px;
        font-weight: bold;
        display: inline-block;
        border-bottom: 1px solid;
        border-image: linear-gradient(99deg, rgba(11,158,67,0.23853291316526615) 0%, rgba(11,158,67,1) 49%, rgba(11,158,67,0.3561799719887955) 100%);
    }

    main .ContentsItems {
        text-align: center;
    }

    main .table {
        overflow: auto;
    }

    main table {
        margin: 10px 0;
        border-color: #c7c8c9;
        border-collapse: collapse;
    }

    main .DetailSkin1 .ContentBody table {
        width: 100%;
    }

    main table tr {
        white-space: normal;
    }

        main table tr td {
            padding: 5px;
            text-align: center;
        }
    /* main  DetailSkin1 */

    main .DetailSkin1 .ContentTitle {
        text-align: center;
        font-size: 25px;
        color: var(--green);
        padding-bottom: 25px;
        font-weight: bold;
        display: inline-block;
        border-bottom: 1px solid;
        border-image: linear-gradient(99deg, rgba(11,158,67,0.23853291316526615) 0%, rgba(11,158,67,1) 49%, rgba(11,158,67,0.3561799719887955) 100%);
    }

    main .DetailSkin1 .ContentAbstract {
        text-align: justify;
        color: var(--gray);
    }

    main .DetailSkin1 .ContentBody {
        text-align: right;
    }

        main .DetailSkin1 .ContentBody p {
            text-align: justify;
            color: var(--black);
            margin: 20px 0;
        }

        main .DetailSkin1 .ContentBody a {
            display: inline-block;
            color: #fff;
            background: var(--green);
            padding: 8px 17px;
            box-sizing: border-box;
            border-radius: 0 25px 30px 25px;
            transition: .5s;
            box-shadow: 0 0 20px #066b3157;
            text-align: center;
            margin: 0 5px;
        }

    main .DetailSkin1 .contentImagesDiv {
        text-align: right;
    }

        main .DetailSkin1 .contentImagesDiv .ImageSkin1 {
            width: 25%;
            display: inline-block;
            padding: 10px;
        }

        main .DetailSkin1 .contentImagesDiv img {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 10px;
        }

    main .DetailSkin1 iframe {
        width: 50%;
        height: 60vh;
        display: block;
        border: none;
        border-radius: 15px;
        margin: 35px 15px;
    }

    .news .itemSkin4 img,
    .articles .itemSkin4 img,
    main .itemSkin4.newsItemClass img,
    main .itemSkin4.CouncilItemClass img,
    main .itemSkin4.ArticlesClass img,
    .team .itemSkin7 img,
    .gallery .itemSkin2 img,
    main .itemSkin4.GalleryItemClass img,
    main .itemSkin4.MessageItemClass img {
        height: 21vw;
        object-fit: cover;
    }

    .honors .itemSkin3 img,
    main .itemSkin4.HonorItemClass img,
    main .itemSkin4.TeamItemClass img {
        height: 8vw;
        object-fit: cover;
    }

@media only screen and (max-width: 768px) and (min-width: 0) {
    /* public */
    .container {
        padding: 40px 3vw;
    }

    .title2 {
        font-size: 20px;
    }

    .menuIcon {
        display: inline-block;
        vertical-align: middle;
    }

    /*notices*/
    .notices > div {
        width: 90%;
    }

    .notices .noticeBackImage {
        width: 87%;
    }

    .notices .noticeIcon {
        top: 24%;
        left: 7%;
        width: 30%;
    }

    .notices .noticesContent {
        width: 63%;
    }

    .notices a {
        padding: 15px;
    }

    /* header */
    header {
        padding: 10px;
    }

        header .nav {
            width: 55%;
            background: var(--white);
            transform: translateX(110%);
            position: fixed;
            top: 74px;
            bottom: 0;
            right: 0;
            transition: .5s;
            z-index: 2;
            padding: 10px;
            box-sizing: border-box;
            overflow: auto;
        }

        header .openMenu {
            transform: scale3d(1, 1, 1);
            transition: 0.5s;
            height: auto;
            padding: 10px;
        }

    nav .itemMenu ul {
        position: relative;
    }

    header .nav .navItem ul {
        position: unset;
        width: auto;
        box-shadow: none;
        border-right: 1px solid #ddd;
        border-radius: 0;
        padding: 0 10px;
        height: 0;
        margin: 0;
    }

        header .nav .navItem ul.openSubMenu {
            height: auto;
        }

    header .nav .navItem {
        display: block;
        padding: 10px;
        text-align: right;
    }

    header .logo {
        width: 83%;
    }

        header .logo a {
            font-size: 11px;
        }

        header .logo div {
            width: 75%;
        }

    header .headLeft {
        display: none;
    }

    /* slider */
    .slider img {
        object-position: right;
    }

    .slider .content {
        top: 10%;
        transform: unset;
    }

    .slider .titleSlider {
        font-size: 30px;
    }

    .slider .titleSlider2 {
        font-size: 30px;
    }

    .slider .content .paragraphSlider {
        padding: 15px 4vw;
    }

    .moreBtn {
        margin: 10px 15px;
    }

        .moreBtn a {
            margin: 0;
        }
    /* attributes */
    .attributes {
        transform: translateY(-15%);
    }

        .attributes .item {
            margin: 10px;
            width: calc(100% - 20px);
        }

    /* about */
    .about .right {
        display: block;
        vertical-align: unset;
        padding-left: unset;
        box-sizing: border-box;
        width: 95%;
        margin: auto;
    }

    .about .left {
        display: block;
        vertical-align: unset;
        width: 95%;
        padding-right: unset;
    }

    /*aboutMojtama */
    .aboutMojtama .right, .aboutMojtama .left {
        width: 100%;
        padding: 10px 0;
    }

    .aboutMojtama .item {
        width: 100%;
        margin: 10px 0;
    }

    .aboutMojtama .left .paragraph {
        height: auto;
        overflow: unset;
    }

    /* counter */
    .counter .item {
        display: block;
        vertical-align: unset;
        width: 95%;
        padding: 30px 0;
        border-left: unset;
    }
    /* team */
    .team .itemSkin7 {
        display: block;
        vertical-align: unset;
        width: 90%;
        padding: 50px 0;
        position: relative;
        margin: auto;
    }

    .team .title2 {
        margin-bottom: 0px;
    }
    /* line */
    .line {
        margin: 0 auto 40px;
    }

    /* skills */
    .skills .itemSkin4:nth-child(odd),
    main .itemSkin4.SkillsItemClass:nth-child(odd),
    .skills .itemSkin4:nth-child(even),
    main .itemSkin4.SkillsItemClass:nth-child(even) {
        background-position: -55px 0;
    }

    .skills .paragraph {
        margin-bottom: 50px;
    }

    .skills .itemSkin4 .more {
        top: 60%;
    }

    /* honors */
    .honors .itemSkin3 {
        width: 90%;
        margin: 10px;
    }

    .skills .itemSkin4 {
        min-height: 20vh;
    }

    main .itemSkin4.HonorItemClass,
    main .itemSkin4.TeamItemClass,
    main .itemSkin4.itemSkin4.MessageItemClass,
    .news .itemSkin4,
    .articles .itemSkin4,
    main .itemSkin4.newsItemClass,
    main .itemSkin4.CouncilItemClass,
    .gallery .itemSkin2,
    main .itemSkin4.GalleryItemClass,
    .skills .itemSkin4,
    main .itemSkin4.SkillsItemClass,
    main .itemSkin4.CoachItemClass,
    main .itemSkin4.ArticlesClass {
        width: 100%;
        margin: 10px 0;
    }

        .honors .itemSkin3 .image,
        main .itemSkin4.HonorItemClass .image,
        main .itemSkin4.TeamItemClass .image,
        main .itemSkin4.MessageItemClass .image {
            width: 30%;
            margin: auto;
            padding: 20px 0;
        }

    .honors .itemSkin3 .abstract {
        padding: 0 25px 20px;
    }

    main .itemSkin4.CoachItemClass {
        padding: 20px;
    }

    .skills .itemSkin4 .image, main .itemSkin4.SkillsItemClass .image {
        float: unset;
        width: 100%;
    }

    .skills .itemSkin4 img, main .itemSkin4.SkillsItemClass img {
        height: 35vh;
        margin: 0;
        margin-bottom: 10px;
    }

    .skills .itemSkin4 .title, main .itemSkin4.SkillsItemClass .title, .skills .itemSkin4 .abstract, main .itemSkin4.SkillsItemClass .abstract, .skills .itemSkin4 .more, main .itemSkin4.SkillsItemClass .more {
        width: 100%;
    }

    /* news */
    /*.news .left {
        display: none;
    }*/

    /*.news .right{
        width:100%;
    }*/

    /* footer */
    .footer {
        background: #f8f9fa;
        padding: 50px 3vw;
    }

        .footer .col {
            display: block;
            vertical-align: unset;
            width: 95%;
            padding: 10px;
        }

            .footer .col .title3 {
                width: 67%;
                font-size: 15px;
                padding: 0;
            }

    .knkFooter .knk2 > div {
        width: 100%;
        text-align: center;
    }

    /* main */

    main .ContentsTitle {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    /* main DetailSkin1 */
    main .DetailSkin1 .ContentTitle {
        padding-bottom: 0;
        margin-bottom: 10px;
        font-size: 20px;
    }

    main .DetailSkin1 iframe {
        width: 95%;
        margin: 35px auto;
        height: 60vh;
        border-radius: 15px;
        border: none;
    }

    main .DetailSkin1 .contentImagesDiv .ImageSkin1 {
        width: 95%;
        display: block;
        padding: 10px;
    }

    .news .itemSkin4 img,
    .articles .itemSkin4 img,
    main .itemSkin4.newsItemClass img,
    main .itemSkin4.CouncilItemClass img,
    main .itemSkin4.ArticlesClass img,
    .team .itemSkin7 img,
    .gallery .itemSkin2 img,
    main .itemSkin4.GalleryItemClass img,
    main .itemSkin4.MessageItemClass img {
        height: 30vh;
    }

    .honors .itemSkin3 img,
    main .itemSkin4.HonorItemClass img,
    main .itemSkin4.TeamItemClass img {
        height: 14vh;
    }
}