body {
    font-family: "Neo Sans Arabic";
    font-size: 16px;
    line-height: 1.6;
    overflow: hidden;
    overflow-x: hidden;
    color: #868F9B;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Neo Sans Arabic";
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 20px;
    color: #10161A;
}

.over-n {
    overflow: hidden !important;
}


/*.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 {*/


/*float: right !important;*/


/*}*/

.float-r-footer {
    float: right !important;
}

h1 {
    font-size: 54px
}

h2 {
    font-size: 36px
}

h3 {
    font-size: 21px
}

h4 {
    font-size: 18px
}

h5 {
    font-size: 16px
}

a {
    color: #444544;
    text-decoration: none;
    -webkit-transition: .2s opacity;
    transition: .2s opacity
}

a:hover,
a:focus {
    text-decoration: none;
    outline: none;
    opacity: 1;
    color: #444544
}

.main-color {
    color: #444544
}


/* loader */

#preloader {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #FFF;
    z-index: 99999
}

.preloader img {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 45%;
    width: 80px;
    z-index: 999;
}

.loader {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
}

.dot {
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 100%;
    display: inline-block;
    animation: slide 1s infinite;
}

.dot:nth-child(1) {
    animation-delay: 0.1s;
    background: #000;
}

.dot:nth-child(2) {
    animation-delay: 0.2s;
    background: #000;
}

.dot:nth-child(3) {
    animation-delay: 0.3s;
    background: #000;
}

.dot:nth-child(4) {
    animation-delay: 0.4s;
    background: #000;
}

.dot:nth-child(5) {
    animation-delay: 0.5s;
    background: #000;
}

@-moz-keyframes slide {
    0% {
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(2);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes slide {
    0% {
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(2);
    }
    100% {
        transform: scale(1);
    }
}

@-o-keyframes slide {
    0% {
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes slide {
    0% {
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(2);
    }
    100% {
        transform: scale(1);
    }
}


/* Wave animations */

@keyframes wave_1 {
    from {
        transform: rotate(0deg) translatey(-0.61em) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translatey(-0.61em) rotate(-360deg);
    }
}

@keyframes wave_2 {
    from {
        transform: rotate(0deg) translatey(-0.77em) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translatey(-0.77em) rotate(-360deg);
    }
}

@keyframes wave_3 {
    from {
        transform: rotate(0deg) translatey(-0.96em) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translatey(-0.96em) rotate(-360deg);
    }
}

@keyframes wave_4 {
    from {
        transform: rotate(0deg) translatey(-1.2em) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translatey(-1.2em) rotate(-360deg);
    }
}

@keyframes wave_5 {
    from {
        transform: rotate(0deg) translatey(-1.5em) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translatey(-1.5em) rotate(-360deg);
    }
}

.show-lazy {
    display: block
}

.hide-section {
    display: none !important;
    transition: 0.7s;
}

.home-content1 {
    margin-top: 75px
}

.home-content1 h1 {
    color: #909090;
    font-size: 50px;
    font-weight: 300
}

.home-content1 p {
    color: #4A4A4A;
    font-size: 16px;
    /* font-weight:500 */
}

::-moz-selection {
    background-color: #444544;
    color: #FFF
}

::selection {
    background-color: #444544;
    color: #FFF
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none
}

.section {
    position: relative
}

.md-padding {
    padding-top: 70px
}

.sm-padding {
    padding-top: 60px;
    padding-bottom: 60px
}

.image-content1 img {
    width: 100%
}

.section-header {
    position: relative;
    margin-bottom: 35px;
    padding: 0 190px;
    transition: .5s
}

.section-header .title {
    font-weight: 400;
    font-size: 36px;
    color: #4A4A4A;
    line-height: 50px;
    transition: .5s
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="url"],
input[type="tel"],
textarea {
    height: 40px;
    width: 100%;
    border: none;
    background: #F4F4F4;
    border-bottom: 2px solid #EEE;
    color: #354052;
    padding: 0 10px;
    opacity: .5;
    -webkit-transition: .2s border-color, .2s opacity;
    transition: .2s border-color, .2s opacity
}

textarea {
    padding: 10px;
    min-height: 80px;
    resize: vertical
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus {
    border-color: #444544;
    opacity: 1
}

.main-btn,
.white-btn,
.outline-btn {
    display: inline-block;
    padding: 10px 35px;
    margin: 3px;
    border: 2px solid transparent;
    border-radius: 3px;
    -webkit-transition: .2s opacity;
    transition: .2s opacity
}

.main-btn {
    background: #444544;
    color: #FFF
}

.white-btn {
    background: #FFF;
    color: #10161A !important
}

.outline-btn {
    background: transparent;
    color: #444544 !important;
    border-color: #444544
}

.main-btn:hover,
.white-btn:hover,
.outline-btn:hover {
    opacity: .8
}

.navbar-brand {
    padding: 0
}

.navbar-brand .logo {
    width: 50px;
    display: block;
    margin-top: 0;
}

.navbar-right {
    float: left !important;
    margin-right: 90px !important;
}

#nav.nav-transparent:not(.fixed-nav) .main-nav>li>a {
    padding: 20px 0;
}

.navbar-header {
    float: right;
}

#nav {
    padding: 10px 0;
    background: #FFF;
    -webkit-transition: .5s padding;
    transition: .5s padding;
}

#nav.navbar {
    border: none;
    border-radius: 0;
    margin-bottom: 0
}

#nav {
    transition: 0.7s;
}

#nav.fixed-nav {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    padding: 10px 0;
    background-color: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 0 15px 0 #ccc;
    transition: 0.7s;
}

#nav.nav-transparent {
    background: transparent
}

.nav__menu-item {
    display: inline-block;
    position: relative;
    direction: rtl;
}

.nav__menu-item i {
    font-size: 15px;
    margin-left: 3px;
    font-weight: 500;
}

.padding-0 {
    padding: 0 !important;
}

.nav__menu-item:hover {
    background-color: transparent;
}

.nav__menu-item:hover .nav__submenu {
    display: block;
    transition: 0.7s;
}

.nav__submenu {
    font-weight: 300;
    text-transform: none;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: none;
    position: absolute;
    width: 160px;
    background-color: #f7f9ff;
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
    transition: 0.7s;
    z-index: 99;
}

.nav__submenu li {
    width: 100%;
    color: #909090;
    padding: 7px 0 !important;
    border-bottom: 1px solid #dadde4;
    border-right: 0px solid transparent;
    transition: 0.7s;
}

.nav__submenu li:hover {
    border-right: 5px solid #444544;
    transition: 0.7s;
}

.nav__submenu li:last-of-type {
    border-bottom: 0;
}

.nav__submenu li a {
    color: #909090;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
    display: block;
    cursor: pointer;
    transition: 0.7s;
}

.nav__submenu li a:hover {
    opacity: 1;
}

.nav__submenu-item:hover a {
    color: #444544;
    transition: 0.7s;
}

@media only screen and (min-width: 992px) {
    .hidden-lg {
        display: none !important;
    }
    .user.mobile {
        display: none
    }
    .main-nav li {
        padding: 0 25px;
        text-align: center;
        font-family: "Neo Sans Arabic";
        font-weight: 500;
        float: right;
    }
    .main-nav li a {
        font-size: 15px;
        -webkit-transition: .2s color;
        transition: .2s color;
        display: block;
    }
    .main-nav>li>a {
        color: #909090;
        padding: 20px 0;
        font-weight: 500;
        font-size: 16px;
        cursor: pointer;
        transition: 0.7s;
    }
    #nav.nav-transparent:not(.fixed-nav) .main-nav>li>a {
        color: #909090;
        font-weight: 500;
        font-size: 16px;
        padding: 20px 0;
        transition: 0.7s;
    }
    .main-nav>li>a:hover,
    .main-nav>li>a:focus,
    .main-nav>li.active>a {
        background: transparent;
        color: #444544 !important;
        transition: 0.7s;
    }
    .main-nav>li>a:after {
        content: "";
        display: block;
        background-color: #C6A779;
        height: 10px;
        margin: auto;
        left: 0;
        right: 0;
        border-radius: 10px;
        width: 0;
        -webkit-transition: .1s width;
        transition: .1s width;
        position: absolute;
        bottom: 5px;
    }
    .main-nav>li>a:hover:after,
    .main-nav>li.active>a:after {
        width: 10px
    }
    .has-dropdown {
        position: relative
    }
    .has-dropdown>a:before {
        font-family: 'FontAwesome';
        content: "\f054";
        font-size: 6px;
        margin-left: 6px;
        float: right;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transition: .2s transform;
        transition: .2s transform
    }
    .dropdown {
        position: absolute;
        right: -50%;
        top: 0;
        background-color: #444544;
        width: 200px;
        -webkit-box-shadow: 0 5px 5px -5px rgba(53, 64, 82, 0.2);
        box-shadow: 0 5px 5px -5px rgba(53, 64, 82, 0.2);
        -webkit-transform: translateY(15px) translateX(50%);
        -ms-transform: translateY(15px) translateX(50%);
        transform: translateY(15px) translateX(50%);
        opacity: 0;
        visibility: hidden;
        -webkit-transition: .2s all;
        transition: .2s all
    }
    .main-nav>.has-dropdown>.dropdown {
        top: 100%;
        right: 50%
    }
    .main-nav>.has-dropdown>.dropdown .dropdown.dropdown-left {
        right: 150%
    }
    .dropdown li a {
        display: block;
        color: #FFF;
        border-top: 1px solid rgba(250, 250, 250, 0.1);
        padding: 10px 0
    }
    .dropdown li:nth-child(1) a {
        border-top: none
    }
    .has-dropdown:hover>.dropdown {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0px) translateX(50%);
        -ms-transform: translateY(0px) translateX(50%);
        transform: translateY(0px) translateX(50%)
    }
    .has-dropdown:hover>a:before {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    .nav-collapse {
        display: none
    }
}

.nav-collapse {
    position: relative;
    float: right;
    width: 40px;
    height: 40px;
    margin-right: 5px;
    cursor: pointer;
    z-index: 99999
}

.nav-collapse span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25px
}

.nav-collapse span:before,
.nav-collapse span:after {
    content: "";
    display: block
}

.nav-collapse span,
.nav-collapse span:before,
.nav-collapse span:after {
    height: 3px;
    background: #444544;
    -webkit-transition: .2s all;
    transition: .2s all
}

.nav-collapse span:before {
    -webkit-transform: translate(0%, 8px);
    -ms-transform: translate(0%, 8px);
    transform: translate(0%, 8px)
}

.nav-collapse span:after {
    -webkit-transform: translate(0%, -11px);
    -ms-transform: translate(0%, -11px);
    transform: translate(0%, -11px)
}

#nav.open .nav-collapse span {
    background: transparent
}

#nav.open .nav-collapse span:before {
    -webkit-transform: translateY(0px) rotate(-135deg);
    -ms-transform: translateY(0px) rotate(-135deg);
    transform: translateY(0px) rotate(-135deg);
    background: #fff
}

#nav.open .nav-collapse span:after {
    -webkit-transform: translateY(-3px) rotate(135deg);
    -ms-transform: translateY(-3px) rotate(135deg);
    transform: translateY(-3px) rotate(135deg);
    background: #fff
}

header {
    position: relative
}

#home {
    height: 80px;
    background: #fff;
    position: relative;
    z-index: 99;
    border-bottom: 1px solid #fff1dc;
    box-shadow: 0 0 0 !important;
}


/* start of slider style of home page */

.slider-section {
    background: #fff;
    height: 550px;
    overflow: hidden;
    position: relative;
}

.slider-section .item {
    width: 100%;
    height: 100%;
}

.slider-section .owl-carousel {
    width: 100%;
    height: 100%;
}

.slider-section .owl-carousel .owl-stage {
    height: 100%;
    width: 100%;
}

.slider-section .owl-carousel.owl-rtl .owl-item {
    width: 100%;
    height: 100%;
}

.slider-section .item img {
    width: 100%;
    height: 100%;
}

.slider-section .item .slider-text {
    position: absolute;
    left: 0;
    width: 85%;
    right: 0;
    margin: 0 auto;
    text-align: right;
    top: 50%;
    background: transparent;
    padding: 15px 10px;
}

.slider-section .item .slider-text h3 {
    font-size: 65px;
    color: #fff;
    font-weight: 500;
    line-height: 43px;
    margin-bottom: 0;
}

.slider-section .owl-carousel .owl-stage-outer {
    height: 100%;
}

.slider-section .owl-theme .owl-nav {
    margin: 0;
    position: absolute;
    font-size: 40px;
    color: #fff;
    top: 0px;
    width: 100%;
}

.slider-section button.owl-prev {
    position: absolute;
    right: 20px;
    width: 45px;
    height: 45px;
    border-radius: 50px !important;
    outline: none;
    margin: 0 !important;
    top: 300px;
    display: block;
    background: rgba(0, 0, 0, 0.3) !important;
    line-height: 40px !important;
    font-size: 35px !important;
    transition: 0.5s;
}

.slider-section button.owl-prev:hover {
    background: #000 !important;
    transition: 0.5s;
}

.slider-section button.owl-next {
    position: absolute;
    left: 20px;
    margin: 0 !important;
    border-radius: 50px !important;
    outline: none;
    width: 45px;
    height: 45px;
    z-index: 99;
    top: 300px;
    background: rgba(0, 0, 0, 0.3) !important;
    line-height: 40px !important;
    font-size: 35px !important;
    transition: 0.5s;
}

.slider-section button.owl-next:hover {
    background: #000 !important;
    transition: 0.5s;
}

.slider-section button span {
    display: block;
    width: 100%;
    height: 100%;
}

.slider-section .owl-theme .owl-dots,
.slider-section .owl-theme .owl-nav {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 45px;
    z-index: 999999;
}

.slider-section .owl-theme .owl-dots .owl-dot {
    outline: none;
}

.slider-section .owl-theme .owl-dots .owl-dot.active span {
    background: #fff;
    opacity: 1;
}

.slider-section .owl-theme .owl-dots .owl-dot span {
    width: 25px;
    height: 5px;
    margin: 5px 3px;
    background: #D6D6D6;
    display: block;
    opacity: 0.5;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    border-radius: 5px;
}

.float-r {
    float: right !important;
}

.all-parts {
    padding: 70px 0 0px;
    direction: rtl;
    background: #fff;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

input:focus:-ms-input-placeholder {
    color: transparent;
}


/* end of index page style */

.banner-setion-all {
    background: url(../img/header/1.png);
    height: 200px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}

.banner-setion-all:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: rgba(0, 0, 0, 0.7);
    left: 0;
    right: 0;
    top: 0;
}

.banner-setion-all h4 {
    text-align: center;
    line-height: 200px;
    color: #fff;
    font-size: 30px;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

@media (max-width: 990px) {
    .banner-setion-all {
        background-size: cover;
    }
    .banner-setion-all h3 {
        font-size: 30px;
    }
}


/* start of about page style  */


/*start of footer*/

.footer-all {
    background: #444544;
    padding: 65px 0 30px;
    background-attachment: fixed;
    margin-bottom: 0 !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.footer-all:before {
    content: "";
    position: absolute;
    right: -30px;
    top: -30px;
    width: 200px;
    height: 200px;
    background: #C6A779;
    border-radius: 100%;
    opacity: 0.7;
}

.footer-all:after {
    content: "";
    position: absolute;
    left: -30px;
    top: -30px;
    width: 200px;
    height: 200px;
    background: #C6A779;
    border-radius: 100%;
    opacity: 0.7;
}

.footer-all .location-footer .title {
    margin-bottom: 30px;
    text-align: right;
}

.footer-all .location-footer .title h3 {
    font-size: 2٠px;
    color: #fff;
    font-weight: 500;
}

.footer-all .location-footer .all-location {
    margin-bottom: 25px;
}

.footer-all .location-footer .all-location .location {
    display: flex;
    direction: rtl;
}

.footer-all .location-footer .all-location .location i {
    font-size: 20px;
    color: #fff;
    margin-left: 15px;
}

.footer-all .location-footer .all-location .location h3 {
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    line-height: 20px;
}

.footer-all .location-footer .all-location .location a {
    font-size: 15px;
    color: #fff;
    font-weight: 500;
    line-height: 20px;
}

.footer-all .location-footer .all-links .location i {
    margin-left: 9px;
    font-size: 20px;
}

.footer-all .location-footer .all-links .location {
    margin-bottom: 15px;
    transition: 0.7s;
}

.footer-all .location-footer .all-links .location:hover {
    padding-right: 5px;
    transition: 0.7s;
}

.footer-all .dis-footer .title {
    margin-bottom: 30px;
    background: #fff;
    border-radius: 10px;
}

.title-image {
    margin-bottom: 10px !important;
}

.footer-all .dis-footer {
    text-align: center;
}

.footer-all .dis-footer .title img {
    width: 200px;
    margin: 0 auto 20px;
}

.footer-all .dis-footer .all-dis .dis p {
    font-size: 13px;
    color: #fff;
    line-height: 22px;
}

.footer-all .dis-footer .all-dis .dis ul {
    direction: ltr;
    text-align: center;
}

.footer-all .dis-footer .all-dis .dis ul li {
    display: inline-block;
    margin: 10px 2px 0;
}

.footer-all .dis-footer .all-dis .dis ul li a {
    font-size: 16px;
    color: #fff;
    transition: 0.7s;
    border: 0px solid #fff;
    /* padding: 5px; */
    width: 32px;
    /* border-radius: 50px; */
    height: 32px;
    line-height: 32px;
    display: block;
    text-align: center;
    border-radius: 5px;
}

.footer-all .dis-footer .all-dis .dis ul li a:hover {
    color: #fff;
    transition: 0.7s;
}

.footer-all .contact-footer .title {
    margin-bottom: 10px;
}

.footer-all .contact-footer .title h3 {
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    text-align: right;
}

.footer-end {
    background: #C6A779;
    direction: rtl;
    padding: 15px 0 0;
    margin-bottom: 0 !important;
}

.footer-end .copy-right {
    text-align: center;
    direction: rtl;
    width: 100%;
    margin: 0 auto;
}

.footer-end .copy-right h3 {
    text-align: center;
    display: inline-block;
    font-size: 14px;
    color: #444544;
    outline: none;
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 15px;
}

.footer-end .copy-right a {
    text-align: center;
    display: inline-block;
    font-size: 14px;
    color: #444544;
    outline: none;
    text-decoration: none;
    font-weight: 500;
}

#map {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.footer-end {
    background: #C6A779;
    direction: rtl;
    padding: 15px 0 0;
    margin-bottom: 0 !important;
}

.footer-end .copy-right {
    text-align: center;
    direction: ltr;
    width: 100%;
    margin: 0 auto;
}

.footer-end .copy-right h3 {
    text-align: center;
    display: inline-block;
    font-size: 14px;
    color: #444544;
    outline: none;
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 15px;
}

.footer-end .copy-right a {
    text-align: center;
    display: inline-block;
    font-size: 14px;
    color: #444544;
    outline: none;
    text-decoration: none;
    font-weight: 500;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}


/*=====================================new style================================*/


/*header first*/

.first-header {
    width: 100%;
    background: #fff1dc;
    position: relative;
    z-index: 999;
    line-height: 40px;
    border-bottom: 1px solid #444544;
}

.clock {
    color: #444544;
    background: transparent;
    display: inline-block;
    direction: rtl;
    width: 100%;
    transition: 0.7s;
}

#Date {
    font-size: 13px;
    text-align: right;
    line-height: 28px;
    display: inline-block;
}

.clock ul {
    margin-right: 4px;
    padding: 0px;
    list-style: none;
    text-align: right;
    direction: ltr;
    display: inline-block;
}

.clock ul li {
    display: inline;
    font-size: 13px;
    text-align: right;
}

#point {
    position: relative;
    -moz-animation: mymove 1s ease infinite;
    -webkit-animation: mymove 1s ease infinite;
}

@-webkit-keyframes mymove {
    0% {
        opacity: 1.0;
        text-shadow: 0 0 20px #00c6ff;
    }
    50% {
        opacity: 0;
        text-shadow: none;
    }
    100% {
        opacity: 1.0;
        text-shadow: 0 0 20px #00c6ff;
    }
}

@-moz-keyframes mymove {
    0% {
        opacity: 1.0;
        text-shadow: 0 0 20px #00c6ff;
    }
    50% {
        opacity: 0;
        text-shadow: none;
    }
    100% {
        opacity: 1.0;
        text-shadow: 0 0 20px #00c6ff;
    }
}

#islamicDate {
    direction: rtl;
    font-size: 13px;
    color: #444544;
    line-height: 29px;
    margin-bottom: 0;
    display: inline-block;
}

#min {
    border-right: 1px solid #444544;
    padding-right: 7px;
}

.clock h3 {
    direction: rtl;
    font-size: 13px;
    color: #444544;
    line-height: 29px;
    margin-bottom: 0;
    display: inline-block;
    margin-right: 5px;
}

.right-section {}

.right-section .img-flag {
    width: 25px;
    position: absolute;
    top: 12px;
}

.nav-sub-new {
    z-index: 999;
    width: 50px;
    text-align: center;
    right: 3px;
    top: 35px;
    border-radius: 5px;
    background: #444544;
    transition: 0.7s;
}

.nav-sub-new:hover {
    transition: 0.7s;
}

.nav-sub-new img {
    width: 25px;
    margin: 0 auto;
    cursor: pointer;
}

.nav-sub-new li:hover {
    border-right: 0;
}

.nav-sub-new li {
    border-bottom: 1px solid #444544;
}

.right-section ul li {
    position: relative;
    display: inline-block;
    padding: 0 15px;
    color: #444544;
}

.right-section ul li .login-link {
    color: #444544;
    font-size: 14px;
    text-align: center;
    font-weight: normal;
}

.right-section ul li b {
    visibility: hidden;
    z-index: 0;
    height: 0;
    width: 0;
    opacity: 0;
}

.right-section ul .nav__submenu-item {
    border-right: 0;
    display: block;
}

.right-section ul .search-icon {
    padding: 0 10px;
}

.right-section ul .search-icon i {
    font-size: 18px;
    color: #fff;
    font-weight: 100;
}

.sb-search {
    position: absolute !important;
    margin-top: 0px;
    width: 0%;
    min-width: 40px;
    height: 100%;
    overflow: hidden;
    -webkit-transition: width 0.6s;
    -moz-transition: width 0.6s;
    transition: width 0.6s;
    -webkit-backface-visibility: hidden;
}

.sb-search-input {
    position: absolute;
    top: 0;
    right: 0px;
    text-align: right;
    border: none;
    outline: none;
    background: #444544;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 10;
    padding: 20px 20px 20px 65px;
    font-family: inherit;
    font-size: 15px;
    direction: rtl;
    color: #fff;
}

input[type="search"].sb-search-input {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
}

.sb-search-input::-webkit-input-placeholder {
    color: #fff;
}

.sb-search-input:-moz-placeholder {
    color: #fff;
}

.sb-search-input::-moz-placeholder {
    color: #fff;
}

.sb-search-input:-ms-input-placeholder {
    color: #fff;
}

.sb-icon-search {
    width: 40px;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}

.sb-icon-search {
    color: #fff;
    background: transparent;
    z-index: 90;
    font-size: 22px;
}

.sb-icon-search:before {
    content: "";
}

.sb-search.sb-search-open,
.no-js .sb-search {
    width: 100%;
}

.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
    background: transparent;
    color: #fff;
    z-index: 11;
}

.news-section {
    width: 90%;
    padding: 9px 15px;
    background: #fff;
    box-shadow: 0 0 10px -2px #999;
    position: absolute;
    bottom: 10px;
    z-index: 9;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
}

.news-section .title {
    text-align: right;
    border-left: 1px solid #9ec1ed;
}

.news-section .title h3 {
    margin-bottom: 0;
    font-size: 16px;
    color: #464646;
    text-align: center;
    line-height: 30px;
}

.news-slider {
    overflow: hidden;
    position: relative;
}

.news-slider ul li {
    display: inline-block;
}

.ticker {
    width: 100%;
    overflow: hidden;
    direction: initial;
}

.ticker p {
    margin: 0;
}

.ticker a {
    color: #464646;
}

.ticker ul {
    display: flex;
    padding: 0;
    margin: 0;
}

.ticker ul li {
    padding: 0 50px;
    position: relative;
    text-align: center;
}

.ticker ul li::after {
    position: absolute;
    right: -20px;
    top: 0;
    content: url("../img/fav/news.png");
}

.ticker ul li:first-of-type {
    padding: 0 50px 0 0px;
}

.padding-l-0 {
    padding-left: 0 !important;
}

.padding-r-0 {
    padding-right: 0 !important;
}


/*first section on home page*/

.first-section {
    margin-bottom: 80px;
}

.first-section .title {
    text-align: center;
    margin-bottom: 50px;
}

.first-section .title h3 {
    font-size: 23px;
    margin-bottom: 15px;
    color: #444544;
    position: relative;
    display: inline-block;
    font-weight: 700;
}

.first-section .title h3 span {
    position: absolute;
    width: 75%;
    height: 4px;
    background: #C6A779;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -15px;
    border-radius: 100px;
}

.first-section .title h3 span:after {
    content: "";
    position: absolute;
    right: -11px;
    bottom: -1px;
    width: 8px;
    height: 8px;
    background: #444544;
    border-radius: 500px;
}

.first-section .title h3 span:before {
    content: "";
    position: absolute;
    left: -11px;
    bottom: -1px;
    width: 8px;
    height: 8px;
    background: #444544;
    border-radius: 500px;
}

.first-section .title img {
    margin: 0 auto;
    width: 65px;
}

.first-section .about-logo {
    text-align: center;
}

.first-section .about-logo img {
    margin: 0 auto;
    width: 100%;
}

.first-section .about-text {
    padding-left: 100px;
    padding-top: 20px;
}

.first-section .about-text p {
    font-size: 17px;
    line-height: 26px;
    margin-bottom: 25px;
}

.link-hover {
    line-height: 35px;
    height: 40px;
    font-size: 17px;
    text-align: center;
    width: 150px;
    cursor: pointer;
    display: block;
    color: #444544;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    position: relative;
    border: 1px solid #444544;
    overflow: hidden;
    border-radius: 25px 0;
}

.link-hover:hover {
    background: #444544;
    color: #fff;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}


/*start of second section on home*/

.second-section {
    background: url(../img/header/banner1.png);
    padding: 50px 20px 30px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}

.second-section .title {
    text-align: center;
    margin-bottom: 70px;
}

.second-section .title h3 {
    font-size: 27px;
    margin-bottom: 15px;
    color: #fff;
}

.second-section .title img {
    margin: 0 auto;
    width: 65px;
}

.second-section .services-section ul {
    width: 100%;
    text-align: center;
}

.second-section .services-section ul li {
    display: inline-block;
    width: 24%;
    margin-bottom: 40px;
}

.second-section .services-section .service {
    background: #fff;
    width: 240px;
    text-align: center;
    padding: 20px 0;
    border-radius: 10px;
    margin: 0 auto;
    transition: 0.7s;
    cursor: pointer;
}

.second-section .services-section .service:hover {
    transition: 0.7s;
    box-shadow: 0 6px 0px 0px #444544;
}

.second-section .services-section .service a {
    display: block;
}

.second-section .services-section .service a img {
    width: 80px;
    margin: 0 auto 20px;
}

.second-section .services-section .service a h3 {
    font-size: 20px;
    text-align: center;
    color: #444544;
    margin-bottom: 0;
}


/*third section on home page*/

.third-section {
    padding-top: 60px;
    padding-bottom: 60px;
    background: #f5f5f5;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

.third-section .title {
    text-align: center;
    margin-bottom: 50px;
}

.third-section .title h3 {
    font-size: 27px;
    margin-bottom: 15px;
    color: #444544;
}

.third-section .title img {
    margin: 0 auto;
    width: 65px;
}

.videoWrapper {
    position: relative;
    width: 100%;
    height: 0;
}

.videoWrapper43 {
    padding-top: 75%;
}

.videoWrapper169 {
    padding-top: 50%;
}

.videoIframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

.videoPoster {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border: 0;
    outline: none;
    background-position: 50% 50%;
    background-size: 100% 100%;
    background-size: cover;
    text-indent: -999em;
    overflow: hidden;
    opacity: 1;
    -webkit-transition: opacity 800ms, height 0s;
    -moz-transition: opacity 800ms, height 0s;
    transition: opacity 800ms, height 0s;
    -webkit-transition-delay: 0s, 0s;
    -moz-transition-delay: 0s, 0s;
    transition-delay: 0s, 0s;
}

.videoPoster:before {
    content: '';
    background: url("../img/icon/player.png");
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 37%;
    left: 0;
    right: 0;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    border-radius: 100%;
    -webkit-transition: border-color 300ms;
    -moz-transition: border-color 300ms;
    transition: border-color 300ms;
}

.videoPoster:after {
    content: '';
    background: rgba(255, 255, 255, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    border-radius: 0;
    -webkit-transition: border-color 300ms;
    -moz-transition: border-color 300ms;
    transition: border-color 300ms;
}

.videoWrapperActive .videoPoster {
    opacity: 0;
    height: 0;
    -webkit-transition-delay: 0s, 800ms;
    -moz-transition-delay: 0s, 800ms;
    transition-delay: 0s, 800ms;
}

.close-video {
    position: absolute;
    bottom: 15px;
    z-index: 1;
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 5px;
    width: 100px;
    height: 30px;
    font-size: 15px;
    right: 15px;
    line-height: 20px;
    outline: none;
}

.html5-video-player a {
    display: none !important;
}

.ads-image {
    width: 100%;
    margin-top: 50px;
    height: 250px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 10px 0 #ddd;
    border-radius: 10px;
}

.ads-image img {
    width: 100%;
    border-radius: 10px;
    height: 100%;
}

.question-section {
    margin-top: 50px;
    background: #fff;
    box-shadow: 0 0 10px 0 #ddd;
    border-radius: 10px;
    width: 100%;
    padding: 20px;
}

.question-section .title {
    text-align: right;
    margin-bottom: 17px;
}

.question-section .title h3 {
    font-size: 20px;
    margin-bottom: 0;
    color: #444544;
}

.question-section form {}

.question-section form .question-label {
    color: #444544;
    font-weight: 500;
    font-size: 17px;
}

.question-section .radio input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.question-section .radio input[type="radio"]+.radio-label:before {
    content: '';
    background: #fff;
    border-radius: 100%;
    border: 1px solid #444544;
    display: inline-block;
    width: 15px;
    height: 15px;
    position: relative;
    top: 2px;
    margin-left: 10px;
    /* vertical-align: top; */
    cursor: pointer;
    text-align: center;
    transition: all 250ms ease;
}

.question-section .radio input[type="radio"]:checked+.radio-label:before {
    background-color: #444544;
    box-shadow: inset 0 0 0 0px #fff;
    border-color: #444544;
}

.question-section .radio input[type="radio"]:focus+.radio-label:before {
    outline: none;
    border-color: #444544;
}

.question-section .radio label {
    padding-left: 0;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
    font-size: 16px;
    color: #444544;
    cursor: pointer;
}

.button-question {
    text-align: center;
}

.button-question button {
    width: 110px;
    background: #444544;
    color: #fff;
    border: #444544;
    border-radius: 27px;
    font-size: 15px;
    height: 35px;
    line-height: 28px;
    cursor: pointer;
    transition: 0.7s;
    border: 1px solid #444544;
}

.button-question button:hover {
    background: #fff;
    transition: 0.7s;
    color: #444544;
}


/*four section on home page*/

.four-section {
    margin-bottom: 40px;
    padding-top: 60px;
}

.four-section .title {
    text-align: center;
    margin-bottom: 50px;
}

.four-section .title h3 {
    font-size: 27px;
    margin-bottom: 15px;
    color: #444544;
}

.four-section .title img {
    margin: 0 auto;
    width: 65px;
}

.owl-carousel-two .owl-nav {
    display: block !important;
}

.owl-carousel-two .owl-nav .owl-prev {
    right: -60px !important;
    position: absolute !important;
    top: 50px !important;
    font-size: 92px !important;
    color: transparent !important;
    height: 50px !important;
    outline: none !important;
    background: url("../img/icon/right.png") !important;
    background-position: center !important;
    background-size: 50% !important;
    background-repeat: no-repeat !important;
    cursor: pointer;
}

.owl-carousel-two .owl-nav .owl-next {
    left: -60px !important;
    position: absolute !important;
    top: 50px !important;
    font-size: 92px !important;
    color: transparent !important;
    height: 50px !important;
    outline: none !important;
    background: url(../img/icon/left.png) !important;
    background-position: center !important;
    background-size: 50% !important;
    background-repeat: no-repeat !important;
    cursor: pointer;
}

.part-image {
    width: 230px;
    height: 140px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 10px 0 #d9d9d9;
}

.part-image img {
    height: 100px;
    width: 120px !important;
    margin: 20px auto 0;
}

.owl-carousel-two .owl-stage-outer {
    padding: 10px 0;
}

.all-location input {
    background: transparent;
    opacity: 1;
    margin-bottom: 15px;
    height: 40px;
    border-radius: 0px;
    font-size: 15px;
    transition: 0.7s;
    outline: none;
    border-bottom: 1px solid #fff !important;
    text-align: right;
}

.all-location input:focus {
    transition: 0.7s;
}

.all-location input:focus::placeholder {
    color: transparent !important;
    transition: 0.7s;
}

.all-location input::placeholder {
    color: #fff;
    transition: 0.7s;
}

.all-location textarea {
    background: transparent;
    opacity: 1;
    margin-bottom: 10px;
    height: 40px;
    border-radius: 0px;
    font-size: 15px;
    resize: none;
    text-align: right;
    outline: none;
    border-bottom: 1px solid #fff;
}

.all-location textarea:focus {
    transition: 0.7s;
}

.all-location textarea::placeholder {
    color: #fff;
    transition: 0.7s;
}

.all-location textarea:focus::placeholder {
    color: transparent !important;
    transition: 0.7s;
}

.all-location button {
    width: 100px;
    background: #C6A779;
    border: 1px solid transparent;
    color: #fff;
    font-size: 15px;
    height: 35px;
    line-height: 30px;
    border-radius: 5px;
    margin: 0 auto;
    text-align: center;
    display: block;
    outline: none;
    transition: 0.7s;
}

.all-location button:hover {
    transition: 0.7s;
    background: transparent;
    color: #fff;
    border-color: #fff;
}

.slider-section .owl-theme .owl-nav {
    height: 0;
}

.slider-section .owl-theme .owl-dots {
    bottom: 20px;
}

.sb-search.mobile {
    display: none;
}


/*start of about section*/

.all-sections {
    padding: 70px 0;
    direction: rtl;
}

.all-about {
    text-align: center;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px 1px #ddd;
}

.all-about .about-image {
    text-align: center;
}

.all-about .about-image img {
    width: 200px;
    margin: 30px auto 30px;
}

.all-about .about-text {
    margin-bottom: 30px;
}

.all-about .about-text h3 {
    font-size: 20px;
    font-weight: 500;
    color: #444544;
}

.all-about .about-text p {
    font-size: 15px;
    font-weight: 300;
    color: #444544;
    padding: 0 100px;
}


/*start of news page style*/

.all-news {
    background: #010a33;
    text-align: center;
    padding-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 0;
    width: 90%;
    margin: 0 auto 40px;
}

.all-news:after {
    content: "";
    position: absolute;
    left: -25px;
    bottom: -20px;
    width: 70px;
    height: 70px;
    background: #C6A779;
    border-radius: 50%;
    opacity: 0.8;
}

.all-news:before {
    content: "";
    position: absolute;
    right: -25px;
    bottom: -20px;
    width: 70px;
    height: 70px;
    background: #C6A779;
    border-radius: 50%;
    opacity: 0.8;
}

.all-news .news-image {
    width: 100%;
    max-height: 200px;
    overflow: hidden;
    margin-bottom: 15px;
    position: relative;
}

.video-section {
    position: relative;
}

.news-image .close-video {
    bottom: 60px;
}

@media(max-width: 600px) {
    .news-image .close-video {
        bottom: 10px;
    }
}

.all-news .news-image a {
    display: block;
}

.all-news .news-image a img {
    width: 50px;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 9;
}

.all-news .news-image img {
    width: 100%;
}

.all-news .news-title .news-date {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #fff;
}

.all-news .news-title h3 {
    font-size: 15px;
    color: #fff;
    line-height: 24px;
    margin-bottom: 0;
    padding: 0 10px;
}

.all-news .news-title h3.build-title {
    font-size: 20px;
}

.hover-effect {
    position: relative;
    overflow: hidden;
}

.hover-effect::before {
    right: 0;
    opacity: 1;
    top: 0;
}

.hover-effect::before,
.hover-effect::after {
    content: "";
    background: #fff;
    height: 0;
    width: 0;
    z-index: 1;
    position: absolute;
    -webkit-transition-duration: 1.3s;
    -o-transition-duration: 1.3s;
    transition-duration: 1.3s;
}

.hover-effect::after {
    bottom: 0;
    opacity: .7;
    left: 0;
}

.hover-effect::before,
.hover-effect::after {
    content: "";
    background: #fff;
    height: 0;
    width: 0;
    z-index: 1;
    position: absolute;
    -webkit-transition-duration: 1.3s;
    -o-transition-duration: 1.3s;
    transition-duration: 1.3s;
}

.all-news:hover .hover-effect::after,
.all-news:hover .hover-effect::before {
    height: 100%;
    opacity: 0;
    width: 100%;
}

.link-style-small {
    position: relative;
    background: transparent;
    color: #fff;
    display: block;
    overflow: hidden;
    width: 150px;
    height: 35px;
    border: 1px solid #fff;
    text-align: center;
    line-height: 35px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 5px;
    margin: 20px auto 0;
    transition: 0.7s;
    cursor: pointer;
}

.link-style-large {
    position: relative;
    background: transparent;
    color: #444544;
    display: block;
    overflow: hidden;
    width: 200px;
    height: 40px;
    border: 1px solid #444544;
    text-align: center;
    line-height: 40px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 5px;
    margin: 20px auto 0;
    transition: 0.7s;
    cursor: pointer;
}

.link-style-small span,
.link-style-large span {
    position: relative;
    z-index: 9;
}

.link-style-small:hover,
.link-style-large:hover {
    color: #fff;
    transition: 0.7s;
}

.link-style-small:before,
.link-style-small:after,
.link-style-large:before,
.link-style-large:after {
    position: absolute;
    top: 50%;
    content: '';
    width: 20px;
    height: 20px;
    background-color: #444544;
    border-radius: 50%;
}

.link-style-small:before,
.link-style-large:before {
    left: -20px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.link-style-small:after,
.link-style-large:after {
    right: -20px;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
}

.link-style-small:hover:before,
.link-style-large:hover:before {
    -webkit-animation: criss-cross-left 0.8s both;
    animation: criss-cross-left 0.8s both;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

.link-style-small:hover:after,
.link-style-large:hover:after {
    -webkit-animation: criss-cross-right 0.8s both;
    animation: criss-cross-right 0.8s both;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

@-webkit-keyframes criss-cross-left {
    0% {
        left: -20px;
    }
    50% {
        left: 50%;
        width: 20px;
        height: 20px;
    }
    100% {
        left: 50%;
        width: 150px;
        height: 150px;
        z-index: 2;
    }
}

@keyframes criss-cross-left {
    0% {
        left: -20px;
    }
    50% {
        left: 50%;
        width: 20px;
        height: 20px;
    }
    100% {
        left: 50%;
        width: 220px;
        height: 220px;
        z-index: 2;
    }
}

@-webkit-keyframes criss-cross-right {
    0% {
        right: -20px;
    }
    50% {
        right: 50%;
        width: 20px;
        height: 20px;
    }
    100% {
        right: 50%;
        width: 220px;
        height: 220px;
        z-index: 2;
    }
}

@keyframes criss-cross-right {
    0% {
        right: -20px;
    }
    50% {
        right: 50%;
        width: 20px;
        height: 20px;
    }
    100% {
        right: 50%;
        width: 220px;
        height: 220px;
        z-index: 2;
    }
}


/*start of news details style*/

.all-news-details {
    background: transparent;
    text-align: right;
    padding-bottom: 20px;
    overflow: hidden;
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    margin: 0 auto 40px;
    box-shadow: 0 0 10px #e8e6e6;
}

.all-news-details .news-image {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 15px;
}

.all-news-details .news-image img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 10px;
}

.all-news-details .news-title .news-date {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #aaa;
}

.all-news-details .news-title h3 {
    font-size: 17px;
    color: #444544;
    line-height: 24px;
    margin-bottom: 10px;
    padding: 0;
}

.all-news-details .news-title p {
    font-size: 15px;
    color: #777;
    line-height: 23px;
    margin-bottom: 15px;
    padding: 0;
}

.all-news-details:hover .hover-effect::after,
.all-news-details:hover .hover-effect::before {
    height: 100%;
    opacity: 0;
    width: 100%;
}

.more-news .title {
    margin-bottom: 40px;
}

.owl-carousel-three .owl-nav {
    display: block !important;
}

.owl-carousel-three .owl-nav .owl-prev {
    right: -60px !important;
    position: absolute !important;
    top: 100px !important;
    font-size: 92px !important;
    color: transparent !important;
    height: 50px !important;
    outline: none !important;
    background: url("../img/icon/right.png") !important;
    background-position: center !important;
    background-size: 50% !important;
    background-repeat: no-repeat !important;
    cursor: pointer;
}

.owl-carousel-three .owl-nav .owl-next {
    left: -60px !important;
    position: absolute !important;
    top: 100px !important;
    font-size: 92px !important;
    color: transparent !important;
    height: 50px !important;
    outline: none !important;
    background: url(../img/icon/left.png) !important;
    background-position: center !important;
    background-size: 50% !important;
    background-repeat: no-repeat !important;
    cursor: pointer;
}

.owl-carousel-three .all-news {
    margin: 0 auto 10px;
    width: 100%;
}


/*start of kyas page style*/

.all-kyas {
    text-align: center;
    background: #fff;
    padding: 0 0 0px;
    border-radius: 10px;
    box-shadow: 0 0 10px 1px #ddd;
    overflow: hidden;
}

.nav-tabs {
    float: right;
    padding: 10px 0 0;
    border-bottom: 0;
    border-left: 1px solid #efefef;
}

.nav-tabs li {
    float: none;
    margin: 0 0 10px 0;
}

.nav-tabs li a {
    margin-right: 0;
    border: 0;
    border-radius: 0;
    background-color: #fff;
    transition: 0.7s;
    text-align: right;
    color: #959595;
    font-size: 16px;
}

.nav-tabs li a i {
    float: left;
    margin-top: 3px;
    margin-right: 45px;
    color: #444544;
}

.nav-tabs li a:hover {
    background-color: #efefef;
    transition: 0.7s;
    color: #444544;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
    border: 0;
    background: #efefef;
    color: #444544;
}

.tab-content .tab-pane {
    display: none;
    background-color: #fff;
    padding: 1.6rem;
    overflow-y: auto;
    height: auto !important;
}

.tab-content .active {
    display: block;
}

.tab-content .tab-pane .title {
    text-align: right;
}

.tab-content .tab-pane .title h3 {
    color: #444544;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 50px;
    margin-top: 20px;
}

.rwd-table {
    margin: 0;
    width: 100%;
}

.rwd-table tr {
    border-bottom: 1px solid #ddd;
}

.rwd-table tr:last-of-type {
    border-bottom: 0 !important;
}

.rwd-table th {
    display: none;
}

.rwd-table td {
    display: block;
}

.rwd-table td:before {
    content: attr(data-th) ": ";
    font-weight: bold;
    width: 6.5em;
    display: inline-block;
}

.rwd-table th:first-of-type,
.rwd-table td:first-of-type {
    border-right: 0;
}

.table-all {
    border: 1px solid #ddd;
    border-radius: 5px;
}

.rwd-table {
    background: #fff;
    color: #959595;
    border-radius: .4em;
    overflow: hidden;
    font-size: 14px;
}

.rwd-table tr {
    border-color: #ddd;
}

.rwd-table th,
.rwd-table td:before {
    color: #444544;
    text-align: center;
    font-weight: 500;
    font-size: 15px;
}

.button-reg a {
    background: #00c000;
    display: block;
    width: 150px;
    margin: 20px auto;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    color: #fff;
    border-radius: 10px;
    transition: 0.7s;
    border: 1px solid transparent;
}

.button-reg a:hover {
    transition: 0.7s;
    background: #fff;
    color: #00c000;
    border: 1px solid #00c000;
}

.mobile-category {
    display: none;
}

.show-div {
    display: block !important;
    visibility: visible !important;
}

.nav-mobile i.fa-close {
    display: none;
}


/*start of login page*/

.login-section .title-section {
    margin: 20px 0 30px;
}

.login-section .title-section h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 25px;
}

.login-section .input-form {
    position: relative;
    margin-bottom: 30px;
}

.login-section form input {
    width: 100%;
    padding: 0 0px;
    border: 0;
    border-bottom: 1px solid #C6A779;
    height: 50px;
    line-height: 50px;
    background: #fff;
    outline: none;
    transition: 0.5s;
    color: #444544;
    border-radius: 0px;
    opacity: 1;
}

.login-section .img-eyes1 {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.login-section .forget-link {
    width: 100%;
    text-align: left;
    margin: 5px 0 40px;
}

.login-section .forget-link a {
    color: #444544;
    font-size: 13px;
    font-weight: bold;
    text-decoration: underline;
    transition: 0.5s;
    margin-left: 20px;
}

.login-section .create-section {
    text-align: center;
    margin: 0px 0 20px;
}

.login-section .create-section h3 {
    font-size: 15px;
    color: #444544;
    font-weight: 500;
}

.login-section .create-section h3 a {
    color: #444544;
    font-size: 15px;
    font-weight: 500;
    text-decoration: underline;
    transition: 0.5s;
}

.login-section form .button,
.login-section form .buttons a {
    text-align: center;
    margin: 0px 0 20px;
}

.login-section form .button button,
.login-section form .buttons a {
    border: 1px solid rgb(6, 18, 55);
    background: rgb(6, 18, 55);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 0;
    border-radius: 5px;
    outline: none;
    transition: 0.5s;
    margin: auto;
    width: 150px;
    height: 40px;
    line-height: 40px;
    display: block;
}

.login-section form .button button:hover,
.login-section form .buttons a:hover {
    background: #fff;
    color: rgb(6, 18, 55);
    transition: 0.5s;
}

.login-section .social-login {
    display: flex;
    justify-content: center;
}

.login-section .social-login li img {
    width: 35px;
    margin-left: 20px;
}

.login-section .social-login li:last-child img {
    margin: 0;
}


/*start of register page style*/

.select2-container {
    width: 100% !important;
    border-radius: 10px;
    margin-bottom: 30px
}

.select2-container--default .select2-selection--single {
    border: 1px solid #ddd;
    height: 50px;
    line-height: 50px;
    background: #fff;
    outline: none;
    transition: 0.5s;
    color: #888;
    border-radius: 10px;
    /* margin-bottom: 30px; */
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #888;
    line-height: 50px;
    text-align: right;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: block
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid rgb(235, 235, 235);
    text-align: right;
    outline: 1px solid rgba(6, 18, 55, 0.55);
    border-radius: 4px;
}

.select2-results__option[aria-selected] {
    cursor: pointer;
    text-align: right;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #444544;
    color: white;
    text-align: right;
}

.select2-results {
    text-align: right;
}

.radio-block {
    position: relative;
    margin-bottom: 40px
}

.radio-block .input-form {
    margin-bottom: 0 !important;
}

.radio-block input[type=radio] {
    position: absolute;
    visibility: hidden;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}

.radio-block label {
    width: 100%;
    padding: 0 20px;
    border: 1px solid #ddd;
    height: 50px;
    line-height: 50px;
    background: #fff;
    outline: none;
    transition: 0.5s;
    color: #888;
    border-radius: 10px;
    font-weight: 500;
}


/* hide input */

.radio-block input.radio {
    color: #444544;
}


/* style label */

.radio-block input.radio:empty~label {
    color: #444544;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* toggle hover */

.radio-block input.radio:hover:not(:checked)~label {
    background: #444544;
    color: #fff;
}


/* toggle on */

.radio-block input.radio:checked~label {
    color: #fff;
    background: #444544;
}


/* radio focus */

.radio-block input.radio:focus~label:before {
    box-shadow: 0 0 0 3px #999;
}

.radio-blk .col-md-4 {
    float: right !important;
    width: 33.33%;
}

.datepicker-inline {
    position: absolute;
    background: #fff;
    z-index: 9;
    display: none;
    box-shadow: 0 0 10px 0 #ddd;
}

.datepicker table {
    width: 100%;
}

.hide-date {
    display: none;
}

select.input {
    width: 100%;
    padding: 0 20px;
    border: 1px solid #ddd;
    height: 50px;
    line-height: 50px;
    background: #fff;
    outline: none;
    transition: 0.5s;
    color: #888;
    border-radius: 10px;
    opacity: 1;
}

.js-states-gender .select2-container .select2-search--dropdown {
    display: none !important
}


/* start profile page */

.buttons {
    display: flex;
    justify-content: space-around;
}

@media (max-width: 1200px) {
    #Date,
    #islamicDate,
    .clock ul {
        font-size: 11px !important
    }
    .slider-section .item {
        width: 100%;
        height: 100%;
    }
    .slider-section .owl-carousel {
        width: 100%;
        height: 100%;
    }
    .slider-section .owl-carousel .owl-stage {
        height: 100%;
        width: 100%;
    }
    .slider-section .owl-carousel.owl-rtl .owl-item {
        width: 100%;
        height: 100%;
    }
    .slider-section .item img {
        width: 100%;
        height: 100%;
    }
    /* .navbar-brand .logo {
        width: 150px;
    } */
    .footer-all .dis-footer .title img {
        margin: 0 auto 20px !important;
    }
    .footer-all .dis-footer .title {
        text-align: right;
    }
    .footer-all .dis-footer .all-dis .dis ul {
        text-align: right;
    }
    /*.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 {*/
    /*float: none !important;*/
    /*}*/
    .float-r-footer {
        float: none !important;
    }
    #nav.nav-transparent:not(.fixed-nav) .main-nav>li>a {
        font-size: 16px;
    }
    .main-nav li {
        padding: 0 15px;
    }
    .main-nav>li>a {
        font-size: 16px;
    }
    .slider-section .item .slider-text {
        width: 60%;
    }
    .owl-carousel.owl-rtl .owl-item .item {
        height: 100%;
    }
    .owl-carousel.owl-rtl .owl-item {
        height: 100%;
    }
    .no-js .owl-carousel,
    .owl-carousel.owl-loaded {
        height: 100%;
    }
    .owl-carousel .owl-stage {
        height: 100%;
    }
    .second-section .services-section .service {
        width: 210px;
    }
}

@media(max-width: 1200px) {
    .owl-carousel-three .owl-nav .owl-next {
        left: -20px !important;
    }
    .owl-carousel-three .owl-nav .owl-prev {
        right: -20px !important;
    }
}

@media (max-width: 992px) {
    .main-nav li {
        margin: 5px 0 0;
    }
    .all-parts {
        padding: 30px 0 0;
    }
    .footer-all .footer-text {
        margin-top: 30px;
    }
    .slider-section {
        padding: 0px;
    }
    .slider-section .item img {}
    .slider-section button.owl-prev {
        height: 50px !important;
    }
    .slider-section button.owl-next {
        height: 50px !important;
    }
    .part-section a .name {
        top: 10%;
    }
    .navbar-brand .logo {
        margin: 0 auto;
        width: 50px;
    }
    .navbar-brand {
        width: 100%;
    }
    .navbar-header {
        float: none;
    }
    .nav-collapse {
        position: absolute !important;
        left: 10px;
        top: 10px;
    }
    .social-icon {
        margin-top: 0;
        position: absolute;
        top: 5px;
    }
    .social-icon li {
        margin: 0;
    }
    #home {
        height: 60px !important;
    }
    #nav {
        padding: 7px 0;
    }
    /*  */
    .first-section .about-text {
        padding: 0;
    }
    .link-hover {
        display: block;
        margin: auto;
    }
    .second-section .services-section .service {
        width: 220px;
    }
    .second-section .services-section .service a img {
        width: 60px;
    }
    .second-section .services-section .service a h3 {
        font-size: 16px
    }
}

@media (max-width: 990px) {
    .navbar>.container .navbar-brand,
    .navbar>.container-fluid .navbar-brand {
        margin-left: 0 !important;
    }
    #nav {
        padding: 7px 0 !important;
    }
    .nav__menu-item i {
        font-size: 25px;
        margin-left: 10px;
        line-height: 50px;
        font-weight: 500;
    }
    .nav-login {
        left: 10px;
        position: absolute;
        margin: 0 !important;
    }
    .navbar-brand a {
        display: block;
        width: 50%;
        margin: 0 auto;
    }
    .articals-section .owl-carousel.owl-rtl .owl-item .item {
        margin: 0 auto;
        width: 350px;
    }
    .articals-section .owl-carousel .owl-nav {
        display: none !important;
    }
    .footer-all .dis-footer .title img {
        margin: 0 auto 20px!important;
    }
    .footer-all .dis-footer .title {
        text-align: right;
    }
    .footer-all .dis-footer .all-dis .dis ul {
        text-align: center;
    }
    .footer-all .dis-footer .all-dis .dis ul li {
        margin: 10px 0px 10px 10px;
    }
    #nav.nav-transparent:not(.fixed-nav) .main-nav>li>a {
        font-size: 20px;
    }
    .main-nav>li>a {
        font-size: 20px;
    }
    .nav__menu-item .fa-angle-down {
        line-height: 0;
    }
    .main-nav li a:hover,
    .main-nav li a:focus {
        background: transparent !important;
    }
    .nav-responsive {
        z-index: 9;
        background: transparent;
        background: #000;
        border-radius: 0 !important;
        left: 0;
        right: 0;
        width: 100%;
    }
    .navbar-nav>li>a {
        padding: 20px 0;
    }
    #nav.nav-transparent {
        position: fixed;
        width: 100%;
    }
    .slider-section .item .slider-text h3 {
        font-size: 20px;
        font-weight: 500;
    }
    .slider-section .item .slider-text {
        width: 90%;
    }
    .all-parts {
        margin: 0px 0 0;
    }
    .nav__menu-item .nav__submenu.open {
        display: block !important;
    }
    .nav__menu-item:hover .nav__submenu {
        display: none;
    }
}

.close-icon {
    display: none;
}

@media only screen and (max-width: 992px) {
    .first-header .float-r:last-child {
        float: left !important;
    }
    .right-section ul li {
        border-right: none !important;
        font-size: 0;
    }
    .right-section ul li.user,
    .right-section ul li.mail {
        display: none
    }
    .search-icon.sb-search.n-mobile {
        display: none !important
    }
    .sb-search.mobile {
        position: fixed !important;
        margin-top: 0px !important;
        min-width: 40px !important;
        height: 40px !important;
        bottom: 15px !important;
        left: 15px;
        border-radius: 5px;
        cursor: pointer;
        z-index: 99;
        display: block !important;
    }
    .sb-search.mobile a:focus {
        color: #fff;
    }
    .sb-search.mobile a:hover {
        color: #fff;
    }
    .sb-search.mobile.sb-search-open,
    .no-js .sb-search.mobile {
        width: 280px
    }
    .user.mobile {
        position: absolute;
        right: 15px;
        font-size: 24px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
    }
    .navbar-right {
        margin-right: 0 !important;
    }
    .navbar-nav>li {
        float: none !important;
    }
    .hidden-xs {
        display: none !important;
    }
    #nav {
        padding: 0
    }
    #nav.nav-transparent {
        background: #FFF
    }
    .main-nav {
        position: fixed;
        right: 0;
        z-index: 1199;
        height: 100%;
        -webkit-box-shadow: 0 80px 0 0 rgba(0, 0, 0, 0.9);
        box-shadow: 0 80px 0 0 rgba(0, 0, 0, 0.9);
        width: 0;
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%);
        margin: 0;
        top: 0;
        overflow-y: auto;
        background: rgba(0, 0, 0, 0.9);
        -webkit-transition: .2s all;
        transition: .2s all
    }
    #nav.open .main-nav {
        -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
        transform: translateX(0%);
        width: 100%;
        padding-top: 70px
    }
    .main-nav li {
        border-top: 1px solid rgba(250, 250, 250, 0.1);
        text-align: center
    }
    .main-nav li a {
        display: block;
        color: #FFF;
        font-size: 20px;
        -webkit-transition: .2s all;
        transition: .2s all
    }
    .main-nav li a:hover,
    .main-nav li a:focus {
        background-color: #444544;
        color: #FFF;
        opacity: 1
    }
    .has-dropdown>a:after {
        content: "\f054";
        font-family: 'FontAwesome';
        float: right;
        -webkit-transition: .2s -webkit-transform;
        transition: .2s -webkit-transform;
        transition: .2s transform;
        transition: .2s transform, .2s -webkit-transform
    }
    .dropdown {
        opacity: 0;
        visibility: hidden;
        height: 0;
        background: rgba(250, 250, 250, 0.1)
    }
    .dropdown li a {
        padding: 6px 10px
    }
    .has-dropdown.open-drop>a:after {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg)
    }
    .has-dropdown.open-drop>.dropdown {
        opacity: 1;
        font-family: "Neo Sans Arabic";
        visibility: visible;
        height: auto;
        -webkit-transition: .2s all;
        transition: .2s all
    }
}

@media(max-width: 992px) {
    .all-about .about-text p {
        padding: 0;
    }
    .all-about .about-text h3 {
        line-height: 28px;
    }
}

@media (min-width: 991px) {
    .rwd-table td:before {
        display: none;
    }
}

.rwd-table th,
.rwd-table td {
    text-align: center;
}

@media (min-width: 991px) {
    .rwd-table th,
    .rwd-table td {
        display: table-cell;
        border-right: 1px solid #ddd;
        padding: 8px 0;
    }
    .rwd-table td i {
        margin: 0 10px;
        font-size: 13px;
        font-weight: 100;
    }
    .rwd-table th:first-child,
    .rwd-table td:first-child {
        padding-left: 0;
    }
    .rwd-table th:last-child,
    .rwd-table td:last-child {
        padding-right: 0;
    }
}

@media(max-width: 990px) {
    .nav-mobile i {
        display: none;
    }
    .nav-mobile i.fa-close {
        display: block !important;
    }
    .nav-mobile {
        float: none;
        background: #fff;
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 0;
        z-index: 999;
        background: rgba(0, 0, 0, 0.8);
        overflow: hidden;
        display: none;
    }
    .nav-mobile .nav-tabs {
        float: none;
        background: #fff;
        width: 90%;
        margin: 0 auto;
        height: 300px;
        overflow: scroll;
        position: relative;
        top: 20%;
    }
    .nav-mobile .nav-tabs li {
        float: none;
        margin: 0 auto 10px;
        width: 99%;
    }
    .nav-mobile .nav-tabs li a i {
        display: none;
    }
    .tab-content .tab-pane {
        height: auto !important;
    }
    .rwd-table th,
    .rwd-table td {
        text-align: right;
        margin: 10px;
    }
    .rwd-table th,
    .rwd-table td:before {
        text-align: right;
    }
    .rwd-table {
        font-size: 15px;
    }
    .tab-content .tab-pane .title h3 {
        line-height: 28px;
        font-size: 17px;
        margin-bottom: 25px;
        margin-top: 10px;
    }
    .mobile-category {
        display: block;
        position: fixed !important;
        margin-top: 0px !important;
        min-width: 40px !important;
        height: 40px !important;
        bottom: 15px !important;
        right: 15px;
        border-radius: 5px;
        cursor: pointer;
        z-index: 99;
        background: #444544;
        text-align: center;
        color: #fff;
        font-size: 25px;
        line-height: 40px;
        cursor: pointer;
    }
    .nav-mobile i {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
        color: #fff;
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .right-section {
        position: absolute;
        top: -40px;
    }
    .clock h3 {
        display: none;
    }
    .sb-icon-search:focus {
        color: #fff !important;
    }
    .slider-section {
        height: 300px;
    }
    .slider-section .owl-theme .owl-dots {
        display: block;
        bottom: 10px
    }
    .slider-section .owl-theme .owl-nav {
        bottom: 50%;
        transform: translateY(50%);
    }
    .slider-section button.owl-prev,
    .slider-section button.owl-next {
        top: 50%;
        transform: translateY(-50%);
    }
    .no-js .owl-carousel,
    .owl-carousel.owl-loaded {
        height: auto;
    }
    .slider-section .no-js .owl-carousel,
    .slider-section .owl-carousel.owl-loaded {
        height: 300px !important;
    }
    .news-section .title h3 {
        display: none;
    }
    .first-section .about-text {
        padding: 0;
        width: 100%;
        text-align: center;
        margin: 40px auto;
    }
    .second-section .services-section ul li {
        width: auto;
    }
    .owl-carousel-two .owl-nav .owl-prev {
        right: -15px !important;
        font-size: 62px !important;
    }
    .owl-carousel-two .owl-nav .owl-next {
        left: -15px !important;
        font-size: 62px !important;
    }
    .question-section {
        margin-top: 30px;
    }
    /*  */
    .news-holder-first {
        width: 100%;
        float: none !important;
    }
    .show-section {
        display: none;
        position: fixed;
        width: 100%;
        z-index: 9999;
        background: rgba(0, 0, 0, 0.8);
        height: 100%;
        top: 0;
        padding: 10px;
        left: 0;
        overflow: scroll;
        padding-bottom: 50px;
    }
    .new-popup {
        display: none;
    }
    .close-icon {
        display: block;
        font-size: 20px;
        color: #fff;
        cursor: pointer;
        width: 35px;
        height: 35px;
        text-align: center;
        background: #000;
        line-height: 35px;
        border-radius: 50px;
        position: fixed;
        z-index: 9;
    }
    .news-preview {
        box-shadow: 0 0 10px 0 #ddd;
        width: 100%;
        background: #fff;
        z-index: 5;
        border-radius: 10px;
        position: relative;
        top: 30px;
        /* background: rgba(191, 195, 208, 0.43); */
        /* height: 100vh; */
        height: auto !important;
    }
    .news-preview p {
        margin-bottom: 30px;
    }
    .news-preview .img {
        height: auto;
    }
    .news-holder-link {
        width: 100%;
        margin: 30px auto 0;
    }
    .news-section {
        position: relative;
        bottom: 0;
        margin-top: 35px;
        margin-bottom: 20px;
    }
    .owl-carousel .owl-nav button.owl-next,
    .owl-carousel .owl-nav button.owl-prev,
    .owl-carousel button.owl-dot {
        display: none;
    }
    .slider-section .item .slider-text {
        top: 40%;
        text-align: center;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 5px;
        padding: 0 10px;
    }
    .news-headlines li.selected {
        transform: scale(1.00)
    }
    .question-section {
        box-shadow: 0 0 0;
    }
    .float-r {
        float: none !important;
    }
    .news-holder-link::before,
    .news-holder-link::after {
        display: none;
    }
    .news-holder-link:hover {
        background: #444544;
    }
    .link-hover::before,
    .link-hover::after {
        display: none;
    }
    .link-hover:hover {
        background: #444544;
    }
    .ads-image {
        height: auto;
    }
    .show-section {
        display: block;
    }
}

@media(max-width: 768px) {
    .login-section .input-form {
        font-size: 13px;
    }
    .login-section .input-form,
    .select2-container {
        margin-bottom: 20px
    }
    .login-section form input {
        font-size: 13px;
        padding: 0 8px;
    }
    .select2-container .select2-selection--single .select2-selection__rendered {
        padding-right: 8px;
        font-size: 13px;
    }
    label {
        padding: 0 8px;
    }
    .login-section .create-section h3 {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .input-form .hide-mobile {
        display: none;
    }
    .login-section form .button .login-section form .buttons a {
        margin: 0px 0;
    }
    .login-section .social-login {
        margin-top: 15px;
    }
}

@media (max-width: 500px) {
    .slider-section {
        height: 300px;
    }
    .slider-section .owl-theme .owl-dots {
        display: block;
    }
    .slider-section .owl-theme .owl-nav {
        display: none;
    }
    .slider-section .item .slider-text {
        top: 50%;
        transform: translateY(-50%)
    }
    .slider-section button span {
        display: none;
    }
    .footer-all .location-footer .all-location .location h3 {
        line-height: 25px;
    }
    /* start book page */
    .books-section .book-thumbnail {
        width: 50%;
    }
}


/*start of ask result style*/

.class-info {
    margin-bottom: 50px;
}

.tab-ask {
    padding-top: 30px;
    position: relative;
    overflow: hidden;
    background: #fff;
    width: 100%;
    margin: 0 auto;
}

.tabs-ask {
    display: table;
    position: relative;
    overflow: hidden;
    margin: 0 auto 50px;
    width: 100%;
}

.tabs-ask li {
    line-height: 38px;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 30%;
    margin: 0 10px;
    display: inline-block;
}

.tabs-ask a {
    background-color: #efefef;
    color: #444544;
    font-weight: 500;
    display: block;
    letter-spacing: 0;
    outline: none;
    padding: 5px 0px;
    border-radius: 10px;
    font-size: 16px;
    text-decoration: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.tabs_item-ask {
    display: none;
}

.tabs_item-ask:first-child {
    display: block;
}

.current a {
    color: #fff;
    background: #444544;
}

.all-ask-result .tab-content .tab-pane {
    border-right: 1px solid #efefef;
}

.all-ask-result .nav-tabs {
    border-left: 0;
}

.tab-content .tab-pane .title h4 {
    color: #444544;
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 15px;
}

@media(max-width: 1150px) {
    .tabs-ask li {
        width: 28%;
        margin: 0 5px;
    }
}


/*start of training page style*/

.tab-training {
    padding-top: 30px;
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}

.tabs-training {
    display: flex;
    position: relative;
    overflow: hidden;
    margin: 0 auto 10px;
    width: 100%;
    padding-bottom: 20px;
}

.tabs-training li {
    line-height: 38px;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 30%;
    margin: 0 auto;
    display: inline-block;
    box-shadow: 0 0 10px 1px #ddd;
    border-radius: 10px;
}

.tabs-training a {
    background-color: #fff;
    color: #444544;
    font-weight: 500;
    display: block;
    letter-spacing: 0;
    outline: none;
    padding: 8px 0px;
    border-radius: 10px;
    font-size: 17px;
    text-decoration: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    text-align: center;
    cursor: pointer;
    line-height: 45px;
}

.tabs-training .span1 {
    background: url(../img/icon/clock.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 29px;
    width: 30px;
    height: 33px;
    display: inline-block;
    position: relative;
    top: 10px;
    left: 8px;
}

.tabs-training .current-training .span1 {
    background: url(../img/icon/clock-active.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 29px;
    width: 30px;
    height: 33px;
    display: inline-block;
    position: relative;
    top: 10px;
    left: 8px;
}

.tabs-training .span2 {
    background: url(../img/icon/clock.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 29px;
    width: 30px;
    height: 33px;
    display: inline-block;
    position: relative;
    top: 10px;
    left: 8px;
}

.tabs-training .current-training .span2 {
    background: url(../img/icon/clock-active.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 29px;
    width: 30px;
    height: 33px;
    display: inline-block;
    position: relative;
    top: 10px;
    left: 8px;
}

.tabs-training .span3 {
    background: url(../img/icon/door.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 25px;
    width: 30px;
    height: 33px;
    display: inline-block;
    position: relative;
    top: 10px;
    left: 8px;
}

.tabs-training .current-training .span3 {
    background: url(../img/icon/door-active.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 25px;
    width: 30px;
    height: 33px;
    display: inline-block;
    position: relative;
    top: 10px;
    left: 8px;
}

.tabs_item-training {
    display: none;
    padding: 25px 15px;
    background: #fff;
    box-shadow: 0 0 10px 1px #ddd;
    width: 96%;
    margin: 0 auto 20px;
    border-radius: 10px;
}

.tabs_item-training:first-child {
    display: block;
}

.current-training a {
    color: #fff;
    background: #444544;
}

.tabs_item-training h3 {
    color: #444544;
    font-weight: 500;
    font-size: 16px;
    ;
    text-align: right;
    line-height: 25px;
    margin-bottom: 50px;
}

.login-after-section {
    text-align: center;
}

.login-after-section h4 {
    color: #444544;
    font-weight: 500;
    font-size: 25px;
    ;
    text-align: center;
    margin-bottom: 0;
}

.login-after-section a {
    width: 125px;
    background: #00af00;
    border: 1px solid transparent;
    color: #fff;
    font-size: 17px;
    height: 40px;
    line-height: 35px;
    border-radius: 5px;
    margin: 20px auto 0;
    text-align: center;
    display: block;
    outline: none;
    transition: 0.7s;
}

.login-after-section a:hover {
    border: 1px solid #00af00;
    transition: 0.7s;
    color: #00af00;
    background: #fff;
}

.login-after-section i {
    font-size: 90px;
    color: #444544;
    margin-bottom: 20px;
}

@media(max-width: 990px) {
    .tabs-training {
        display: block;
    }
    .tabs-training li {
        display: block;
        width: 95%;
        margin-bottom: 15px;
    }
}


/*start of elearning page style*/

.radio-block {
    margin-bottom: 15px;
}

.followed,
.class-checked {
    background-color: #444544 !important;
    color: #fff !important;
}

.followed.cancel {
    background-color: #d9534f !important;
}

.text-underline {
    text-decoration: underline !important;
}

.btn-bordered {
    background-color: #fff !important;
    border: 1px solid #444544;
    color: #444544 !important;
}

.elearning-section {
    background-image: url(../img/elearning/elearning-bg.png);
    background-position: right;
    background-repeat: no-repeat;
    padding: 0;
}

.all-sections .section-title {
    background-color: #fff;
    border-radius: 0 0 10px 10px;
    padding: 70px 0 50px;
    margin-bottom: 15px;
}

.elearning-section .nav-pills {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
    align-items: center;
    padding: 0 10px;
}

.elearning-section .nav-pills li {
    width: 90px;
    text-align: center;
    height: 90px;
    background-color: #eceff8;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
}

.elearning-section .nav-pills li a {
    background-color: transparent;
    color: #444544;
}

.elearning-section .nav-pills li.active {
    background-color: #444544;
    color: #fff;
}

.elearning-section .nav-pills li.active a.active,
.elearning-section .nav-pills li.active a {
    background-color: transparent;
    color: #fff;
}

.elearning-section .section-content {
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    padding: 40px 0;
}

.elearning-section .section-content h3 {
    color: #444544;
}

.teacher-card,
.student-card {
    display: flex;
    border-radius: 10px;
    padding: 10px;
    align-items: center;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    border: 1px solid #fff;
    margin-bottom: 30px;
}

.teacher-card:hover {
    border-color: rgb(210, 216, 236);
    background-color: rgb(244, 244, 249);
}

.student-card .image,
.teacher-card .image {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    float: right;
}

.student-card .image img,
.teacher-card .image img {
    width: 100%;
    height: 100%;
}

.teacher-card .info {
    width: calc(100% - 180px);
    display: inline-block;
    padding: 0 10px;
}

.teacher-card .info p {
    margin-bottom: 0;
    font-size: 15px;
}

.teacher-card .action {
    width: 120px;
    display: inline-block;
}

.btn {
    color: #444544;
}

.mt-2 {
    margin-top: 20px;
}

.mb-2 {
    margin-bottom: 20px;
}

.profile-section .class-item .action .btn,
.teacher-card .action .btn {
    width: 115px;
    cursor: pointer;
    background: #efefef;
}

.nav-pills>li>a {
    background: #efefef;
}

@media (max-width: 768px) {
    .elearning-section .nav-pills {
        display: block;
        text-align: center;
    }
    .elearning-section .nav-pills li {
        float: right;
        margin-bottom: 20px;
    }
}

.banner-setion-all {
    position: relative;
}

.banner-setion-all .avatar {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    border: 4px solid #fff;
    position: absolute;
    bottom: -40px;
    right: 0;
    left: 0;
    display: inline-block;
    margin: auto;
}

.banner-setion-all .avatar img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.banner-setion-all .avatar input {
    opacity: 0;
    position: absolute;
    z-index: 2;
}

.banner-setion-all .avatar label {
    z-index: 3;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    width: 100%;
    line-height: 100px;
    background-color: rgba(0, 0, 0, .5);
    height: 100%;
    font-size: 25px;
    color: #fff;
    cursor: pointer;
}

.banner-setion-all .avatar:hover label {
    opacity: 1
}

.rating-read li {
    padding: 0;
}

.rating-read .active {
    color: #ebb113;
}

.profile-section {
    padding: 0;
}

.profile-section .section-title .teacher-bio {
    max-width: 600px;
    margin: auto;
    padding: 0 15px;
}

.profile-section .nav-pills {
    display: flex;
    justify-content: center;
    margin: 20px 0 0;
}

.profile-section .nav-pills li {
    margin: 0 !important;
    text-align: center;
    float: right;
    padding: 10px;
}

.profile-section .nav-pills li.active a {
    background-color: #444544;
}

.profile-section .tab-content .tab-pane {
    background-color: transparent;
    padding: 0;
}

.profile-section .student-card,
.profile-section .class-item {
    border-radius: 10px;
    margin-bottom: 15px;
    background-color: #fff;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 1.6rem;
}

.profile-section .class-item .details {
    width: calc(100% - 120px);
    display: inline-block;
}

.profile-section .class-item .details p {
    margin-bottom: 0;
    font-size: 15px;
}

.profile-section .class-item .action {
    width: 120px;
    display: inline-block;
}

.student-card .info {
    width: calc(100% - 60px);
    display: inline-block;
    padding: 0 10px;
}

.profile-section .content-title {
    color: #444544;
    background-color: #fff;
    border-radius: 10px;
    padding: 15px 20px;
    overflow: hidden;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.profile-section .content-title h3 {
    margin-bottom: 0;
}

.profile-section .login-section {
    background-color: #fff;
    padding: 15px 20px;
    margin-bottom: 15px;
    border-radius: 10px;
}

.profile-section .login-section form .button {
    margin: auto;
    display: inline-block;
}

.profile-section .login-section form .button button,
.profile-section .login-section form .buttons a {
    display: inline-block;
    margin: 0 10px;
    float: right;
}

.elearning-addClass .radio-blk {
    overflow: hidden;
}

.elearning-addClass .radio-blk .float-r {
    margin-left: 15px;
    min-width: 125px;
}

@media (max-width: 540px) {
    .profile-section .class-item,
    .teacher-card {
        display: block;
    }
    .profile-section .class-item .details {
        width: 100%;
        display: block;
    }
    .teacher-card .info {
        width: calc(100% - 60px);
        height: 60px;
    }
    .profile-section .class-item .action,
    .teacher-card .action {
        width: 100%;
        display: block;
        margin-top: 10px;
    }
    .profile-section .class-item .action .btn,
    .teacher-card .action .btn {
        width: 100%
    }
    .elearning-section .section-content {
        padding: 40px 5px;
    }
    .elearning-section .section-content h3 {
        line-height: 30px;
    }
    .profile-section .login-section form .button button,
    .profile-section .login-section form .buttons a {
        margin: 10px;
        float: none;
        display: block;
    }
}

.teacher-card .info h5 {
    margin-bottom: 10px;
}

.student-card .info a h5 {
    margin-bottom: 10px;
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: none;
}

.login-section form .button button img {
    margin-right: 10px;
}


/*start of books style*/


/* start profile page */

.buttons {
    display: flex;
    justify-content: space-around;
}


/* start books page */

.books-section .nav.nav-pills.books-content {
    display: table;
    margin: 0 auto 30px;
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 5px 20px 0px rgba(61, 132, 219, 0.2);
    padding: 10px;
}

.books-section .nav-pills.books-content>li {
    float: right;
    text-align: center;
    width: 250px;
}

.books-section .nav-pills.books-content>li:first-child {
    margin-left: 30px;
}

.books-section .nav.nav-pills.books-content>li>a>img {
    max-width: 60px;
    display: block;
    margin: auto;
}

.books-section .nav-pills.books-content>li>a {
    color: #444544;
    border-radius: 10px
}

.books-section .nav-pills.books-content>li.active,
.books-section .nav-pills.books-content>li.active>a,
.books-section .nav-pills.books-content>li.active>a:focus,
.books-section .nav-pills.books-content>li.active>a:hover {
    border-radius: 10px;
    background-color: rgb(6, 18, 55);
    box-shadow: 0px 5px 20px 0px rgba(61, 132, 219, 0.2);
    color: #fff;
}

.books-section .tab-content .tab-pane {
    background-color: transparent;
}

.books-section .book-thumbnail {
    width: 20%;
    display: inline-block;
    margin-top: 20px;
    float: right;
    padding: 0 15px;
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}

.books-section .book-thumbnail a {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.books-section .book-thumbnail a:after {
    display: none;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(6, 18, 55);
    color: white;
    opacity: 0.6;
    z-index: 3;
    transition: al 0.4s ease-in-out;
    -webkit-transition: al 0.4s ease-in-out;
    -moz-transition: al 0.4s ease-in-out;
    -ms-transition: al 0.4s ease-in-out;
    -o-transition: al 0.4s ease-in-out;
}

.books-section .book-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}

.books-section .book-thumbnail .caption {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    z-index: 33;
    display: none;
}

.books-section .book-thumbnail .caption h3 {
    color: #fff;
    margin-bottom: 0px;
}

.books-section .book-thumbnail .caption .price {
    color: #00af00;
    font-size: 24px;
}

.books-section .book-thumbnail:hover img {
    transition: all .4s ease-in;
    transform: scale(1.2);
}

.books-section .book-thumbnail:hover a:after,
.books-section .book-thumbnail:hover .caption {
    display: block;
    cursor: pointer;
}


/* start pay page */

.payment-section .tab-content .tab-pane {
    background-color: #fff;
    padding-top: 46px;
}

.payment-section .e-method {
    display: flex;
    justify-content: center;
    align-items: center;
}

.payment-section .e-method h3 {
    margin: 0 0 0 30px;
    color: #444544;
}

.payment-section .e-method img {
    width: 50px;
}

.payment-section .e-method img:first-of-type {
    margin-left: 20px;
}

.payment-section .payment-form {
    margin-top: 30px;
}

.payment-section .payment-form label {
    color: #444544;
    padding-right: 20px;
    position: relative;
}

.payment-section .payment-form label:before {
    position: absolute;
    content: "*";
    color: #444544;
    top: 0%;
    right: 0;
}

.login-section.payment-form .input-form .date {
    position: relative;
}

.login-section.payment-form .input-form .date img {
    position: absolute;
    left: 10px;
    top: 46px;
}

.payment-section .transfer-method {
    text-align: center
}

.payment-section .transfer-method h3 {
    color: #013062;
}

.payment-section .transfer-method .price {
    color: #00af00;
}

.payment-section .transfer-method .bank-accounts {
    margin-top: 30px;
    display: block;
}

.payment-section .transfer-method .account-block {
    display: flex;
    margin-bottom: 30px;
    width: 50%;
    float: right;
}

.payment-section .transfer-method .account-block .bank-logo {
    margin-left: 30px;
}

.payment-section .transfer-method .account-block .bank-logo img {
    border-radius: 10px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

.payment-section .transfer-method .account-block .account-info {
    text-align: right
}

.payment-section .transfer-method .account-block .account-info h4 {
    margin-bottom: 10px;
}

.payment-section .transfer-method .account-block .account-info p {
    color: #abacad;
    margin: 0 0 5px;
}


/* start champion page */

.champion-section .video-section {
    border-radius: 10px;
    overflow: hidden;
}

.champion-section .question-section {
    box-shadow: none;
}

.question-section .answer {
    text-align: right !important;
    display: flex;
}

.question-section label,
.question-section .q-numb {
    width: auto;
    color: #10161A;
    display: inline-block;
    text-align: right
}

.champion-form .question-section label,
.champion-form .question-section .q-numb {
    width: 200px;
}

.question-section .question {
    display: flex;
}

.question-section .question h3 {
    font-size: 17px;
    font-weight: 600;
    display: inline-block;
    text-align: right;
    width: 24%;
}

.question-section .question h4 {
    font-size: 15px;
    font-weight: 500;
    display: inline-block;
    text-align: right;
    line-height: 23px;
}

.champion-form .question-section .radio label {
    color: #abacad;
}

.champion-form .radio {
    display: inline-block;
    margin: 0;
    width: 30%;
}

.champion-form .radio+.radio {
    margin: 0;
}

.champion-form .question-section .radio input[type="radio"]:checked {
    color: #444544
}

.champion-section .question-section .q-block {
    margin-bottom: 30px;
}

.question-section .answer textarea {
    display: inline-block;
    width: 75%;
    resize: none;
    border-radius: 10px;
    border: 1px solid rgb(227, 227, 227);
    background-color: rgb(247, 247, 247);
    max-height: 50px;
}

.question-section .answer textarea:focus::placeholder {
    color: transparent;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}

.question-section .answer textarea:focus {
    outline: none
}

.question-section .all-location button:hover {
    background: #444544;
}

.question-section .answer h5 {
    color: #10161A;
    font-size: 17px;
    font-weight: 500;
    display: inline-block;
    text-align: right;
    width: 24%;
}

@media(max-width: 768px) {
    /* video */
    .videoPoster:before {
        width: 50px;
        height: 50px;
    }
    /* start profile page */
    .login-section form .button button,
    .login-section form .buttons a {
        width: 120px;
        height: 35px;
        line-height: 35px;
    }
    /* start book page */
    .books-section .nav-pills.books-content>li {
        float: unset
    }
    .books-section .nav-pills.books-content>li:first-child {
        margin: 0;
    }
    .books-section .book-thumbnail {
        width: 33%;
    }
    .books-section .book-thumbnail .caption h3 {
        font-size: 16px;
    }
    /* start pay page */
    .payment-section .tab-content .tab-pane {
        padding: 1.6rem;
    }
    .payment-section .e-method h3 {
        font-size: 17px;
        margin: 0 0 0 5px;
    }
    .payment-section .e-method img {
        width: 45px;
    }
    .payment-section .e-method img:first-of-type {
        margin-left: 5px;
    }
    .payment-section .transfer-method h3 {
        font-size: 17px;
        line-height: 24px;
        margin-bottom: 10px;
    }
    .payment-section .transfer-method .price {
        font-size: 14px;
    }
    .payment-section .transfer-method .account-block {
        display: block;
        width: auto;
        float: unset;
    }
    .payment-section .transfer-method .account-block .bank-logo {
        margin: 15px auto;
    }
    .payment-section .transfer-method .account-block .account-info {
        text-align: center
    }
    /* start champion page */
    .banner-setion-all h4 {
        font-size: 24px
    }
    .all-about .about-text h3 {
        font-size: 17px;
        margin-bottom: 20px;
    }
    .all-about .about-text {
        margin-bottom: 20px;
    }
    .question-section {
        padding: 10px;
    }
    .question-section .q-numb {
        width: 25%;
    }
    .question-section .answer textarea {
        width: 100%;
    }
    .question-section .question {
        display: block;
        text-align: right;
    }
    .question-section .question h3 {
        margin-bottom: 10px;
        width: 100%;
    }
    .question-section .question h4 {
        width: 100%;
        margin-bottom: 10px;
    }
    .question-section .answer {
        width: 100%;
        display: block;
    }
    .question-section .answer h5 {
        width: 100%;
        margin-bottom: 10px;
    }
    .champion-form .radio {
        width: 100%;
        display: block;
    }
}

@media(max-width: 500px) {
    /* start book page */
    .books-section .book-thumbnail {
        width: 50%;
    }
}

.date,
.time {
    position: relative;
}

.date .left,
.time .left {
    position: absolute;
    left: 15px;
    top: 10px;
}


/*start of board style*/

.all-board {
    padding: 15px;
}

.all-board .header-board {
    background: #fff;
    width: 100%;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 0 10px 1px #ddd;
    direction: rtl;
    padding: 10px 15px;
    height: 70px;
}

.all-board .header-board .img-logo {
    width: 65px;
    overflow: hidden;
}

.all-board .header-board .board-right {
    float: right;
    display: flex;
}

.all-board .header-board .img-logo img {
    width: 100%;
}

.all-board .header-board .user-info {
    margin-right: 30px;
}

.all-board .header-board .user-info img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: inline-block;
}

.all-board .header-board .user-info h3 {
    font-size: 16px;
    font-weight: 500;
    color: #444544;
    margin-right: 5px;
    display: inline-block;
}

.all-board .header-board .board-left {
    float: left;
    display: flex;
}

.all-board .header-board .button-done button {
    background: #fff;
    border: 1px solid #d00000;
    color: #d00000;
    font-size: 14px;
    width: 100px;
    height: 32px;
    border-radius: 5px;
    font-weight: 500;
    outline: none;
    transition: 0.7s;
    margin-top: 10px;
}

.all-board .header-board .button-student button {
    width: 120px;
}

.all-board .header-board .button-done button:hover {
    transition: 0.7s;
    background: #d00000;
    color: #fff;
    border: 1px solid transparent;
}

.all-board .header-board .student-number {
    text-align: center;
    width: 60px;
    margin: 0 10px;
}

.all-board .header-board .student-number span {
    color: #444544;
    font-size: 13px;
}

.all-board .header-board .student-number h3 {
    color: #444544;
    font-size: 13px;
}

.all-board .header-board .timer {
    height: 30px;
    background: transparent;
    width: 90px;
    text-align: center;
    border: 1px solid #444544;
    border-radius: 50px;
    margin-top: 10px;
}

.all-board .header-board .timer h1 {
    font-size: 14px;
    line-height: 28px;
    color: #444544;
}

.dis-button {
    background: transparent !important;
    border: 1px solid #aaa !important;
    color: #888 !important;
    cursor: no-drop !important;
    border: 0 !important;
}


/* board style*/

#sketchpad {
    width: 100%;
    height: 435px;
    background-repeat: repeat;
    border-radius: 10px;
    box-shadow: 0 0 10px 1px #ddd;
    background-color: #fff !important;
}

.toolbar {
    width: 55px;
    background-color: #fff;
    text-align: center;
    padding: 14px 0;
    display: inline-block;
    border-radius: 10px;
    box-shadow: 0 0px 10px 1px #ddd;
}

.toolbar .section {
    clear: both;
    margin-bottom: 8px;
}

.toolbar .slider {
    width: 100%;
}

.toolbar .button {
    float: none;
    width: 35px;
    height: 35px;
    color: #444544;
    line-height: 35px;
    cursor: pointer;
    text-align: center;
    margin: 0 auto 5px;
}

.toolbar .button.active {
    background-color: rgba(0, 0, 0, .05);
    color: #444544;
}

.body-overflow {
    overflow: scroll !important;
    overflow-x: hidden !important;
    ;
}

.board-style {
    margin-top: 50px;
}

.color-section {
    display: block;
    position: absolute;
    background: #fff;
    padding: 10px;
    margin: 20px 0;
    top: 0;
    left: 85px;
    z-index: 9;
    border-radius: 10px;
    box-shadow: 0 0 10px 1px #ddd;
}

.color-change {
    background: linear-gradient(to left, red, #000);
    width: 30px;
    height: 30px;
    margin: 5px auto 0;
    border-radius: 5px;
    cursor: pointer;
}

.all-board-section {
    display: flex;
}

.redo {
    transform: scaleX(-1);
}

.toolbar .section #tool-undo {
    display: inline-block;
    width: 40%;
}

.toolbar .section #tool-redo {
    display: inline-block;
    width: 40%;
}

#sketchpad canvas:first-of-type {
    background: #fff;
    z-index: -1;
}

#sketchpad canvas:nth-of-type(4) {
    display: none;
}

.board-right-section {
    width: 85%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px 1px #ddd;
    float: right;
}


/*collapse section*/

.wrapper {
    width: 90%;
}

@media (max-width: 992px) {
    .wrapper {
        width: 100%;
    }
}

.panel-heading {
    padding: 0;
    border: 0;
}

.panel-title>a,
.panel-title>a:active {
    display: block;
    padding: 15px;
    color: #999;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.panel-heading.active .panel-title a {
    color: #444544;
}

.panel-default>.panel-heading {
    background: #fff !important;
}

.panel-default {
    border-color: transparent !important;
}

.panel-title>a,
.panel-title>a:active {
    padding: 15px 0;
    direction: rtl;
}

.panel-body {
    padding: 15px 0;
}

.image-link {
    width: 100%;
    height: 100px;
    overflow: hidden;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 10px;
}

.image-link img {
    margin: 0 auto;
    height: 100%;
}

.card-images {}

.card-images ul {
    width: 100%;
    direction: rtl;
    margin-bottom: 5px;
}

.card-images ul li {
    display: inline-block;
    width: 65px;
    height: 55px;
    border-radius: 5px;
    padding: 3px;
    background: #fff;
    margin-left: 6px;
    box-shadow: 0 0 10px 1px #ddd;
    cursor: pointer;
    position: relative;
}

.card-images ul li img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.card-images ul li i {
    position: absolute;
    z-index: 2;
    background: #fff;
    font-weight: 100;
    font-size: 15px;
    color: #444544;
    top: -10px;
    text-align: center;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50px;
    margin-right: -10px;
}

.large-div {
    width: 300px;
    display: inline;
    height: 85%;
    margin-left: 30px;
    margin-top: 30px;
    position: absolute;
    /*z-index: 1;*/
}

.img-sketch {
    width: 100%;
    height: 100%;
}

#sketchpad canvas {
    z-index: 1;
}

#sketchpad .fa-close {
    position: absolute;
    background: #fff;
    font-weight: 100;
    font-size: 17px;
    color: #444544;
    top: 20px;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50px;
    margin-right: 0;
    z-index: 2;
    left: 20px;
    box-shadow: 0 0 10px 1px #ddd;
    cursor: pointer;
}

.loader-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0;
    margin: 0 auto;
    right: 0;
    background: #fff;
}

.loader-d {
    transform: scale(0.4);
    position: relative;
    top: 50px;
}

.second-loader {
    border-radius: 5px;
}

.second-loader .loader-d {
    top: 25px;
    right: 9px;
}

.loader-image .loader-d div {
    width: 20px;
    height: 20px;
    background: #999;
    border-radius: 50%;
    position: absolute;
}

.d1 {
    animation: animate 2s linear infinite;
}

.d2 {
    animation: animate 2s linear infinite -.4s;
}

.d3 {
    animation: animate 2s linear infinite -.8s;
}

.d4 {
    animation: animate 2s linear infinite -1.2s;
}

.d5 {
    animation: animate 2s linear infinite -1.6s;
}

@-webkit-keyframes animate {
    0% {
        left: 100px;
        top: 0
    }
    80% {
        left: 0;
        top: 0;
    }
    85% {
        left: 0;
        top: -20px;
        width: 20px;
        height: 20px;
    }
    90% {
        width: 40px;
        height: 15px;
    }
    95% {
        left: 100px;
        top: -20px;
        width: 20px;
        height: 20px;
    }
    100% {
        left: 100px;
        top: 0;
    }
}

.third-loader {
    border-radius: 5px;
}

.third-loader .loader-d {
    transform: scale(0.6);
    top: 50%;
    left: 50px;
}


/*start of chat section*/

.chat-section .chat-window .chat-thread {
    width: 100%;
    margin-bottom: 10px;
    padding: 0 5px;
}

.chat-section .chat-window .chat-thread li {
    margin-bottom: 10px;
}

.chat-section .chat-window .chat-thread li.other {
    background: #444544;
    width: 200px;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
    line-height: 20px;
    border-radius: 50px;
    float: right;
    text-align: right;
}

.chat-section .chat-window .chat-thread li.user {
    background: #3d6cff;
    width: 200px;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
    line-height: 20px;
    border-radius: 50px;
    float: left;
    text-align: left;
}

.chat-section .chat-window .chat-thread li p {
    margin-bottom: 0;
}

.chat-section .chat-window textarea {
    width: 100%;
    background: #fff;
    opacity: 1;
    height: 40px;
    resize: none;
    padding: 0;
    border-bottom: 1px solid #aaa;
    outline: none;
    min-height: auto;
    text-align: right;
    font-size: 15px;
}

.chat-section .chat-window textarea::placeholder {
    color: #aaa;
    font-size: 14px;
    transition: 0.7s;
}

.chat-section .chat-window textarea:focus::placeholder {
    transition: 0.7s;
    color: transparent;
}

.chat-section .chat-window textarea::-webkit-scrollbar {
    width: 5px;
}

.chat-section .chat-window textarea::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #ccc;
}


/*scroll*/

.popup-scroll {
    overflow-y: scroll;
    height: 240px;
    overflow-x: hidden;
    padding-right: 6px;
    padding-left: 6px;
}

.popup-scroll::-webkit-scrollbar {
    width: 5px;
}

.popup-scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #ccc;
}

.chat-section .chat-window button {
    background: transparent;
    border: 0;
    width: 36px;
    position: absolute;
    top: 0px;
    outline: none;
    text-decoration: none;
}

.form-send {
    position: relative;
}

.button-show-lesson {
    display: none;
}

@media(max-width: 1200px) {
    .board-right-section {
        width: 100%;
    }
}

@media(max-width: 768px) {
    .toolbar {
        width: 100%;
        padding: 5px 0;
        margin-bottom: 10px;
    }
    .toolbar .button {
        display: inline-block;
        margin: 0 auto;
        margin-right: 3px;
    }
    .toolbar .section {
        display: inline-block;
        margin-bottom: 0;
        direction: rtl;
    }
    .color-change {
        display: inline-block;
        margin: 0 auto;
        margin-right: 5px;
    }
    .toolbar .section #tool-undo {
        width: 25%;
        margin-right: 5px;
        margin-left: 5px;
    }
    .all-board-section {
        display: block;
    }
    .color-section {
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 225px;
        top: 70px;
    }
    .board-right-section {
        margin: 30px auto 0;
        float: none;
        width: 95%;
        border-radius: 10px;
        overflow: hidden;
        padding: 0 20px;
        display: none;
    }
    .chat-section .chat-window .chat-thread li.user {
        width: 80%;
    }
    .chat-section .chat-window .chat-thread li.other {
        width: 80%;
    }
    .all-board .header-board {
        height: auto;
    }
    .all-board .header-board .board-right {
        float: none;
        display: block;
        text-align: center;
    }
    .all-board .header-board .board-left {
        float: none;
        display: block;
        text-align: center;
        margin-top: 10px;
    }
    .all-board .header-board .img-logo {
        display: inline-block;
    }
    .all-board .header-board .user-info {
        display: inline-block;
    }
    .all-board .header-board .timer {
        display: inline-block;
    }
    .all-board .header-board .student-number {
        display: inline-block;
    }
    .button-done {
        display: inline-block;
    }
    .button-show-lesson {
        display: block;
        cursor: pointer;
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        background: #444544;
        text-align: center;
        color: #fff;
        font-size: 25px;
        line-height: 50px;
        border-radius: 50px;
        z-index: 9;
    }
    .button-show-lesson-show {
        display: block;
        position: fixed;
        top: 0;
        background: rgba(0, 0, 0, 0.8);
        left: 0;
        right: 0;
        margin: 0 auto;
        overflow: scroll;
        z-index: 9;
        height: 100%;
    }
    .back-len {
        direction: ltr !important;
    }
    .card-images {
        margin-top: 15px;
        margin-bottom: 10px;
    }
    .button-show-lesson-show-small {
        display: block;
    }
}

@media(max-width: 500px) {
    .all-board .header-board .img-logo {
        display: block;
        margin: 0 auto 10px;
    }
    .all-board .header-board .user-info {
        display: block;
        margin: 0 0 10px 0;
    }
    .all-board .header-board .timer {
        display: block;
        text-align: center;
        margin: 0 auto 10px;
    }
    .all-board .header-board .student-number {
        display: block;
        text-align: center;
        margin: 0 auto 0px;
    }
    .button-done {
        display: block;
        text-align: center;
        margin: 0 auto 10px;
    }
    .all-board .header-board .button-done button {
        margin-top: 0;
    }
    .all-board .header-board .board-left {
        margin-top: 25px;
    }
    .large-div {
        width: 150px;
        display: inline;
        height: 150px;
        margin-left: 10px;
        margin-top: 10px;
    }
    #sketchpad .fa-close {
        top: 15px;
        left: 15px;
        width: 25px;
        height: 25px;
        line-height: 25px;
        font-size: 15px;
    }
    .third-loader .loader-d {
        left: 20px;
        transform: scale(0.5);
    }
}

.student-board {
    width: 100%;
    height: 70vh;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px 1px #ddd;
}

@media(max-width: 768px) {
    .student-board {
        height: 100vh;
    }
}


/*pop up style*/

.popups-cont {
    z-index: -10;
    position: fixed;
    left: 0;
    margin: 0 auto;
    right: 0;
    top: 0;
    text-align: right;
    background: rgba(255, 255, 255, 0.6);
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: z-index 0s 0.8s;
}

.popups-cont.s--popup-active {
    z-index: 1000;
    pointer-events: auto;
    transition: z-index 0s 0s;
}

.popups-cont__overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.35s;
}

.popups-cont.s--popup-active .popups-cont__overlay {
    opacity: 1;
    transition: opacity 0.35s 0.35s;
}

.popup {
    z-index: 2;
    position: relative;
    width: 650px;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 30%;
    height: 300px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.popup .popup__piece:nth-child(1) {
    height: 18.6666666667%;
    width: 14.6666666667%;
}

.popup .popup__piece:nth-child(1) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-21vw, -55vh, -384px) rotateX(393deg) rotateY(233deg);
    transform: translate3d(-21vw, -55vh, -384px) rotateX(393deg) rotateY(233deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 65% 100%);
    clip-path: polygon(0 0, 0 100%, 65% 100%);
}

.popup .popup__piece:nth-child(1) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(53vw, -18vh, 449px) rotateX(361deg) rotateY(362deg);
    transform: translate3d(53vw, -18vh, 449px) rotateX(361deg) rotateY(362deg);
    -webkit-clip-path: polygon(0 0, 65% 100%, 100% 0);
    clip-path: polygon(0 0, 65% 100%, 100% 0);
}

.popup .popup__piece:nth-child(1) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-45vw, 32vh, 460px) rotateX(260deg) rotateY(225deg);
    transform: translate3d(-45vw, 32vh, 460px) rotateX(260deg) rotateY(225deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 65% 100%);
    clip-path: polygon(100% 0, 100% 100%, 65% 100%);
}

.popup.s--closed .popup__piece:nth-child(1) {
    -webkit-transform: translate3d(0, 130vh, 0);
    transform: translate3d(0, 130vh, 0);
}

.popup.s--closed .popup__piece:nth-child(1) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(80vw, 0, 0) rotateX(389deg) rotateY(417deg);
    transform: translate3d(80vw, 0, 0) rotateX(389deg) rotateY(417deg);
}

.popup.s--closed .popup__piece:nth-child(1) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-37vw, 0, 0) rotateX(164deg) rotateY(298deg);
    transform: translate3d(-37vw, 0, 0) rotateX(164deg) rotateY(298deg);
}

.popup.s--closed .popup__piece:nth-child(1) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(60vw, 0, 0) rotateX(151deg) rotateY(123deg);
    transform: translate3d(60vw, 0, 0) rotateX(151deg) rotateY(123deg);
}

.popup .popup__piece:nth-child(2) {
    height: 18.6666666667%;
    width: 20.6666666667%;
}

.popup .popup__piece:nth-child(2) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(48vw, -40vh, 617px) rotateX(273deg) rotateY(370deg);
    transform: translate3d(48vw, -40vh, 617px) rotateX(273deg) rotateY(370deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 41% 100%);
    clip-path: polygon(0 0, 0 100%, 41% 100%);
}

.popup .popup__piece:nth-child(2) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(34vw, -9vh, -854px) rotateX(388deg) rotateY(162deg);
    transform: translate3d(34vw, -9vh, -854px) rotateX(388deg) rotateY(162deg);
    -webkit-clip-path: polygon(0 0, 41% 100%, 100% 0);
    clip-path: polygon(0 0, 41% 100%, 100% 0);
}

.popup .popup__piece:nth-child(2) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-53vw, 15vh, -701px) rotateX(358deg) rotateY(404deg);
    transform: translate3d(-53vw, 15vh, -701px) rotateX(358deg) rotateY(404deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 41% 100%);
    clip-path: polygon(100% 0, 100% 100%, 41% 100%);
}

.popup.s--closed .popup__piece:nth-child(2) {
    -webkit-transform: translate3d(0, 106vh, 0);
    transform: translate3d(0, 106vh, 0);
}

.popup.s--closed .popup__piece:nth-child(2) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-49vw, 0, 0) rotateX(361deg) rotateY(306deg);
    transform: translate3d(-49vw, 0, 0) rotateX(361deg) rotateY(306deg);
}

.popup.s--closed .popup__piece:nth-child(2) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-27vw, 0, 0) rotateX(244deg) rotateY(448deg);
    transform: translate3d(-27vw, 0, 0) rotateX(244deg) rotateY(448deg);
}

.popup.s--closed .popup__piece:nth-child(2) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-11vw, 0, 0) rotateX(358deg) rotateY(342deg);
    transform: translate3d(-11vw, 0, 0) rotateX(358deg) rotateY(342deg);
}

.popup .popup__piece:nth-child(3) {
    height: 18.6666666667%;
    width: 19.6666666667%;
}

.popup .popup__piece:nth-child(3) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-7vw, -58vh, -484px) rotateX(341deg) rotateY(298deg);
    transform: translate3d(-7vw, -58vh, -484px) rotateX(341deg) rotateY(298deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 64% 100%);
    clip-path: polygon(0 0, 0 100%, 64% 100%);
}

.popup .popup__piece:nth-child(3) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(46vw, -40vh, 852px) rotateX(324deg) rotateY(214deg);
    transform: translate3d(46vw, -40vh, 852px) rotateX(324deg) rotateY(214deg);
    -webkit-clip-path: polygon(0 0, 64% 100%, 100% 0);
    clip-path: polygon(0 0, 64% 100%, 100% 0);
}

.popup .popup__piece:nth-child(3) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(15vw, -56vh, -883px) rotateX(153deg) rotateY(353deg);
    transform: translate3d(15vw, -56vh, -883px) rotateX(153deg) rotateY(353deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 64% 100%);
    clip-path: polygon(100% 0, 100% 100%, 64% 100%);
}

.popup.s--closed .popup__piece:nth-child(3) {
    -webkit-transform: translate3d(0, 106vh, 0);
    transform: translate3d(0, 106vh, 0);
}

.popup.s--closed .popup__piece:nth-child(3) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(7vw, 0, 0) rotateX(320deg) rotateY(185deg);
    transform: translate3d(7vw, 0, 0) rotateX(320deg) rotateY(185deg);
}

.popup.s--closed .popup__piece:nth-child(3) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-46vw, 0, 0) rotateX(303deg) rotateY(341deg);
    transform: translate3d(-46vw, 0, 0) rotateX(303deg) rotateY(341deg);
}

.popup.s--closed .popup__piece:nth-child(3) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(22vw, 0, 0) rotateX(282deg) rotateY(420deg);
    transform: translate3d(22vw, 0, 0) rotateX(282deg) rotateY(420deg);
}

.popup .popup__piece:nth-child(4) {
    height: 18.6666666667%;
    width: 16.6666666667%;
}

.popup .popup__piece:nth-child(4) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(41vw, 21vh, -55px) rotateX(429deg) rotateY(136deg);
    transform: translate3d(41vw, 21vh, -55px) rotateX(429deg) rotateY(136deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 35% 100%);
    clip-path: polygon(0 0, 0 100%, 35% 100%);
}

.popup .popup__piece:nth-child(4) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-37vw, -21vh, -799px) rotateX(215deg) rotateY(345deg);
    transform: translate3d(-37vw, -21vh, -799px) rotateX(215deg) rotateY(345deg);
    -webkit-clip-path: polygon(0 0, 35% 100%, 100% 0);
    clip-path: polygon(0 0, 35% 100%, 100% 0);
}

.popup .popup__piece:nth-child(4) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(19vw, -33vh, -585px) rotateX(336deg) rotateY(389deg);
    transform: translate3d(19vw, -33vh, -585px) rotateX(336deg) rotateY(389deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 35% 100%);
    clip-path: polygon(100% 0, 100% 100%, 35% 100%);
}

.popup.s--closed .popup__piece:nth-child(4) {
    -webkit-transform: translate3d(0, 116vh, 0);
    transform: translate3d(0, 116vh, 0);
}

.popup.s--closed .popup__piece:nth-child(4) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-55vw, 0, 0) rotateX(353deg) rotateY(231deg);
    transform: translate3d(-55vw, 0, 0) rotateX(353deg) rotateY(231deg);
}

.popup.s--closed .popup__piece:nth-child(4) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-33vw, 0, 0) rotateX(329deg) rotateY(418deg);
    transform: translate3d(-33vw, 0, 0) rotateX(329deg) rotateY(418deg);
}

.popup.s--closed .popup__piece:nth-child(4) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(38vw, 0, 0) rotateX(217deg) rotateY(125deg);
    transform: translate3d(38vw, 0, 0) rotateX(217deg) rotateY(125deg);
}

.popup .popup__piece:nth-child(5) {
    height: 18.6666666667%;
    width: 11.6666666667%;
}

.popup .popup__piece:nth-child(5) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(9vw, 43vh, -206px) rotateX(298deg) rotateY(325deg);
    transform: translate3d(9vw, 43vh, -206px) rotateX(298deg) rotateY(325deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 57% 100%);
    clip-path: polygon(0 0, 0 100%, 57% 100%);
}

.popup .popup__piece:nth-child(5) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(38vw, 11vh, -780px) rotateX(456deg) rotateY(366deg);
    transform: translate3d(38vw, 11vh, -780px) rotateX(456deg) rotateY(366deg);
    -webkit-clip-path: polygon(0 0, 57% 100%, 100% 0);
    clip-path: polygon(0 0, 57% 100%, 100% 0);
}

.popup .popup__piece:nth-child(5) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(39vw, 15vh, 225px) rotateX(408deg) rotateY(393deg);
    transform: translate3d(39vw, 15vh, 225px) rotateX(408deg) rotateY(393deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 57% 100%);
    clip-path: polygon(100% 0, 100% 100%, 57% 100%);
}

.popup.s--closed .popup__piece:nth-child(5) {
    -webkit-transform: translate3d(0, 129vh, 0);
    transform: translate3d(0, 129vh, 0);
}

.popup.s--closed .popup__piece:nth-child(5) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-33vw, 0, 0) rotateX(197deg) rotateY(465deg);
    transform: translate3d(-33vw, 0, 0) rotateX(197deg) rotateY(465deg);
}

.popup.s--closed .popup__piece:nth-child(5) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(6vw, 0, 0) rotateX(404deg) rotateY(472deg);
    transform: translate3d(6vw, 0, 0) rotateX(404deg) rotateY(472deg);
}

.popup.s--closed .popup__piece:nth-child(5) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(78vw, 0, 0) rotateX(394deg) rotateY(383deg);
    transform: translate3d(78vw, 0, 0) rotateX(394deg) rotateY(383deg);
}

.popup .popup__piece:nth-child(6) {
    height: 18.6666666667%;
    width: 16.6666666667%;
}

.popup .popup__piece:nth-child(6) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-8vw, 11vh, -355px) rotateX(242deg) rotateY(303deg);
    transform: translate3d(-8vw, 11vh, -355px) rotateX(242deg) rotateY(303deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 48% 100%);
    clip-path: polygon(0 0, 0 100%, 48% 100%);
}

.popup .popup__piece:nth-child(6) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-5vw, -40vh, 166px) rotateX(171deg) rotateY(289deg);
    transform: translate3d(-5vw, -40vh, 166px) rotateX(171deg) rotateY(289deg);
    -webkit-clip-path: polygon(0 0, 48% 100%, 100% 0);
    clip-path: polygon(0 0, 48% 100%, 100% 0);
}

.popup .popup__piece:nth-child(6) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(3vw, 30vh, -176px) rotateX(432deg) rotateY(478deg);
    transform: translate3d(3vw, 30vh, -176px) rotateX(432deg) rotateY(478deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 48% 100%);
    clip-path: polygon(100% 0, 100% 100%, 48% 100%);
}

.popup.s--closed .popup__piece:nth-child(6) {
    -webkit-transform: translate3d(0, 102vh, 0);
    transform: translate3d(0, 102vh, 0);
}

.popup.s--closed .popup__piece:nth-child(6) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(69vw, 0, 0) rotateX(145deg) rotateY(339deg);
    transform: translate3d(69vw, 0, 0) rotateX(145deg) rotateY(339deg);
}

.popup.s--closed .popup__piece:nth-child(6) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-73vw, 0, 0) rotateX(146deg) rotateY(464deg);
    transform: translate3d(-73vw, 0, 0) rotateX(146deg) rotateY(464deg);
}

.popup.s--closed .popup__piece:nth-child(6) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-17vw, 0, 0) rotateX(389deg) rotateY(212deg);
    transform: translate3d(-17vw, 0, 0) rotateX(389deg) rotateY(212deg);
}

.popup .popup__piece:nth-child(7) {
    height: 15.6666666667%;
    width: 21.6666666667%;
}

.popup .popup__piece:nth-child(7) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(39vw, -8vh, 362px) rotateX(293deg) rotateY(308deg);
    transform: translate3d(39vw, -8vh, 362px) rotateX(293deg) rotateY(308deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 53% 100%);
    clip-path: polygon(0 0, 0 100%, 53% 100%);
}

.popup .popup__piece:nth-child(7) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-27vw, 4vh, -487px) rotateX(353deg) rotateY(407deg);
    transform: translate3d(-27vw, 4vh, -487px) rotateX(353deg) rotateY(407deg);
    -webkit-clip-path: polygon(0 0, 53% 100%, 100% 0);
    clip-path: polygon(0 0, 53% 100%, 100% 0);
}

.popup .popup__piece:nth-child(7) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(3vw, 4vh, 284px) rotateX(295deg) rotateY(420deg);
    transform: translate3d(3vw, 4vh, 284px) rotateX(295deg) rotateY(420deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 53% 100%);
    clip-path: polygon(100% 0, 100% 100%, 53% 100%);
}

.popup.s--closed .popup__piece:nth-child(7) {
    -webkit-transform: translate3d(0, 143vh, 0);
    transform: translate3d(0, 143vh, 0);
}

.popup.s--closed .popup__piece:nth-child(7) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(17vw, 0, 0) rotateX(159deg) rotateY(156deg);
    transform: translate3d(17vw, 0, 0) rotateX(159deg) rotateY(156deg);
}

.popup.s--closed .popup__piece:nth-child(7) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-44vw, 0, 0) rotateX(204deg) rotateY(259deg);
    transform: translate3d(-44vw, 0, 0) rotateX(204deg) rotateY(259deg);
}

.popup.s--closed .popup__piece:nth-child(7) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(63vw, 0, 0) rotateX(356deg) rotateY(308deg);
    transform: translate3d(63vw, 0, 0) rotateX(356deg) rotateY(308deg);
}

.popup .popup__piece:nth-child(8) {
    height: 15.6666666667%;
    width: 12.6666666667%;
}

.popup .popup__piece:nth-child(8) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-57vw, 4vh, 864px) rotateX(201deg) rotateY(133deg);
    transform: translate3d(-57vw, 4vh, 864px) rotateX(201deg) rotateY(133deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 34% 100%);
    clip-path: polygon(0 0, 0 100%, 34% 100%);
}

.popup .popup__piece:nth-child(8) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(55vw, 42vh, -851px) rotateX(413deg) rotateY(128deg);
    transform: translate3d(55vw, 42vh, -851px) rotateX(413deg) rotateY(128deg);
    -webkit-clip-path: polygon(0 0, 34% 100%, 100% 0);
    clip-path: polygon(0 0, 34% 100%, 100% 0);
}

.popup .popup__piece:nth-child(8) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(52vw, 37vh, 234px) rotateX(443deg) rotateY(349deg);
    transform: translate3d(52vw, 37vh, 234px) rotateX(443deg) rotateY(349deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 34% 100%);
    clip-path: polygon(100% 0, 100% 100%, 34% 100%);
}

.popup.s--closed .popup__piece:nth-child(8) {
    -webkit-transform: translate3d(0, 140vh, 0);
    transform: translate3d(0, 140vh, 0);
}

.popup.s--closed .popup__piece:nth-child(8) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(36vw, 0, 0) rotateX(255deg) rotateY(393deg);
    transform: translate3d(36vw, 0, 0) rotateX(255deg) rotateY(393deg);
}

.popup.s--closed .popup__piece:nth-child(8) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(27vw, 0, 0) rotateX(427deg) rotateY(325deg);
    transform: translate3d(27vw, 0, 0) rotateX(427deg) rotateY(325deg);
}

.popup.s--closed .popup__piece:nth-child(8) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-18vw, 0, 0) rotateX(359deg) rotateY(472deg);
    transform: translate3d(-18vw, 0, 0) rotateX(359deg) rotateY(472deg);
}

.popup .popup__piece:nth-child(9) {
    height: 15.6666666667%;
    width: 14.6666666667%;
}

.popup .popup__piece:nth-child(9) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-5vw, -21vh, -213px) rotateX(308deg) rotateY(279deg);
    transform: translate3d(-5vw, -21vh, -213px) rotateX(308deg) rotateY(279deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 56% 100%);
    clip-path: polygon(0 0, 0 100%, 56% 100%);
}

.popup .popup__piece:nth-child(9) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-21vw, 11vh, -581px) rotateX(471deg) rotateY(202deg);
    transform: translate3d(-21vw, 11vh, -581px) rotateX(471deg) rotateY(202deg);
    -webkit-clip-path: polygon(0 0, 56% 100%, 100% 0);
    clip-path: polygon(0 0, 56% 100%, 100% 0);
}

.popup .popup__piece:nth-child(9) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(16vw, 39vh, 84px) rotateX(380deg) rotateY(364deg);
    transform: translate3d(16vw, 39vh, 84px) rotateX(380deg) rotateY(364deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 56% 100%);
    clip-path: polygon(100% 0, 100% 100%, 56% 100%);
}

.popup.s--closed .popup__piece:nth-child(9) {
    -webkit-transform: translate3d(0, 111vh, 0);
    transform: translate3d(0, 111vh, 0);
}

.popup.s--closed .popup__piece:nth-child(9) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-17vw, 0, 0) rotateX(459deg) rotateY(363deg);
    transform: translate3d(-17vw, 0, 0) rotateX(459deg) rotateY(363deg);
}

.popup.s--closed .popup__piece:nth-child(9) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-4vw, 0, 0) rotateX(384deg) rotateY(174deg);
    transform: translate3d(-4vw, 0, 0) rotateX(384deg) rotateY(174deg);
}

.popup.s--closed .popup__piece:nth-child(9) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-62vw, 0, 0) rotateX(446deg) rotateY(449deg);
    transform: translate3d(-62vw, 0, 0) rotateX(446deg) rotateY(449deg);
}

.popup .popup__piece:nth-child(10) {
    height: 15.6666666667%;
    width: 13.6666666667%;
}

.popup .popup__piece:nth-child(10) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-30vw, -3vh, 187px) rotateX(136deg) rotateY(201deg);
    transform: translate3d(-30vw, -3vh, 187px) rotateX(136deg) rotateY(201deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 41% 100%);
    clip-path: polygon(0 0, 0 100%, 41% 100%);
}

.popup .popup__piece:nth-child(10) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(20vw, 60vh, -124px) rotateX(338deg) rotateY(182deg);
    transform: translate3d(20vw, 60vh, -124px) rotateX(338deg) rotateY(182deg);
    -webkit-clip-path: polygon(0 0, 41% 100%, 100% 0);
    clip-path: polygon(0 0, 41% 100%, 100% 0);
}

.popup .popup__piece:nth-child(10) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(55vw, -53vh, 789px) rotateX(198deg) rotateY(184deg);
    transform: translate3d(55vw, -53vh, 789px) rotateX(198deg) rotateY(184deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 41% 100%);
    clip-path: polygon(100% 0, 100% 100%, 41% 100%);
}

.popup.s--closed .popup__piece:nth-child(10) {
    -webkit-transform: translate3d(0, 110vh, 0);
    transform: translate3d(0, 110vh, 0);
}

.popup.s--closed .popup__piece:nth-child(10) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(13vw, 0, 0) rotateX(379deg) rotateY(288deg);
    transform: translate3d(13vw, 0, 0) rotateX(379deg) rotateY(288deg);
}

.popup.s--closed .popup__piece:nth-child(10) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(71vw, 0, 0) rotateX(415deg) rotateY(307deg);
    transform: translate3d(71vw, 0, 0) rotateX(415deg) rotateY(307deg);
}

.popup.s--closed .popup__piece:nth-child(10) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(46vw, 0, 0) rotateX(400deg) rotateY(219deg);
    transform: translate3d(46vw, 0, 0) rotateX(400deg) rotateY(219deg);
}

.popup .popup__piece:nth-child(11) {
    height: 15.6666666667%;
    width: 19.6666666667%;
}

.popup .popup__piece:nth-child(11) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(49vw, 9vh, -551px) rotateX(244deg) rotateY(157deg);
    transform: translate3d(49vw, 9vh, -551px) rotateX(244deg) rotateY(157deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 56% 100%);
    clip-path: polygon(0 0, 0 100%, 56% 100%);
}

.popup .popup__piece:nth-child(11) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-31vw, -8vh, -417px) rotateX(425deg) rotateY(197deg);
    transform: translate3d(-31vw, -8vh, -417px) rotateX(425deg) rotateY(197deg);
    -webkit-clip-path: polygon(0 0, 56% 100%, 100% 0);
    clip-path: polygon(0 0, 56% 100%, 100% 0);
}

.popup .popup__piece:nth-child(11) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-54vw, -5vh, -838px) rotateX(259deg) rotateY(126deg);
    transform: translate3d(-54vw, -5vh, -838px) rotateX(259deg) rotateY(126deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 56% 100%);
    clip-path: polygon(100% 0, 100% 100%, 56% 100%);
}

.popup.s--closed .popup__piece:nth-child(11) {
    -webkit-transform: translate3d(0, 142vh, 0);
    transform: translate3d(0, 142vh, 0);
}

.popup.s--closed .popup__piece:nth-child(11) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-59vw, 0, 0) rotateX(423deg) rotateY(155deg);
    transform: translate3d(-59vw, 0, 0) rotateX(423deg) rotateY(155deg);
}

.popup.s--closed .popup__piece:nth-child(11) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-30vw, 0, 0) rotateX(446deg) rotateY(159deg);
    transform: translate3d(-30vw, 0, 0) rotateX(446deg) rotateY(159deg);
}

.popup.s--closed .popup__piece:nth-child(11) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-3vw, 0, 0) rotateX(332deg) rotateY(196deg);
    transform: translate3d(-3vw, 0, 0) rotateX(332deg) rotateY(196deg);
}

.popup .popup__piece:nth-child(12) {
    height: 15.6666666667%;
    width: 17.6666666667%;
}

.popup .popup__piece:nth-child(12) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(48vw, -35vh, 154px) rotateX(293deg) rotateY(193deg);
    transform: translate3d(48vw, -35vh, 154px) rotateX(293deg) rotateY(193deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 50% 100%);
    clip-path: polygon(0 0, 0 100%, 50% 100%);
}

.popup .popup__piece:nth-child(12) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(46vw, -30vh, -407px) rotateX(277deg) rotateY(442deg);
    transform: translate3d(46vw, -30vh, -407px) rotateX(277deg) rotateY(442deg);
    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}

.popup .popup__piece:nth-child(12) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-39vw, -22vh, -789px) rotateX(389deg) rotateY(414deg);
    transform: translate3d(-39vw, -22vh, -789px) rotateX(389deg) rotateY(414deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 50% 100%);
    clip-path: polygon(100% 0, 100% 100%, 50% 100%);
}

.popup.s--closed .popup__piece:nth-child(12) {
    -webkit-transform: translate3d(0, 108vh, 0);
    transform: translate3d(0, 108vh, 0);
}

.popup.s--closed .popup__piece:nth-child(12) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(8vw, 0, 0) rotateX(321deg) rotateY(405deg);
    transform: translate3d(8vw, 0, 0) rotateX(321deg) rotateY(405deg);
}

.popup.s--closed .popup__piece:nth-child(12) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-44vw, 0, 0) rotateX(170deg) rotateY(375deg);
    transform: translate3d(-44vw, 0, 0) rotateX(170deg) rotateY(375deg);
}

.popup.s--closed .popup__piece:nth-child(12) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(67vw, 0, 0) rotateX(291deg) rotateY(350deg);
    transform: translate3d(67vw, 0, 0) rotateX(291deg) rotateY(350deg);
}

.popup .popup__piece:nth-child(13) {
    height: 20.6666666667%;
    width: 14.6666666667%;
}

.popup .popup__piece:nth-child(13) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-10vw, 54vh, -80px) rotateX(136deg) rotateY(456deg);
    transform: translate3d(-10vw, 54vh, -80px) rotateX(136deg) rotateY(456deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 33% 100%);
    clip-path: polygon(0 0, 0 100%, 33% 100%);
}

.popup .popup__piece:nth-child(13) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-21vw, 40vh, 75px) rotateX(271deg) rotateY(228deg);
    transform: translate3d(-21vw, 40vh, 75px) rotateX(271deg) rotateY(228deg);
    -webkit-clip-path: polygon(0 0, 33% 100%, 100% 0);
    clip-path: polygon(0 0, 33% 100%, 100% 0);
}

.popup .popup__piece:nth-child(13) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(5vw, -56vh, 263px) rotateX(182deg) rotateY(204deg);
    transform: translate3d(5vw, -56vh, 263px) rotateX(182deg) rotateY(204deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 33% 100%);
    clip-path: polygon(100% 0, 100% 100%, 33% 100%);
}

.popup.s--closed .popup__piece:nth-child(13) {
    -webkit-transform: translate3d(0, 139vh, 0);
    transform: translate3d(0, 139vh, 0);
}

.popup.s--closed .popup__piece:nth-child(13) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(22vw, 0, 0) rotateX(311deg) rotateY(418deg);
    transform: translate3d(22vw, 0, 0) rotateX(311deg) rotateY(418deg);
}

.popup.s--closed .popup__piece:nth-child(13) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(17vw, 0, 0) rotateX(328deg) rotateY(472deg);
    transform: translate3d(17vw, 0, 0) rotateX(328deg) rotateY(472deg);
}

.popup.s--closed .popup__piece:nth-child(13) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-36vw, 0, 0) rotateX(348deg) rotateY(317deg);
    transform: translate3d(-36vw, 0, 0) rotateX(348deg) rotateY(317deg);
}

.popup .popup__piece:nth-child(14) {
    height: 20.6666666667%;
    width: 17.6666666667%;
}

.popup .popup__piece:nth-child(14) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-36vw, 49vh, -766px) rotateX(204deg) rotateY(350deg);
    transform: translate3d(-36vw, 49vh, -766px) rotateX(204deg) rotateY(350deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 32% 100%);
    clip-path: polygon(0 0, 0 100%, 32% 100%);
}

.popup .popup__piece:nth-child(14) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-54vw, -17vh, -861px) rotateX(272deg) rotateY(457deg);
    transform: translate3d(-54vw, -17vh, -861px) rotateX(272deg) rotateY(457deg);
    -webkit-clip-path: polygon(0 0, 32% 100%, 100% 0);
    clip-path: polygon(0 0, 32% 100%, 100% 0);
}

.popup .popup__piece:nth-child(14) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-17vw, -45vh, 294px) rotateX(146deg) rotateY(393deg);
    transform: translate3d(-17vw, -45vh, 294px) rotateX(146deg) rotateY(393deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 32% 100%);
    clip-path: polygon(100% 0, 100% 100%, 32% 100%);
}

.popup.s--closed .popup__piece:nth-child(14) {
    -webkit-transform: translate3d(0, 121vh, 0);
    transform: translate3d(0, 121vh, 0);
}

.popup.s--closed .popup__piece:nth-child(14) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-25vw, 0, 0) rotateX(346deg) rotateY(224deg);
    transform: translate3d(-25vw, 0, 0) rotateX(346deg) rotateY(224deg);
}

.popup.s--closed .popup__piece:nth-child(14) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-35vw, 0, 0) rotateX(229deg) rotateY(329deg);
    transform: translate3d(-35vw, 0, 0) rotateX(229deg) rotateY(329deg);
}

.popup.s--closed .popup__piece:nth-child(14) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-71vw, 0, 0) rotateX(371deg) rotateY(159deg);
    transform: translate3d(-71vw, 0, 0) rotateX(371deg) rotateY(159deg);
}

.popup .popup__piece:nth-child(15) {
    height: 20.6666666667%;
    width: 20.6666666667%;
}

.popup .popup__piece:nth-child(15) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-38vw, -26vh, 163px) rotateX(465deg) rotateY(125deg);
    transform: translate3d(-38vw, -26vh, 163px) rotateX(465deg) rotateY(125deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 44% 100%);
    clip-path: polygon(0 0, 0 100%, 44% 100%);
}

.popup .popup__piece:nth-child(15) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-1vw, 47vh, -575px) rotateX(446deg) rotateY(271deg);
    transform: translate3d(-1vw, 47vh, -575px) rotateX(446deg) rotateY(271deg);
    -webkit-clip-path: polygon(0 0, 44% 100%, 100% 0);
    clip-path: polygon(0 0, 44% 100%, 100% 0);
}

.popup .popup__piece:nth-child(15) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-59vw, 37vh, 661px) rotateX(360deg) rotateY(160deg);
    transform: translate3d(-59vw, 37vh, 661px) rotateX(360deg) rotateY(160deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 44% 100%);
    clip-path: polygon(100% 0, 100% 100%, 44% 100%);
}

.popup.s--closed .popup__piece:nth-child(15) {
    -webkit-transform: translate3d(0, 145vh, 0);
    transform: translate3d(0, 145vh, 0);
}

.popup.s--closed .popup__piece:nth-child(15) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(51vw, 0, 0) rotateX(389deg) rotateY(449deg);
    transform: translate3d(51vw, 0, 0) rotateX(389deg) rotateY(449deg);
}

.popup.s--closed .popup__piece:nth-child(15) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-43vw, 0, 0) rotateX(160deg) rotateY(162deg);
    transform: translate3d(-43vw, 0, 0) rotateX(160deg) rotateY(162deg);
}

.popup.s--closed .popup__piece:nth-child(15) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(42vw, 0, 0) rotateX(387deg) rotateY(279deg);
    transform: translate3d(42vw, 0, 0) rotateX(387deg) rotateY(279deg);
}

.popup .popup__piece:nth-child(16) {
    height: 20.6666666667%;
    width: 19.6666666667%;
}

.popup .popup__piece:nth-child(16) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-3vw, -7vh, -465px) rotateX(457deg) rotateY(215deg);
    transform: translate3d(-3vw, -7vh, -465px) rotateX(457deg) rotateY(215deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 54% 100%);
    clip-path: polygon(0 0, 0 100%, 54% 100%);
}

.popup .popup__piece:nth-child(16) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(45vw, -49vh, -4px) rotateX(461deg) rotateY(216deg);
    transform: translate3d(45vw, -49vh, -4px) rotateX(461deg) rotateY(216deg);
    -webkit-clip-path: polygon(0 0, 54% 100%, 100% 0);
    clip-path: polygon(0 0, 54% 100%, 100% 0);
}

.popup .popup__piece:nth-child(16) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-54vw, -41vh, 366px) rotateX(433deg) rotateY(275deg);
    transform: translate3d(-54vw, -41vh, 366px) rotateX(433deg) rotateY(275deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 54% 100%);
    clip-path: polygon(100% 0, 100% 100%, 54% 100%);
}

.popup.s--closed .popup__piece:nth-child(16) {
    -webkit-transform: translate3d(0, 110vh, 0);
    transform: translate3d(0, 110vh, 0);
}

.popup.s--closed .popup__piece:nth-child(16) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-43vw, 0, 0) rotateX(152deg) rotateY(373deg);
    transform: translate3d(-43vw, 0, 0) rotateX(152deg) rotateY(373deg);
}

.popup.s--closed .popup__piece:nth-child(16) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(61vw, 0, 0) rotateX(348deg) rotateY(212deg);
    transform: translate3d(61vw, 0, 0) rotateX(348deg) rotateY(212deg);
}

.popup.s--closed .popup__piece:nth-child(16) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(47vw, 0, 0) rotateX(264deg) rotateY(173deg);
    transform: translate3d(47vw, 0, 0) rotateX(264deg) rotateY(173deg);
}

.popup .popup__piece:nth-child(17) {
    height: 20.6666666667%;
    width: 14.6666666667%;
}

.popup .popup__piece:nth-child(17) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(38vw, 19vh, -249px) rotateX(253deg) rotateY(328deg);
    transform: translate3d(38vw, 19vh, -249px) rotateX(253deg) rotateY(328deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 48% 100%);
    clip-path: polygon(0 0, 0 100%, 48% 100%);
}

.popup .popup__piece:nth-child(17) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(44vw, -47vh, -503px) rotateX(218deg) rotateY(403deg);
    transform: translate3d(44vw, -47vh, -503px) rotateX(218deg) rotateY(403deg);
    -webkit-clip-path: polygon(0 0, 48% 100%, 100% 0);
    clip-path: polygon(0 0, 48% 100%, 100% 0);
}

.popup .popup__piece:nth-child(17) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-55vw, 10vh, -689px) rotateX(127deg) rotateY(262deg);
    transform: translate3d(-55vw, 10vh, -689px) rotateX(127deg) rotateY(262deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 48% 100%);
    clip-path: polygon(100% 0, 100% 100%, 48% 100%);
}

.popup.s--closed .popup__piece:nth-child(17) {
    -webkit-transform: translate3d(0, 115vh, 0);
    transform: translate3d(0, 115vh, 0);
}

.popup.s--closed .popup__piece:nth-child(17) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(23vw, 0, 0) rotateX(410deg) rotateY(436deg);
    transform: translate3d(23vw, 0, 0) rotateX(410deg) rotateY(436deg);
}

.popup.s--closed .popup__piece:nth-child(17) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-1vw, 0, 0) rotateX(445deg) rotateY(472deg);
    transform: translate3d(-1vw, 0, 0) rotateX(445deg) rotateY(472deg);
}

.popup.s--closed .popup__piece:nth-child(17) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-57vw, 0, 0) rotateX(319deg) rotateY(145deg);
    transform: translate3d(-57vw, 0, 0) rotateX(319deg) rotateY(145deg);
}

.popup .popup__piece:nth-child(18) {
    height: 20.6666666667%;
    width: 12.6666666667%;
}

.popup .popup__piece:nth-child(18) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(21vw, 37vh, 338px) rotateX(470deg) rotateY(440deg);
    transform: translate3d(21vw, 37vh, 338px) rotateX(470deg) rotateY(440deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 42% 100%);
    clip-path: polygon(0 0, 0 100%, 42% 100%);
}

.popup .popup__piece:nth-child(18) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-46vw, 17vh, -530px) rotateX(298deg) rotateY(290deg);
    transform: translate3d(-46vw, 17vh, -530px) rotateX(298deg) rotateY(290deg);
    -webkit-clip-path: polygon(0 0, 42% 100%, 100% 0);
    clip-path: polygon(0 0, 42% 100%, 100% 0);
}

.popup .popup__piece:nth-child(18) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-54vw, 5vh, 577px) rotateX(222deg) rotateY(286deg);
    transform: translate3d(-54vw, 5vh, 577px) rotateX(222deg) rotateY(286deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 42% 100%);
    clip-path: polygon(100% 0, 100% 100%, 42% 100%);
}

.popup.s--closed .popup__piece:nth-child(18) {
    -webkit-transform: translate3d(0, 135vh, 0);
    transform: translate3d(0, 135vh, 0);
}

.popup.s--closed .popup__piece:nth-child(18) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-32vw, 0, 0) rotateX(390deg) rotateY(208deg);
    transform: translate3d(-32vw, 0, 0) rotateX(390deg) rotateY(208deg);
}

.popup.s--closed .popup__piece:nth-child(18) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(69vw, 0, 0) rotateX(394deg) rotateY(282deg);
    transform: translate3d(69vw, 0, 0) rotateX(394deg) rotateY(282deg);
}

.popup.s--closed .popup__piece:nth-child(18) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(36vw, 0, 0) rotateX(218deg) rotateY(121deg);
    transform: translate3d(36vw, 0, 0) rotateX(218deg) rotateY(121deg);
}

.popup .popup__piece:nth-child(19) {
    height: 21.6666666667%;
    width: 13.6666666667%;
}

.popup .popup__piece:nth-child(19) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-17vw, -41vh, -715px) rotateX(462deg) rotateY(305deg);
    transform: translate3d(-17vw, -41vh, -715px) rotateX(462deg) rotateY(305deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 56% 100%);
    clip-path: polygon(0 0, 0 100%, 56% 100%);
}

.popup .popup__piece:nth-child(19) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-9vw, -30vh, -630px) rotateX(479deg) rotateY(187deg);
    transform: translate3d(-9vw, -30vh, -630px) rotateX(479deg) rotateY(187deg);
    -webkit-clip-path: polygon(0 0, 56% 100%, 100% 0);
    clip-path: polygon(0 0, 56% 100%, 100% 0);
}

.popup .popup__piece:nth-child(19) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(16vw, -7vh, 613px) rotateX(249deg) rotateY(339deg);
    transform: translate3d(16vw, -7vh, 613px) rotateX(249deg) rotateY(339deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 56% 100%);
    clip-path: polygon(100% 0, 100% 100%, 56% 100%);
}

.popup.s--closed .popup__piece:nth-child(19) {
    -webkit-transform: translate3d(0, 131vh, 0);
    transform: translate3d(0, 131vh, 0);
}

.popup.s--closed .popup__piece:nth-child(19) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(1vw, 0, 0) rotateX(266deg) rotateY(232deg);
    transform: translate3d(1vw, 0, 0) rotateX(266deg) rotateY(232deg);
}

.popup.s--closed .popup__piece:nth-child(19) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(6vw, 0, 0) rotateX(471deg) rotateY(345deg);
    transform: translate3d(6vw, 0, 0) rotateX(471deg) rotateY(345deg);
}

.popup.s--closed .popup__piece:nth-child(19) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-73vw, 0, 0) rotateX(479deg) rotateY(198deg);
    transform: translate3d(-73vw, 0, 0) rotateX(479deg) rotateY(198deg);
}

.popup .popup__piece:nth-child(20) {
    height: 21.6666666667%;
    width: 17.6666666667%;
}

.popup .popup__piece:nth-child(20) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(2vw, 42vh, -74px) rotateX(336deg) rotateY(139deg);
    transform: translate3d(2vw, 42vh, -74px) rotateX(336deg) rotateY(139deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 69% 100%);
    clip-path: polygon(0 0, 0 100%, 69% 100%);
}

.popup .popup__piece:nth-child(20) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-6vw, -29vh, -684px) rotateX(199deg) rotateY(238deg);
    transform: translate3d(-6vw, -29vh, -684px) rotateX(199deg) rotateY(238deg);
    -webkit-clip-path: polygon(0 0, 69% 100%, 100% 0);
    clip-path: polygon(0 0, 69% 100%, 100% 0);
}

.popup .popup__piece:nth-child(20) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(16vw, 37vh, -445px) rotateX(172deg) rotateY(455deg);
    transform: translate3d(16vw, 37vh, -445px) rotateX(172deg) rotateY(455deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 69% 100%);
    clip-path: polygon(100% 0, 100% 100%, 69% 100%);
}

.popup.s--closed .popup__piece:nth-child(20) {
    -webkit-transform: translate3d(0, 140vh, 0);
    transform: translate3d(0, 140vh, 0);
}

.popup.s--closed .popup__piece:nth-child(20) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(66vw, 0, 0) rotateX(439deg) rotateY(425deg);
    transform: translate3d(66vw, 0, 0) rotateX(439deg) rotateY(425deg);
}

.popup.s--closed .popup__piece:nth-child(20) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(26vw, 0, 0) rotateX(315deg) rotateY(290deg);
    transform: translate3d(26vw, 0, 0) rotateX(315deg) rotateY(290deg);
}

.popup.s--closed .popup__piece:nth-child(20) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-9vw, 0, 0) rotateX(439deg) rotateY(412deg);
    transform: translate3d(-9vw, 0, 0) rotateX(439deg) rotateY(412deg);
}

.popup .popup__piece:nth-child(21) {
    height: 21.6666666667%;
    width: 14.6666666667%;
}

.popup .popup__piece:nth-child(21) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(5vw, -38vh, 895px) rotateX(351deg) rotateY(436deg);
    transform: translate3d(5vw, -38vh, 895px) rotateX(351deg) rotateY(436deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 70% 100%);
    clip-path: polygon(0 0, 0 100%, 70% 100%);
}

.popup .popup__piece:nth-child(21) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(37vw, 10vh, -558px) rotateX(298deg) rotateY(478deg);
    transform: translate3d(37vw, 10vh, -558px) rotateX(298deg) rotateY(478deg);
    -webkit-clip-path: polygon(0 0, 70% 100%, 100% 0);
    clip-path: polygon(0 0, 70% 100%, 100% 0);
}

.popup .popup__piece:nth-child(21) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-41vw, -16vh, -38px) rotateX(257deg) rotateY(176deg);
    transform: translate3d(-41vw, -16vh, -38px) rotateX(257deg) rotateY(176deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 70% 100%);
    clip-path: polygon(100% 0, 100% 100%, 70% 100%);
}

.popup.s--closed .popup__piece:nth-child(21) {
    -webkit-transform: translate3d(0, 115vh, 0);
    transform: translate3d(0, 115vh, 0);
}

.popup.s--closed .popup__piece:nth-child(21) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-44vw, 0, 0) rotateX(194deg) rotateY(193deg);
    transform: translate3d(-44vw, 0, 0) rotateX(194deg) rotateY(193deg);
}

.popup.s--closed .popup__piece:nth-child(21) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(50vw, 0, 0) rotateX(185deg) rotateY(173deg);
    transform: translate3d(50vw, 0, 0) rotateX(185deg) rotateY(173deg);
}

.popup.s--closed .popup__piece:nth-child(21) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(37vw, 0, 0) rotateX(127deg) rotateY(295deg);
    transform: translate3d(37vw, 0, 0) rotateX(127deg) rotateY(295deg);
}

.popup .popup__piece:nth-child(22) {
    height: 21.6666666667%;
    width: 20.6666666667%;
}

.popup .popup__piece:nth-child(22) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-24vw, -4vh, 385px) rotateX(333deg) rotateY(204deg);
    transform: translate3d(-24vw, -4vh, 385px) rotateX(333deg) rotateY(204deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 69% 100%);
    clip-path: polygon(0 0, 0 100%, 69% 100%);
}

.popup .popup__piece:nth-child(22) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(15vw, 30vh, 454px) rotateX(284deg) rotateY(476deg);
    transform: translate3d(15vw, 30vh, 454px) rotateX(284deg) rotateY(476deg);
    -webkit-clip-path: polygon(0 0, 69% 100%, 100% 0);
    clip-path: polygon(0 0, 69% 100%, 100% 0);
}

.popup .popup__piece:nth-child(22) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-35vw, -24vh, -5px) rotateX(469deg) rotateY(162deg);
    transform: translate3d(-35vw, -24vh, -5px) rotateX(469deg) rotateY(162deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 69% 100%);
    clip-path: polygon(100% 0, 100% 100%, 69% 100%);
}

.popup.s--closed .popup__piece:nth-child(22) {
    -webkit-transform: translate3d(0, 150vh, 0);
    transform: translate3d(0, 150vh, 0);
}

.popup.s--closed .popup__piece:nth-child(22) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-68vw, 0, 0) rotateX(190deg) rotateY(150deg);
    transform: translate3d(-68vw, 0, 0) rotateX(190deg) rotateY(150deg);
}

.popup.s--closed .popup__piece:nth-child(22) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(0vw, 0, 0) rotateX(204deg) rotateY(297deg);
    transform: translate3d(0vw, 0, 0) rotateX(204deg) rotateY(297deg);
}

.popup.s--closed .popup__piece:nth-child(22) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-17vw, 0, 0) rotateX(262deg) rotateY(185deg);
    transform: translate3d(-17vw, 0, 0) rotateX(262deg) rotateY(185deg);
}

.popup .popup__piece:nth-child(23) {
    height: 21.6666666667%;
    width: 20.6666666667%;
}

.popup .popup__piece:nth-child(23) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(56vw, 17vh, -251px) rotateX(228deg) rotateY(180deg);
    transform: translate3d(56vw, 17vh, -251px) rotateX(228deg) rotateY(180deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 67% 100%);
    clip-path: polygon(0 0, 0 100%, 67% 100%);
}

.popup .popup__piece:nth-child(23) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-16vw, 54vh, -440px) rotateX(241deg) rotateY(302deg);
    transform: translate3d(-16vw, 54vh, -440px) rotateX(241deg) rotateY(302deg);
    -webkit-clip-path: polygon(0 0, 67% 100%, 100% 0);
    clip-path: polygon(0 0, 67% 100%, 100% 0);
}

.popup .popup__piece:nth-child(23) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-23vw, -20vh, 603px) rotateX(422deg) rotateY(451deg);
    transform: translate3d(-23vw, -20vh, 603px) rotateX(422deg) rotateY(451deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 67% 100%);
    clip-path: polygon(100% 0, 100% 100%, 67% 100%);
}

.popup.s--closed .popup__piece:nth-child(23) {
    -webkit-transform: translate3d(0, 114vh, 0);
    transform: translate3d(0, 114vh, 0);
}

.popup.s--closed .popup__piece:nth-child(23) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-7vw, 0, 0) rotateX(242deg) rotateY(163deg);
    transform: translate3d(-7vw, 0, 0) rotateX(242deg) rotateY(163deg);
}

.popup.s--closed .popup__piece:nth-child(23) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(18vw, 0, 0) rotateX(376deg) rotateY(353deg);
    transform: translate3d(18vw, 0, 0) rotateX(376deg) rotateY(353deg);
}

.popup.s--closed .popup__piece:nth-child(23) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-16vw, 0, 0) rotateX(281deg) rotateY(192deg);
    transform: translate3d(-16vw, 0, 0) rotateX(281deg) rotateY(192deg);
}

.popup .popup__piece:nth-child(24) {
    height: 21.6666666667%;
    width: 12.6666666667%;
}

.popup .popup__piece:nth-child(24) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-58vw, 24vh, -721px) rotateX(458deg) rotateY(231deg);
    transform: translate3d(-58vw, 24vh, -721px) rotateX(458deg) rotateY(231deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 65% 100%);
    clip-path: polygon(0 0, 0 100%, 65% 100%);
}

.popup .popup__piece:nth-child(24) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(3vw, -13vh, -556px) rotateX(264deg) rotateY(278deg);
    transform: translate3d(3vw, -13vh, -556px) rotateX(264deg) rotateY(278deg);
    -webkit-clip-path: polygon(0 0, 65% 100%, 100% 0);
    clip-path: polygon(0 0, 65% 100%, 100% 0);
}

.popup .popup__piece:nth-child(24) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(33vw, 33vh, -507px) rotateX(296deg) rotateY(380deg);
    transform: translate3d(33vw, 33vh, -507px) rotateX(296deg) rotateY(380deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 65% 100%);
    clip-path: polygon(100% 0, 100% 100%, 65% 100%);
}

.popup.s--closed .popup__piece:nth-child(24) {
    -webkit-transform: translate3d(0, 144vh, 0);
    transform: translate3d(0, 144vh, 0);
}

.popup.s--closed .popup__piece:nth-child(24) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(29vw, 0, 0) rotateX(302deg) rotateY(142deg);
    transform: translate3d(29vw, 0, 0) rotateX(302deg) rotateY(142deg);
}

.popup.s--closed .popup__piece:nth-child(24) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(20vw, 0, 0) rotateX(150deg) rotateY(257deg);
    transform: translate3d(20vw, 0, 0) rotateX(150deg) rotateY(257deg);
}

.popup.s--closed .popup__piece:nth-child(24) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-38vw, 0, 0) rotateX(408deg) rotateY(183deg);
    transform: translate3d(-38vw, 0, 0) rotateX(408deg) rotateY(183deg);
}

.popup .popup__piece:nth-child(25) {
    height: 17.6666666667%;
    width: 17.6666666667%;
}

.popup .popup__piece:nth-child(25) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(47vw, 14vh, -101px) rotateX(427deg) rotateY(252deg);
    transform: translate3d(47vw, 14vh, -101px) rotateX(427deg) rotateY(252deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 58% 100%);
    clip-path: polygon(0 0, 0 100%, 58% 100%);
}

.popup .popup__piece:nth-child(25) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(26vw, -52vh, -672px) rotateX(394deg) rotateY(375deg);
    transform: translate3d(26vw, -52vh, -672px) rotateX(394deg) rotateY(375deg);
    -webkit-clip-path: polygon(0 0, 58% 100%, 100% 0);
    clip-path: polygon(0 0, 58% 100%, 100% 0);
}

.popup .popup__piece:nth-child(25) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-30vw, 13vh, -656px) rotateX(367deg) rotateY(199deg);
    transform: translate3d(-30vw, 13vh, -656px) rotateX(367deg) rotateY(199deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 58% 100%);
    clip-path: polygon(100% 0, 100% 100%, 58% 100%);
}

.popup.s--closed .popup__piece:nth-child(25) {
    -webkit-transform: translate3d(0, 133vh, 0);
    transform: translate3d(0, 133vh, 0);
}

.popup.s--closed .popup__piece:nth-child(25) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(55vw, 0, 0) rotateX(297deg) rotateY(398deg);
    transform: translate3d(55vw, 0, 0) rotateX(297deg) rotateY(398deg);
}

.popup.s--closed .popup__piece:nth-child(25) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(32vw, 0, 0) rotateX(251deg) rotateY(156deg);
    transform: translate3d(32vw, 0, 0) rotateX(251deg) rotateY(156deg);
}

.popup.s--closed .popup__piece:nth-child(25) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(60vw, 0, 0) rotateX(328deg) rotateY(324deg);
    transform: translate3d(60vw, 0, 0) rotateX(328deg) rotateY(324deg);
}

.popup .popup__piece:nth-child(26) {
    height: 17.6666666667%;
    width: 16.6666666667%;
}

.popup .popup__piece:nth-child(26) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-46vw, -47vh, 796px) rotateX(230deg) rotateY(230deg);
    transform: translate3d(-46vw, -47vh, 796px) rotateX(230deg) rotateY(230deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 56% 100%);
    clip-path: polygon(0 0, 0 100%, 56% 100%);
}

.popup .popup__piece:nth-child(26) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(6vw, -41vh, -218px) rotateX(254deg) rotateY(194deg);
    transform: translate3d(6vw, -41vh, -218px) rotateX(254deg) rotateY(194deg);
    -webkit-clip-path: polygon(0 0, 56% 100%, 100% 0);
    clip-path: polygon(0 0, 56% 100%, 100% 0);
}

.popup .popup__piece:nth-child(26) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(36vw, 49vh, 386px) rotateX(324deg) rotateY(300deg);
    transform: translate3d(36vw, 49vh, 386px) rotateX(324deg) rotateY(300deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 56% 100%);
    clip-path: polygon(100% 0, 100% 100%, 56% 100%);
}

.popup.s--closed .popup__piece:nth-child(26) {
    -webkit-transform: translate3d(0, 129vh, 0);
    transform: translate3d(0, 129vh, 0);
}

.popup.s--closed .popup__piece:nth-child(26) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-18vw, 0, 0) rotateX(477deg) rotateY(284deg);
    transform: translate3d(-18vw, 0, 0) rotateX(477deg) rotateY(284deg);
}

.popup.s--closed .popup__piece:nth-child(26) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(54vw, 0, 0) rotateX(422deg) rotateY(156deg);
    transform: translate3d(54vw, 0, 0) rotateX(422deg) rotateY(156deg);
}

.popup.s--closed .popup__piece:nth-child(26) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-56vw, 0, 0) rotateX(269deg) rotateY(300deg);
    transform: translate3d(-56vw, 0, 0) rotateX(269deg) rotateY(300deg);
}

.popup .popup__piece:nth-child(27) {
    height: 17.6666666667%;
    width: 16.6666666667%;
}

.popup .popup__piece:nth-child(27) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-41vw, 38vh, 714px) rotateX(183deg) rotateY(310deg);
    transform: translate3d(-41vw, 38vh, 714px) rotateX(183deg) rotateY(310deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 46% 100%);
    clip-path: polygon(0 0, 0 100%, 46% 100%);
}

.popup .popup__piece:nth-child(27) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(50vw, 35vh, -62px) rotateX(432deg) rotateY(472deg);
    transform: translate3d(50vw, 35vh, -62px) rotateX(432deg) rotateY(472deg);
    -webkit-clip-path: polygon(0 0, 46% 100%, 100% 0);
    clip-path: polygon(0 0, 46% 100%, 100% 0);
}

.popup .popup__piece:nth-child(27) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(8vw, -40vh, 728px) rotateX(390deg) rotateY(320deg);
    transform: translate3d(8vw, -40vh, 728px) rotateX(390deg) rotateY(320deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 46% 100%);
    clip-path: polygon(100% 0, 100% 100%, 46% 100%);
}

.popup.s--closed .popup__piece:nth-child(27) {
    -webkit-transform: translate3d(0, 136vh, 0);
    transform: translate3d(0, 136vh, 0);
}

.popup.s--closed .popup__piece:nth-child(27) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(7vw, 0, 0) rotateX(316deg) rotateY(347deg);
    transform: translate3d(7vw, 0, 0) rotateX(316deg) rotateY(347deg);
}

.popup.s--closed .popup__piece:nth-child(27) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-56vw, 0, 0) rotateX(280deg) rotateY(379deg);
    transform: translate3d(-56vw, 0, 0) rotateX(280deg) rotateY(379deg);
}

.popup.s--closed .popup__piece:nth-child(27) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-53vw, 0, 0) rotateX(222deg) rotateY(354deg);
    transform: translate3d(-53vw, 0, 0) rotateX(222deg) rotateY(354deg);
}

.popup .popup__piece:nth-child(28) {
    height: 17.6666666667%;
    width: 18.6666666667%;
}

.popup .popup__piece:nth-child(28) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(32vw, -48vh, -571px) rotateX(380deg) rotateY(142deg);
    transform: translate3d(32vw, -48vh, -571px) rotateX(380deg) rotateY(142deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 38% 100%);
    clip-path: polygon(0 0, 0 100%, 38% 100%);
}

.popup .popup__piece:nth-child(28) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(26vw, 31vh, -250px) rotateX(132deg) rotateY(318deg);
    transform: translate3d(26vw, 31vh, -250px) rotateX(132deg) rotateY(318deg);
    -webkit-clip-path: polygon(0 0, 38% 100%, 100% 0);
    clip-path: polygon(0 0, 38% 100%, 100% 0);
}

.popup .popup__piece:nth-child(28) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(35vw, -52vh, 757px) rotateX(251deg) rotateY(358deg);
    transform: translate3d(35vw, -52vh, 757px) rotateX(251deg) rotateY(358deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 38% 100%);
    clip-path: polygon(100% 0, 100% 100%, 38% 100%);
}

.popup.s--closed .popup__piece:nth-child(28) {
    -webkit-transform: translate3d(0, 122vh, 0);
    transform: translate3d(0, 122vh, 0);
}

.popup.s--closed .popup__piece:nth-child(28) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-45vw, 0, 0) rotateX(253deg) rotateY(189deg);
    transform: translate3d(-45vw, 0, 0) rotateX(253deg) rotateY(189deg);
}

.popup.s--closed .popup__piece:nth-child(28) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(73vw, 0, 0) rotateX(274deg) rotateY(142deg);
    transform: translate3d(73vw, 0, 0) rotateX(274deg) rotateY(142deg);
}

.popup.s--closed .popup__piece:nth-child(28) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-64vw, 0, 0) rotateX(176deg) rotateY(246deg);
    transform: translate3d(-64vw, 0, 0) rotateX(176deg) rotateY(246deg);
}

.popup .popup__piece:nth-child(29) {
    height: 17.6666666667%;
    width: 11.6666666667%;
}

.popup .popup__piece:nth-child(29) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-8vw, -31vh, 862px) rotateX(287deg) rotateY(433deg);
    transform: translate3d(-8vw, -31vh, 862px) rotateX(287deg) rotateY(433deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 31% 100%);
    clip-path: polygon(0 0, 0 100%, 31% 100%);
}

.popup .popup__piece:nth-child(29) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(16vw, -24vh, 306px) rotateX(334deg) rotateY(393deg);
    transform: translate3d(16vw, -24vh, 306px) rotateX(334deg) rotateY(393deg);
    -webkit-clip-path: polygon(0 0, 31% 100%, 100% 0);
    clip-path: polygon(0 0, 31% 100%, 100% 0);
}

.popup .popup__piece:nth-child(29) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(10vw, 23vh, -608px) rotateX(202deg) rotateY(348deg);
    transform: translate3d(10vw, 23vh, -608px) rotateX(202deg) rotateY(348deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 31% 100%);
    clip-path: polygon(100% 0, 100% 100%, 31% 100%);
}

.popup.s--closed .popup__piece:nth-child(29) {
    -webkit-transform: translate3d(0, 135vh, 0);
    transform: translate3d(0, 135vh, 0);
}

.popup.s--closed .popup__piece:nth-child(29) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-10vw, 0, 0) rotateX(252deg) rotateY(309deg);
    transform: translate3d(-10vw, 0, 0) rotateX(252deg) rotateY(309deg);
}

.popup.s--closed .popup__piece:nth-child(29) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(28vw, 0, 0) rotateX(167deg) rotateY(328deg);
    transform: translate3d(28vw, 0, 0) rotateX(167deg) rotateY(328deg);
}

.popup.s--closed .popup__piece:nth-child(29) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(45vw, 0, 0) rotateX(363deg) rotateY(160deg);
    transform: translate3d(45vw, 0, 0) rotateX(363deg) rotateY(160deg);
}

.popup .popup__piece:nth-child(30) {
    height: 17.6666666667%;
    width: 18.6666666667%;
}

.popup .popup__piece:nth-child(30) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(54vw, 21vh, 643px) rotateX(475deg) rotateY(163deg);
    transform: translate3d(54vw, 21vh, 643px) rotateX(475deg) rotateY(163deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 32% 100%);
    clip-path: polygon(0 0, 0 100%, 32% 100%);
}

.popup .popup__piece:nth-child(30) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(17vw, 33vh, 288px) rotateX(354deg) rotateY(219deg);
    transform: translate3d(17vw, 33vh, 288px) rotateX(354deg) rotateY(219deg);
    -webkit-clip-path: polygon(0 0, 32% 100%, 100% 0);
    clip-path: polygon(0 0, 32% 100%, 100% 0);
}

.popup .popup__piece:nth-child(30) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-4vw, -14vh, -673px) rotateX(201deg) rotateY(230deg);
    transform: translate3d(-4vw, -14vh, -673px) rotateX(201deg) rotateY(230deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 32% 100%);
    clip-path: polygon(100% 0, 100% 100%, 32% 100%);
}

.popup.s--closed .popup__piece:nth-child(30) {
    -webkit-transform: translate3d(0, 108vh, 0);
    transform: translate3d(0, 108vh, 0);
}

.popup.s--closed .popup__piece:nth-child(30) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(14vw, 0, 0) rotateX(404deg) rotateY(347deg);
    transform: translate3d(14vw, 0, 0) rotateX(404deg) rotateY(347deg);
}

.popup.s--closed .popup__piece:nth-child(30) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-42vw, 0, 0) rotateX(291deg) rotateY(256deg);
    transform: translate3d(-42vw, 0, 0) rotateX(291deg) rotateY(256deg);
}

.popup.s--closed .popup__piece:nth-child(30) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(15vw, 0, 0) rotateX(206deg) rotateY(248deg);
    transform: translate3d(15vw, 0, 0) rotateX(206deg) rotateY(248deg);
}

.popup .popup__piece:nth-child(31) {
    height: 5.6666666667%;
    width: 21.6666666667%;
}

.popup .popup__piece:nth-child(31) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(39vw, 48vh, -353px) rotateX(302deg) rotateY(430deg);
    transform: translate3d(39vw, 48vh, -353px) rotateX(302deg) rotateY(430deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 44% 100%);
    clip-path: polygon(0 0, 0 100%, 44% 100%);
}

.popup .popup__piece:nth-child(31) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-18vw, -42vh, 666px) rotateX(264deg) rotateY(270deg);
    transform: translate3d(-18vw, -42vh, 666px) rotateX(264deg) rotateY(270deg);
    -webkit-clip-path: polygon(0 0, 44% 100%, 100% 0);
    clip-path: polygon(0 0, 44% 100%, 100% 0);
}

.popup .popup__piece:nth-child(31) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-49vw, -35vh, 243px) rotateX(177deg) rotateY(189deg);
    transform: translate3d(-49vw, -35vh, 243px) rotateX(177deg) rotateY(189deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 44% 100%);
    clip-path: polygon(100% 0, 100% 100%, 44% 100%);
}

.popup.s--closed .popup__piece:nth-child(31) {
    -webkit-transform: translate3d(0, 107vh, 0);
    transform: translate3d(0, 107vh, 0);
}

.popup.s--closed .popup__piece:nth-child(31) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-38vw, 0, 0) rotateX(148deg) rotateY(257deg);
    transform: translate3d(-38vw, 0, 0) rotateX(148deg) rotateY(257deg);
}

.popup.s--closed .popup__piece:nth-child(31) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(66vw, 0, 0) rotateX(176deg) rotateY(354deg);
    transform: translate3d(66vw, 0, 0) rotateX(176deg) rotateY(354deg);
}

.popup.s--closed .popup__piece:nth-child(31) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-24vw, 0, 0) rotateX(438deg) rotateY(223deg);
    transform: translate3d(-24vw, 0, 0) rotateX(438deg) rotateY(223deg);
}

.popup .popup__piece:nth-child(32) {
    height: 5.6666666667%;
    width: 12.6666666667%;
}

.popup .popup__piece:nth-child(32) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-35vw, -13vh, 734px) rotateX(189deg) rotateY(423deg);
    transform: translate3d(-35vw, -13vh, 734px) rotateX(189deg) rotateY(423deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 67% 100%);
    clip-path: polygon(0 0, 0 100%, 67% 100%);
}

.popup .popup__piece:nth-child(32) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(47vw, -28vh, 486px) rotateX(340deg) rotateY(280deg);
    transform: translate3d(47vw, -28vh, 486px) rotateX(340deg) rotateY(280deg);
    -webkit-clip-path: polygon(0 0, 67% 100%, 100% 0);
    clip-path: polygon(0 0, 67% 100%, 100% 0);
}

.popup .popup__piece:nth-child(32) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(49vw, -18vh, 402px) rotateX(242deg) rotateY(350deg);
    transform: translate3d(49vw, -18vh, 402px) rotateX(242deg) rotateY(350deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 67% 100%);
    clip-path: polygon(100% 0, 100% 100%, 67% 100%);
}

.popup.s--closed .popup__piece:nth-child(32) {
    -webkit-transform: translate3d(0, 107vh, 0);
    transform: translate3d(0, 107vh, 0);
}

.popup.s--closed .popup__piece:nth-child(32) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-2vw, 0, 0) rotateX(187deg) rotateY(265deg);
    transform: translate3d(-2vw, 0, 0) rotateX(187deg) rotateY(265deg);
}

.popup.s--closed .popup__piece:nth-child(32) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-36vw, 0, 0) rotateX(465deg) rotateY(314deg);
    transform: translate3d(-36vw, 0, 0) rotateX(465deg) rotateY(314deg);
}

.popup.s--closed .popup__piece:nth-child(32) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(1vw, 0, 0) rotateX(276deg) rotateY(148deg);
    transform: translate3d(1vw, 0, 0) rotateX(276deg) rotateY(148deg);
}

.popup .popup__piece:nth-child(33) {
    height: 5.6666666667%;
    width: 19.6666666667%;
}

.popup .popup__piece:nth-child(33) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(16vw, -43vh, 233px) rotateX(232deg) rotateY(420deg);
    transform: translate3d(16vw, -43vh, 233px) rotateX(232deg) rotateY(420deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 54% 100%);
    clip-path: polygon(0 0, 0 100%, 54% 100%);
}

.popup .popup__piece:nth-child(33) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-28vw, 13vh, 461px) rotateX(478deg) rotateY(181deg);
    transform: translate3d(-28vw, 13vh, 461px) rotateX(478deg) rotateY(181deg);
    -webkit-clip-path: polygon(0 0, 54% 100%, 100% 0);
    clip-path: polygon(0 0, 54% 100%, 100% 0);
}

.popup .popup__piece:nth-child(33) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-2vw, -19vh, 745px) rotateX(355deg) rotateY(214deg);
    transform: translate3d(-2vw, -19vh, 745px) rotateX(355deg) rotateY(214deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 54% 100%);
    clip-path: polygon(100% 0, 100% 100%, 54% 100%);
}

.popup.s--closed .popup__piece:nth-child(33) {
    -webkit-transform: translate3d(0, 136vh, 0);
    transform: translate3d(0, 136vh, 0);
}

.popup.s--closed .popup__piece:nth-child(33) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-1vw, 0, 0) rotateX(337deg) rotateY(352deg);
    transform: translate3d(-1vw, 0, 0) rotateX(337deg) rotateY(352deg);
}

.popup.s--closed .popup__piece:nth-child(33) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(62vw, 0, 0) rotateX(423deg) rotateY(139deg);
    transform: translate3d(62vw, 0, 0) rotateX(423deg) rotateY(139deg);
}

.popup.s--closed .popup__piece:nth-child(33) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-13vw, 0, 0) rotateX(153deg) rotateY(297deg);
    transform: translate3d(-13vw, 0, 0) rotateX(153deg) rotateY(297deg);
}

.popup .popup__piece:nth-child(34) {
    height: 5.6666666667%;
    width: 13.6666666667%;
}

.popup .popup__piece:nth-child(34) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(37vw, -10vh, -634px) rotateX(219deg) rotateY(466deg);
    transform: translate3d(37vw, -10vh, -634px) rotateX(219deg) rotateY(466deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 45% 100%);
    clip-path: polygon(0 0, 0 100%, 45% 100%);
}

.popup .popup__piece:nth-child(34) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(26vw, -20vh, 551px) rotateX(387deg) rotateY(322deg);
    transform: translate3d(26vw, -20vh, 551px) rotateX(387deg) rotateY(322deg);
    -webkit-clip-path: polygon(0 0, 45% 100%, 100% 0);
    clip-path: polygon(0 0, 45% 100%, 100% 0);
}

.popup .popup__piece:nth-child(34) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(34vw, 17vh, -46px) rotateX(305deg) rotateY(124deg);
    transform: translate3d(34vw, 17vh, -46px) rotateX(305deg) rotateY(124deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 45% 100%);
    clip-path: polygon(100% 0, 100% 100%, 45% 100%);
}

.popup.s--closed .popup__piece:nth-child(34) {
    -webkit-transform: translate3d(0, 139vh, 0);
    transform: translate3d(0, 139vh, 0);
}

.popup.s--closed .popup__piece:nth-child(34) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-63vw, 0, 0) rotateX(409deg) rotateY(260deg);
    transform: translate3d(-63vw, 0, 0) rotateX(409deg) rotateY(260deg);
}

.popup.s--closed .popup__piece:nth-child(34) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(15vw, 0, 0) rotateX(334deg) rotateY(338deg);
    transform: translate3d(15vw, 0, 0) rotateX(334deg) rotateY(338deg);
}

.popup.s--closed .popup__piece:nth-child(34) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(6vw, 0, 0) rotateX(429deg) rotateY(340deg);
    transform: translate3d(6vw, 0, 0) rotateX(429deg) rotateY(340deg);
}

.popup .popup__piece:nth-child(35) {
    height: 5.6666666667%;
    width: 15.6666666667%;
}

.popup .popup__piece:nth-child(35) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(32vw, 0vh, 67px) rotateX(241deg) rotateY(343deg);
    transform: translate3d(32vw, 0vh, 67px) rotateX(241deg) rotateY(343deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 39% 100%);
    clip-path: polygon(0 0, 0 100%, 39% 100%);
}

.popup .popup__piece:nth-child(35) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-38vw, -33vh, 107px) rotateX(153deg) rotateY(176deg);
    transform: translate3d(-38vw, -33vh, 107px) rotateX(153deg) rotateY(176deg);
    -webkit-clip-path: polygon(0 0, 39% 100%, 100% 0);
    clip-path: polygon(0 0, 39% 100%, 100% 0);
}

.popup .popup__piece:nth-child(35) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(26vw, 44vh, 783px) rotateX(277deg) rotateY(426deg);
    transform: translate3d(26vw, 44vh, 783px) rotateX(277deg) rotateY(426deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 39% 100%);
    clip-path: polygon(100% 0, 100% 100%, 39% 100%);
}

.popup.s--closed .popup__piece:nth-child(35) {
    -webkit-transform: translate3d(0, 131vh, 0);
    transform: translate3d(0, 131vh, 0);
}

.popup.s--closed .popup__piece:nth-child(35) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-76vw, 0, 0) rotateX(438deg) rotateY(304deg);
    transform: translate3d(-76vw, 0, 0) rotateX(438deg) rotateY(304deg);
}

.popup.s--closed .popup__piece:nth-child(35) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(6vw, 0, 0) rotateX(387deg) rotateY(269deg);
    transform: translate3d(6vw, 0, 0) rotateX(387deg) rotateY(269deg);
}

.popup.s--closed .popup__piece:nth-child(35) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-69vw, 0, 0) rotateX(462deg) rotateY(456deg);
    transform: translate3d(-69vw, 0, 0) rotateX(462deg) rotateY(456deg);
}

.popup .popup__piece:nth-child(36) {
    height: 5.6666666667%;
    width: 16.6666666667%;
}

.popup .popup__piece:nth-child(36) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-7vw, -48vh, -500px) rotateX(156deg) rotateY(256deg);
    transform: translate3d(-7vw, -48vh, -500px) rotateX(156deg) rotateY(256deg);
    -webkit-clip-path: polygon(0 0, 0 100%, 42% 100%);
    clip-path: polygon(0 0, 0 100%, 42% 100%);
}

.popup .popup__piece:nth-child(36) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(-53vw, -59vh, 620px) rotateX(475deg) rotateY(352deg);
    transform: translate3d(-53vw, -59vh, 620px) rotateX(475deg) rotateY(352deg);
    -webkit-clip-path: polygon(0 0, 42% 100%, 100% 0);
    clip-path: polygon(0 0, 42% 100%, 100% 0);
}

.popup .popup__piece:nth-child(36) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(40vw, 46vh, -132px) rotateX(355deg) rotateY(144deg);
    transform: translate3d(40vw, 46vh, -132px) rotateX(355deg) rotateY(144deg);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 42% 100%);
    clip-path: polygon(100% 0, 100% 100%, 42% 100%);
}

.popup.s--closed .popup__piece:nth-child(36) {
    -webkit-transform: translate3d(0, 138vh, 0);
    transform: translate3d(0, 138vh, 0);
}

.popup.s--closed .popup__piece:nth-child(36) .popup__piece-inner:nth-child(1) {
    -webkit-transform: translate3d(-36vw, 0, 0) rotateX(306deg) rotateY(262deg);
    transform: translate3d(-36vw, 0, 0) rotateX(306deg) rotateY(262deg);
}

.popup.s--closed .popup__piece:nth-child(36) .popup__piece-inner:nth-child(2) {
    -webkit-transform: translate3d(75vw, 0, 0) rotateX(403deg) rotateY(284deg);
    transform: translate3d(75vw, 0, 0) rotateX(403deg) rotateY(284deg);
}

.popup.s--closed .popup__piece:nth-child(36) .popup__piece-inner:nth-child(3) {
    -webkit-transform: translate3d(-78vw, 0, 0) rotateX(470deg) rotateY(246deg);
    transform: translate3d(-78vw, 0, 0) rotateX(470deg) rotateY(246deg);
}

.popup__pieces {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.popup__piece {
    float: left;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: -webkit-transform 0s 0s;
    transition: transform 0s 0s;
    transition: transform 0s 0s, -webkit-transform 0s 0s;
}

.popup.s--closed .popup__piece {
    transition: -webkit-transform 0.7s 0.1s cubic-bezier(0.69, -0.47, 0.97, 1.04);
    transition: transform 0.7s 0.1s cubic-bezier(0.69, -0.47, 0.97, 1.04);
    transition: transform 0.7s 0.1s cubic-bezier(0.69, -0.47, 0.97, 1.04), -webkit-transform 0.7s 0.1s cubic-bezier(0.69, -0.47, 0.97, 1.04);
}

.popup__piece:after {
    content: "";
    display: table;
    clear: both;
}

.popup__piece-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #444544;
    opacity: 0;
    transition: opacity 0.28s 0.55s ease-in, -webkit-transform 0.7s 0.1s ease-out;
    transition: opacity 0.28s 0.55s ease-in, transform 0.7s 0.1s ease-out;
    transition: opacity 0.28s 0.55s ease-in, transform 0.7s 0.1s ease-out, -webkit-transform 0.7s 0.1s ease-out;
}

.popup.s--active .popup__piece-inner {
    transition: opacity 0.35s, -webkit-transform 0.7s ease-in-out;
    transition: opacity 0.35s, transform 0.7s ease-in-out;
    transition: opacity 0.35s, transform 0.7s ease-in-out, -webkit-transform 0.7s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) !important;
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) !important;
    opacity: 1;
}

.popup__content {
    position: relative;
    min-height: 300px;
    padding: 30px;
    background: #444544;
    color: #fff;
    transition: opacity 0.2s;
    opacity: 0;
}

.popup.s--active .popup__content {
    transition-delay: 0.6s;
    opacity: 1;
}

.popup__close {
    position: absolute;
    left: 30px;
    top: 30px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.popup__close:before,
.popup__close:after {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 100%;
    height: 2px;
    background: #fff;
}

.popup__close:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.popup__close:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.popup__heading {
    margin-bottom: 20px;
    font-size: 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 500;
}

.blur-section {
    filter: blur(2px);
    transition: 0.5s;
}

.popup__content form {
    direction: rtl;
    text-align: center;
    margin-top: 30px;
}

.popup__content form input[type="radio"] {
    display: none;
}

.popup__content form input[type="radio"]+label {
    font-weight: 500 !important;
    background: transparent;
    padding: 10px 10px 0px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: 0.7s;
}

.popup__content form input[type="radio"]:checked+label {
    background: transparent;
    transition: 0.7s;
}

.popup__content form input[type="radio"]+label p {
    color: #fff;
    font-family: "Neo Sans Arabic";
    font-size: 17px;
    font-weight: 400;
    margin-top: 10px;
    transition: 0.7s;
}

.popup__content form input[type="radio"]:checked+label p {
    color: #ffcc33;
    transition: 0.7s;
}

.popup__content form input[type="radio"]+label span {
    display: inline-block;
    width: 19px;
    height: 19px;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 50%;
    transition: 0.7s;
}

.popup__content form input[type="radio"]:checked++label span {
    transition: 0.7s;
}

.popup__content form input[type="radio"]+.ratelesson span {
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.popup__content form input[type="radio"]+.ratelesson1 span {
    background-image: url("../img/rate/1.png");
    transition: 0.7s;
}

.popup__content form input[type="radio"]:checked+.ratelesson1 span {
    background-image: url("../img/rate/1-active.png");
    transition: 0.7s;
}

.popup__content form input[type="radio"]+.ratelesson2 span {
    background-image: url("../img/rate/2.png");
    transition: 0.7s;
}

.popup__content form input[type="radio"]:checked+.ratelesson2 span {
    background-image: url("../img/rate/2-active.png");
    transition: 0.7s;
}

.popup__content form input[type="radio"]+.ratelesson3 span {
    background-image: url("../img/rate/3.png");
    transition: 0.7s;
}

.popup__content form input[type="radio"]:checked+.ratelesson3 span {
    background-image: url("../img/rate/3-active.png");
    transition: 0.7s;
}

.popup__content form input[type="radio"]+.ratelesson4 span {
    background-image: url("../img/rate/4.png");
    transition: 0.7s;
}

.popup__content form input[type="radio"]:checked+.ratelesson4 span {
    background-image: url("../img/rate/4-active.png");
    transition: 0.7s;
}

.popup__content form .form-group {
    display: inline-block;
    margin: 0 15px;
}

.popup__content form input[type="radio"]+label span,
.popup__content form input[type="radio"]:checked+label span {
    transition: background-color 0.4s linear;
}

.popup__content form input[type="radio"]+label span,
.popup__content form input[type="radio"]:checked+label span {
    transition: background-color 0.4s linear;
}

.popup__content form .form-button button {
    width: 130px;
    padding: 7px 0;
    background: #fff;
    border: 1px solid #fff;
    outline: none;
    font-size: 17px;
    color: #444544;
    font-weight: 600;
    border-radius: 50px;
    margin-top: 20px;
    margin-bottom: 10px;
    transition: 0.7s;
}

.popup__content form .form-button button:hover {
    background: transparent;
    color: #fff;
    transition: 0.7s;
}

@media(max-width: 768px) {
    .popup {
        width: 300px;
        top: 30px;
        height: auto;
    }
    .popup__content form input[type="radio"]+.ratelesson span {
        width: 70px;
        height: 70px;
    }
    .popup__content form .form-group {
        margin: 0 5px;
    }
}


/* START eaxm page */

.tab-content-exam .tab-pane {
    height: auto !important;
    overflow-y: hidden
}

.tabs-exam {
    padding-top: 30px;
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}

.tabs-exam {
    display: flex;
    position: relative;
    overflow: hidden;
    margin: 0 auto 10px;
    width: 100%;
    padding-bottom: 20px;
}

.tabs-exam li {
    line-height: 38px;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 30%;
    margin: 0 auto;
    display: inline-block;
    box-shadow: 0 0 10px 1px #ddd;
    border-radius: 10px;
    text-align: center;
}

.nav-pills.tabs-exam>li+li {
    margin-left: auto
}

.nav-pills.tabs-exam>li.active>a,
.nav-pills.tabs-exam>li.active>a:focus,
.nav-pills.tabs-exam>li.active>a:hover {
    color: #fff;
    background: #444544;
}

.nav-pills.tabs-exam>li>a {
    background: #fff;
}

.exam-section a.download,
.custom-file-upload {
    text-align: center;
    background: #444544;
    display: table;
    margin: auto;
    color: #fff;
    width: 200px;
    height: 45px;
    line-height: 45px;
    border-radius: 10px;
    font-weight: 500
}

.tab-content-exam {
    padding: 25px 15px;
    background: #fff;
    box-shadow: 0 0 10px 1px #ddd;
    width: 96%;
    margin: 0 auto 20px;
    border-radius: 10px;
}

.tab-content-exam .tab-pane {
    padding: 0;
}

.hidden-block {
    display: none;
}

.show-block {
    display: block !important;
}

.upload-wrapper {
    margin: 0 auto 15px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 300px;
    position: relative;
    height: 45px;
    display: block;
    align-items: center;
    padding: 0 10px;
    background: #444544;
    line-height: 45px;
}

.upload-wrapper span {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    color: #fff;
    text-align: center;
}

.upload-wrapper .file-upload {
    position: relative;
    text-align: center;
    color: #868F9B;
    font-weight: normal;
    margin-bottom: 0;
    width: 100%;
}

.upload-wrapper .file-upload {
    color: #fff;
}

.upload-wrapper input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    color: #444544;
    outline: none;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-wrapper+.btn {
    width: 200px;
    height: 45px;
    background-color: #444544;
    color: #fff;
    border-radius: 10px;
}


/* eltdreb */

.section-content .col-md-4 {
    float: right;
}

.trainnig .news-title h3 {
    margin-top: 10px;
}

.trainnig .close-video {
    bottom: 5px;
}

.tab-content-exam .exam-title {
    text-align: center;
}

.tab-content-exam p.alert-word {
    text-align: center;
    color: #3c763d;
    margin-bottom: 20px;
}

.timer {
    direction: initial;
    margin: 20px auto;
}

.timer ul {
    list-style-type: none;
    margin: auto;
    text-align: center;
}

.timer li {
    display: inline-block;
    margin-right: 2em;
}

.timer .numbers {
    display: block;
    line-height: 1.5;
    margin: 0 auto;
}

.timer .name {
    font-size: 20px;
    line-height: 1.5;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.timer #progressBar {
    width: 90%;
    margin: 10px auto;
    height: 22px;
    background-color: #f4f4f9;
}

.timer #progressBar div {
    height: 100%;
    text-align: right;
    padding: 0 10px;
    line-height: 22px;
    width: 0;
    background-color: rgba(6, 18, 55, 0.76);
    box-sizing: border-box;
}

.dis-button {
    background: transparent !important;
    color: #888 !important;
    cursor: no-drop !important;
    z-index: -1;
    position: relative;
}

.exam-form .q-block {
    margin-bottom: 20px;
}

.exam-form .q-block label {
    font-weight: 500;
    color: #444544;
    margin-bottom: 10px;
}

.exam-form .q-block input,
.exam-form .q-block textarea {
    width: 100%;
    padding: 0 20px;
    border: 1px solid #ddd;
    height: 60px;
    min-height: unset;
    line-height: 55px;
    background: #fff;
    outline: none;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    color: #888;
    border-radius: 10px;
    opacity: 1;
    resize: none;
}

.exam-form .q-block input:focus,
.exam-form .q-block textarea:focus {
    outline: none;
    border: 1px solid #444544
}

.exam-form button {
    width: 200px;
    height: 45px;
    line-height: 45px;
    background: #00af00;
    border: 1px solid #00af00;
    color: #fff;
    font-size: 16px;
    margin: 0 auto;
    text-align: center;
    display: block;
    outline: none;
    border-radius: 10px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.exam-form button:hover {
    transition: 0.7s;
    background: #444544;
    color: #fff;
    border-color: #444544;
}

@media (max-width: 699px) {
    .section-content .col-md-4 {
        float: unset;
    }
}

@media (max-width: 768px) {
    .tabs-exam li {
        width: 40%;
    }
    .nav-pills.tabs-exam>li>a {
        padding: 8px;
    }
    .exam-form .q-block label {
        font-size: 13px;
    }
    .exam-form .q-block input,
    .exam-form .q-block textarea {
        padding: 0 10px;
        height: 50px;
        line-height: 50px;
    }
    .upload-wrapper {
        width: 100%;
        display: block;
        height: auto;
    }
    .upload-wrapper .file-upload {
        width: 100%;
        font-size: 16px;
        padding: 10px;
    }
    .upload-wrapper span {
        width: 100%;
        font-size: 16px;
        text-align: center;
    }
}

.ytp-chrome-controls .ytp-button.ytp-youtube-button {
    width: 70px;
    display: none !important;
}

.ytp-fullscreen-button {
    display: none !important;
}

.new-upload {
    background: #fff;
    border-color: #444544;
}

.new-upload span {
    color: #444544;
}

.build-section {
    margin-bottom: 30px;
}

.build-section .title {
    margin-bottom: 30px;
}

.build-section .title h2 {
    color: #444544;
    margin-bottom: 0;
    padding: 0 10px;
    font-size: 25px;
}

.build-section .title h2 i {
    margin-left: 10px;
}

.pagenation-section {
    text-align: center;
    margin-top: 0px;
}

.pagination {
    padding: 0;
    margin: 0 auto;
    text-align: center;
    display: block;
    direction: ltr;
}

.pagination li {
    text-align: center;
    margin: 0 5px;
    direction: rtl;
    display: inline-block;
}

.pagination li a {
    border-radius: 5px !important;
    width: 35px;
    height: 35px;
    border: 1px solid #444544;
    font-size: 16px;
    font-weight: 500;
    line-height: 25px;
    transition: 0.5s;
    color: #444544;
    background: transparent;
}

.pagination li a:hover {
    background: #444544;
    color: #fff;
    transition: 0.5s;
}

.pagination li a.active {
    background: #444544;
    color: #fff;
    transition: 0.5s;
}

.display-b {
    display: block;
}

.user-login a {
    color: #444544;
    font-size: 14px;
}

.user-login .nav-sub-new {
    width: 150px;
    left: 0;
    right: 0;
}

.user-login .nav__submenu li a {
    color: #fff;
    font-size: 14px;
}

.user-login .nav__submenu li {
    padding: 0 0 !important;
}

.all-teacher .section-title {
    box-shadow: 0 0 10px 0 #eee;
    border-radius: 10px;
    padding: 50px 20px 20px;
}

.all-teacher .section-title h3 {
    margin-bottom: 40px;
}

.all-teacher .teacher-card {
    border-color: #ddd;
    background-color: #fff;
}

.all-teacher .teacher-card .action {
    text-align: left;
    font-size: 18px;
    padding: 0 10px;
    color: #fff;
}

.all-teacher .teacher-card .action a {
    color: #444544;
}

.all-teacher .teacher-card .action i {
    width: 30px;
    height: 30px;
    background: #fff;
    border: 1px solid #444544;
    text-align: center;
    line-height: 28px;
    border-radius: 5px;
}

@media(max-width: 550px) {
    .student-card .image,
    .teacher-card .image {
        display: block;
        float: none;
        margin: 0 auto 20px;
    }
    .all-teacher .teacher-card .action {
        text-align: center;
    }
    .all-teacher .section-title h3 {
        line-height: 30px;
    }
    .user-login a {
        color: #444544;
    }
}

a.flash-click {
    background-color: transparent;
    padding: 0px;
    margin-bottom: 20px;
    border-radius: 0px;
    display: inline-block;
    width: 100%;
    color: #a50000;
}

.all-about-size {
    width: 24em;
    margin: 0 auto;
}

.img-logo-site {
    width: 95px;
    height: auto;
    margin-bottom: 40px;
}

.login-style {
    box-shadow: 0 0 0 !important;
    text-align: right !important;
}

.login-style input {
    border: 0 !important;
    border-bottom: 1px solid #C6A779 !important;
    border-radius: 0 !important;
}