@import url(fontiran.css);

body{font-family: IRANSans;font-weight: 300; direction: rtl; text-align: right; padding: 0; margin: 0;}

.center-body{max-width: 1440px; margin: auto;}

@media screen and (max-width: 1200px) {
    .center-body1{max-width: 1200px; margin: auto;}
}



.nav-custom{ position: fixed; top: 0; background: inherit; width: 100%;text-align: left; height: 75px;
    transition: 1.2s; z-index: 20;padding-top: 10px;
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0));
}
.nav-custom-black{background: inherit;}
.nav-custom-hover:hover{background-color: #171c1f;}

.custom-toggler .navbar-toggler {

    border-color: rgb(255,102,203);
}
.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(9,55,244, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.nav-custom .navbar-brand{position: absolute; right: 45px;}
.nav-custom .navbar-toggler:focus{outline: none;}
.nav-custom .navbar-toggler1 .fa-bars{color: #aaaaaa !important; margin-top: 8px; font-size: 22px; opacity: .7; margin-left: -8px;}
.nav-custom .navbar-toggler1{border-color:#aaaaaa; opacity: .7;}
.nav-custom .navbar-brand-box{width: auto; height: 50px;}
.nav-custom .navbar-brand-box img{width: auto; height: 40px; float: right; margin-top: 8px;}
.nav-custom .navbar-brand-box div{float: right; margin-right: 15px; text-align: center;}
.nav-custom .navbar-brand-box h4{font-size: 19px; font-weight: 300; margin-top: 8px;}
.nav-custom .navbar-brand-box h5{font-size: 14px; font-weight: 300;margin-top: -6px;}

.nav-custom .search{width: 10px; background: inherit; margin: 15px auto;transition: .3s;}
.nav-custom .search span{color: #ffffff; font-weight: 100; margin-left: 35%; font-size: 16px;}
.nav-custom .topnav-right {position: absolute; left: 45px;}
.nav-custom .topnav-right a{color: #eeeeee !important; font-weight: 300; font-size: 13px;}
a.activeSecond{color: #ffffff !important;}
.nav-custom-black{background: #171c1f !important;}
.sidenav{display: none;}
@media screen and (max-width: 1200px) {
    .nav-custom .search{width: 45%; margin-right: 160px; margin-top: 15px;}
}

@media screen and (max-width: 1200px) {
    .nav-custom .search{width: 45%; margin-right: 160px; margin-top: 15px;}
}
@media screen and (max-width: 992px) {
    .nav-custom .navbar-brand-box{ height: 40px;}
    .nav-custom .navbar-brand-box img{width: auto; height: 40px;}
    .nav-custom .navbar-brand-box div{float: right; margin-right: 10px;}
    .nav-custom .navbar-brand-box h4{font-size: 15px; margin-top: 8px;}
    .nav-custom .navbar-brand-box h5{font-size: 12px; margin-top: -6px;}
    .nav-custom .search1{margin-right: 35px;}
}
@media screen and (max-width: 768px) {

    .nav-custom{position: fixed; height: 60px;}
    .nav-custom .navbar-toggler{border: none;}
    .nav-custom .navbar-brand{right: 5px !important;}
    .nav-custom .navbar-brand-box img{ margin-top: 3px !important; height: 35px;}
    .nav-custom .topnav-right{left: 27px; top:0;}
    .nav-custom .search{display: none;color: #ffffff !important;}
    .mySidenav .search{color: #ffffff !important;}
    .mySidenav .search span{color: #ffffff !important;}
    .nav-custom .collapse{display: none;}
    .nav-custom .navbar-nav{display: none;}
    .nav-custom .navbar-toggler{display: block; float: left; position: absolute; left: 25px;}
    .sidenav {display: block;text-align: center;height: 100%;width: 0;position: fixed;z-index: 20;
        top: 0;right: 0;background-color: #171c1f;overflow-x: hidden;transition: 0.5s;padding-top: 100px;}
    .sidenav .navbar-language{width: 120px; position: relative; margin: auto; margin-top: 10px;}
    .sidenav .navbar-language a{ background: #333333;width: 120px; margin: auto;}
    .sidenav .navbar-language a span.globe{position: absolute; top: -13px; right: -13px;}
    .sidenav .navbar-language .language{width: 120px; position: absolute; right: -15px; top: 33px; background: #333333;}
    .sidenav .navbar-language .language a{background: #333333 !important;}
    .sidenav a {margin-right: 25px;font-size: 15px;padding: 8px 8px 8px 32px;text-decoration: none;color: #eeeeee;
        display: block;transition: 0.3s;}

    .sidenav a:hover {color: #dddddd;}
    .sidenav img{width: 120px;position: absolute;top: 20px;right: 30px;}
    .sidenav .closebtn {position: absolute;top: 10px;left: 10px;font-size: 36px;}
}
@media screen and (max-width: 575px) {
    .nav-custom .navbar-toggler{float: left; position: absolute; left: 25px;}
    .nav-custom .navbar-brand-box h4{display: none;}
    .nav-custom .navbar-brand-box h5{display: none;}
}

.search-box{background: rgba(0, 0, 0, 0.6); width: 100%; height: 100vh;  position: fixed; right: 0 ; left:0; top:0; bottom: 0; display: none;z-index: 21;}
.search-box-white{background: #ffffff !important;}
.modal-color-black{color: #000000 !important;}
.modal-search-input{width: 400px; height: 30px; position: relative; margin: 50px auto 20px; }
.modal-search-input a{position: absolute; right: 0; top:0; color:#ffffff; font-weight: 100; font-size: 15px;}
.modal-search-input a:hover{color:#ffffff; }
.modal-search-input a span{ display:block; color: #ffffff; font-weight: 100 !important; font-size: 22px; cursor: pointer;}
.search-box-white input{ border-bottom: 1px solid #000000 !important; color: #000000 !important;}
.search-box-white a{ color: #000000 !important;}
.modal-search-input input{width: 100%; height: 100%; border: none; border-bottom: 1px solid #ffffff; background: inherit;
    padding: 2px 25px 5px; font-size: 15px; color: #ffffff; font-weight: 300;}
.modal-search-input input:focus{box-shadow: none; outline: none;}
.modal-search-input button{position: absolute; left: 0; top: 6px; color:#ffffff; background: inherit !important;
    border: none !important; font-size: 14px;}

.modal-search-body{width: 400px; height: auto; margin: 0 auto; padding-right: 10px;}
.modal-search-body ul{list-style: none; margin: 0; padding: 0;}
.modal-search-body ul li{ margin-bottom: 7px;}
.modal-search-body ul li a{color:#ffffff; font-size: 13px; font-weight: 300;}
.modal-search-body ul li a:hover{color:#cccccc; text-decoration: none; }
@media screen and (max-width: 575px) {
    .modal-search-input{width: 80%;}
    .modal-search-body{width: 80%;}
}

.nav-custom1{background: #ffffff !important; border-bottom: 1px solid #eeeeee;}
.navbar-color{color: #bbbbbb !important;}
.navbar-gray{color: #bbbbbb !important;}
#navbar-gray{color: #bbbbbb !important;}

.navbar-language a{color: #313131 !important; border-radius: 33px; padding:3px 9px; margin-top: 4px;
    margin-right: 15px; text-align: center; position: relative;}
.navbar-language a span{color: #797979 !important;}
.navbar-language a span.fa-angle-down{ vertical-align: middle; margin-right: 4px; margin-left: 4px;}
.navbar-language .language{width:75px;font-size: 11px;margin-right: 15px; background: rgba(100,100,100,0.1);
    color: #898989 !important;border-radius: 10px; padding: 4px 0;position: absolute; top: 30px; left: 0; text-align: center;
    display: none; }
.navbar-language .language a{text-decoration: none; color: #ffffff; margin: 0 !important; padding: 0 !important;
height: 20px !important;}
.navbar-language .language a:hover{text-decoration: none; color: #ffffff;}
.navbar-language .language span{display: block;}
.navbar-language .globe{margin-right: 3px;}
.navbar-language .globe img{width: 13px; height: 13px;}


.header-slider{width: 100%; height: 100vh !important; padding: 0; margin: 0; position: relative;}
.header-slider1{width: 100%;height: 10px; padding: 0; margin: 0; position: relative;}
.header-slider .carousel-inner img{height: 100vh !important; width: 100%; object-fit: cover !important;}
.header-slider .carousel-inner1 img{height: 90vh !important;}
.header-slider .carousel-caption h3{font-weight: 300; font-size: 20px; }

.carousel-caption1{text-align: right; width: 100%; height: 80px; right: 0; bottom: 0; padding: 5px 50px 5px 20px;
    background: rgba(0,0,0,.7); }
.carousel-caption1 a{color: #ffffff;}
.carousel-caption1 a:hover{color: #ffffff; text-decoration: none;}
.carousel-caption1 h3{font-size: 18px; font-weight: 300; margin: 0; padding: 5px 0; }
.carousel-caption1 h6{font-size: 12px; font-weight: 300; margin: 0; padding: 10px 0;}

.carousel-caption1-left{position: absolute; left: 15px; bottom: 25px; z-index: 50;}
.carousel-caption1-left>a{float: left; padding: 7px 15px; background: rgba(155,155,155,.1); border-radius: 30px; margin-left: 5px;
    color: #cccccc; text-decoration: none; font-size: 13px; font-weight: 300; transition: 1s;}
.carousel-caption1-left>a:hover{ background: rgba(155,155,155,.4); }

.carousel1-social{position: absolute; left: 50px; bottom: 30px; z-index: 35;}
.carousel1-social a{color: #afafaf; margin-right: 8px;}
.carousel1-social a span{font-size: 14px;}
.carousel1-social a:hover{color: #8f8f8f;}

.carousel1{position: relative;}
.margin-bottom{height: 100px; width: 100%; }

.carousel-indicators{right: 28%;}
.carousel-indicators li{width: 8px !important;height:8px !important;border: 1px solid #ffffff !important;background: inherit !important;
    border-radius: 50%;}
.carousel-indicators li.active{ background: #ffffff !important;}

.carousel-indicators1{ bottom: -125px;  height: 100px !important;}
.carousel-indicators1 li{width: 200px !important; height: 100px !important;border: none !important; border-radius: 0;
    position: relative;}
.carousel-indicators1 li img{width: 98% !important; height: 100%; position: absolute; top: 0; left: 0; opacity: .5;}
.carousel-indicators1 li.active img{opacity: 1;}

.header-slider .social-network{width: auto; height: 40px; position: absolute; right: 0; bottom: 0; padding-right: 30px;
z-index:30;}
.header-slider .social-network1{right: -30px; bottom: 130px;}
.header-slider .social-network .language{width:90px;font-size: 11px;margin: 0; background: rgba(230,230,230,0.3);
    color: #ffffff;border-radius: 10px; position: absolute; bottom: 70px; right: 30px; text-align: center;
    display: none; overflow: hidden; padding: 0; margin-right: 25px;}
.header-slider .social-network .language a{text-decoration: none !important; color:#ffffff !important;}
.header-slider .social-network .language a:hover{text-decoration: none !important; color:#ffffff !important; }
.header-slider .social-network .language span{display: block; padding: 6px 15px; width: 100%;}
.header-slider .social-network .language span:hover{background: rgba(230,230,230,0.3);}
.header-slider .social-network div{width:90px;float: right;font-size: 11px;
    background: rgba(230,230,230,0.3); position: absolute; bottom: 30px; margin-right: 25px;
    color: #ffffff;border-radius: 50px; padding: 8px 10px; cursor: pointer; text-align: center;}
.header-slider .social-network .globe{margin-right: 5px; vertical-align: middle;}
.header-slider .social-network .globe img{width: 14px; height: 14px;}
.header-slider .social-network div span.fa-angle-up{font-size: 11px; margin-left: 5px; vertical-align: middle;}
.header-slider .social-network div span.fa-angle-down{font-size: 11px; margin-left: 5px !important; vertical-align: middle;}

@media screen and (max-width: 992px) {
    .header-slider{height: 450px !important;}
    .header-slider .carousel-inner img{height: 450px !important;}
    .header-slider .social-network{}
    .carousel-indicators1{ padding-right: 25px;}

}
@media screen and (max-width: 768px) {
    .carousel-caption1-left{display: none;}
    .carousel1-social{display: none;}
    .carousel-indicators{right: 23%;}
    .header-slider{height: 350px !important;}
    .header-slider .carousel-inner img{height: 350px !important;}
    .header-slider .social-network{display: none;}
    .carousel-indicators1{ bottom: -125px;  width: 100%; padding-right: 20px;}
}
@media screen and (max-width: 575px) {
    .header-slider{height: 250px !important;}
    .header-slider .carousel-inner img{height: 250px !important;}
    .carousel-indicators{right: 21%;}
    .carousel-indicators1{padding-right: 15px;}
    .carousel-indicators1 li{height: 70px !important;}
    .carousel-indicators1 li img{width: 98% !important; height: 100%;}
}
@media screen and (max-width: 450px) {
    .carousel-indicators1 li {height: 50px !important;}
}




/************* home *************/
.home-body{position: relative;}

.home-body a{color: #ffffff;}
.home-body a:hover{color: #ffffff; text-decoration: none;}
.home-body .home-body-item{padding: 0;margin: 0;margin-bottom: 15px;width: 20% !important;height:320px;float: right;}

.home-card {width: 99%; margin: 3px .5% 10px;position: relative;}
.home-card:hover .content{background: rgba(0, 0, 0, 0.6);}
.home-card img{width:100%; min-height:280px;  max-height:280px; object-fit: cover;}

.home-card .content {transition: .5s;position: absolute;bottom: 42px;background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.4);color: #f1f1f1;width: 100%;padding: 5px 10px;}
.home-card .content h3{font-weight: 300;font-size: 15px;}
.home-card .footer{height: 42px; overflow: hidden;padding: 14px 5px 15px;}
.home-card .footer h5{font-weight: 300; font-size: 12px;color: #aaaaaa; padding-bottom: 15px;}

.show-more{margin: 30px auto 50px !important; text-align: center;}
.show-more a{display: block; color: #aaaaaa; font-size: 14px; transition: .5s; cursor: pointer;}
.show-more a:hover{color: #888888; text-decoration: none;}

@media screen and (max-width: 2000px) {
    .home-body .home-body-item{height: 260px;}
    .home-card img{ min-height:210px;  max-height:210px;}
}
@media screen and (max-width: 1440px) {
    .home-body .home-body-item{height: 210px;}
    .home-card img{ min-height:160px;  max-height:160px;}
}
@media screen and (max-width: 992px) {
    .home-body .home-body-item{height: 180px;}
    .home-card img{min-height:130px !important;max-height:130px !important;}

}
@media screen and (max-width: 768px) {
    .home-body .home-body-item{width: 50% !important; height: 220px !important;}
    .home-card img{min-height:170px !important;max-height:170px !important;}

}
@media screen and (max-width: 575px) {
    .home-body .home-body-item{height: 180px !important;}
    .home-card img{min-height:130px !important;max-height:130px !important;}
}

/************* home *************/



/************* footer ************/

footer.footer{height:230px;background: #ffffff; padding: 25px 50px; border-top: 1px solid rgba(200,200,200,0.5);
    position: relative;}
.footer-right{text-align: center; padding: 0;}
.footer-right img{height: 50px; margin-right: auto; margin-left: auto; margin-top: 25px; margin-bottom: 5px;}
.footer-right h4{font-size: 20px; font-weight: 300; color: #6f6f6f;}
.footer-right h5{font-size: 15px; font-weight: 300; color: #6f6f6f;margin-top: -7px;}

.footer-middle{padding-top: 20px; padding-right: 50px;}
.footer-middle-nav{list-style: none; margin: 0; padding:0;}
.footer-middle-nav-item{float: right;margin: 0; padding:0;}
.footer-middle-nav-item a{color:#6f6f6f; font-size: 12px; font-weight: 300;padding-right: 0; padding-left: 20px;}

.footer-middle-address{clear: both;}
.footer-middle-address span.address{display:block;color:#6f6f6f; font-size: 13px; font-weight: 300;padding-top: 20px;
    padding-bottom: 5px;}
.footer-middle-address span{color: #6f6f6f; margin-left: 35px; font-size: 13px;}

.copy-right{position: absolute; bottom: 5px; right: 120px; border-top:  1px solid rgba(200,200,200,0.5); text-align: left;padding-top: 15px;}
.copy-right span{color: rgba(100,100,100,0.5); direction: ltr; font-size: 12px;}


.footer-left{width: 210px; height:180px; position: absolute; left: 20px; top: 7px; text-align: center;
    padding-top: 35px;}

.footer-language{float: right; position: relative;}
.footer-language a{color: #313131 !important; border-radius: 33px; margin-top: -2px !important;
    margin-right: 0 !important; text-align: center; position: relative; text-decoration: none; font-size: 14px;}

.footer-language .language{width:75px;font-size: 11px;margin-right: 15px;border: 1px solid #efefef;
    color: #ffffff;border-radius: 10px; padding: 4px 0;position: absolute; top: -55px; left: 7px; text-align: center;
    display: none; }
.footer-language .language a{text-decoration: none; color: #ffffff; margin: 0 !important; padding: 0 !important;
    height: 20px !important; display: block; width: 100%; clear: both !important; border-radius: 0 !important;}
.footer-language .language a:hover{text-decoration: none; color: #ffffff; background: #efefef;}
.footer-language .language span{display: block;}
.footer-language .globe{margin-right: 3px;}
.footer-language .angle{vertical-align: middle;}
.footer-language .globe img{width: 12px; height: 12px;}


.footer-left-top{ text-align: center;position: relative; right: -6px; top: 16px;}
.footer-left-top a{color: #6f6f6f; float: right; margin-right: 11px; font-size: 13px;}
.footer-left-top a img{width: 16px; height: 16px; object-fit: cover;}
.footer-left-top a:hover{text-decoration: none; color: #3f3f3f;}

.footer-left-bottom{ text-align: center; position: relative; right: -15px; margin-top: 25px;}
.footer-left-bottom a{width:60px; height:80px;float: right; margin-right: 7px;
    border-radius: 5px; overflow: hidden;}
.footer-left-bottom a img{width:60px; height:80px;}
@media screen and (max-width: 1200px) {
    .copy-right{right: 180px;}
}
@media screen and (max-width: 992px) {
    footer.footer{padding: 25px 10px; }
    .footer-right h4{font-size: 16px; font-weight: 300; color: #bbbbbb;}
    .footer-right h5{font-size: 13px; font-weight: 300; color: #bbbbbb;margin-top: -7px;}
    .footer-middle{ padding-right: 15px;}

    .copy-right{right: 120px;}
}
@media screen and (max-width: 768px) {
    .footer-align-left{text-align: left !important;}
    .footer-align-right{text-align: right !important;}
    footer.footer{height:500px !important; padding: 25px 20px; }
    .footer-right{margin-right: 10px; padding-left: 25px !important; text-align: right;}
    .footer-right h4{font-size: 16px; font-weight: 300; color: #bbbbbb;}
    .footer-right h5{font-size: 13px; font-weight: 300; color: #bbbbbb;margin-top: -7px;}
    .footer-middle{ text-align: right; }
    .footer-middle-nav{width: 100%; }
    .footer-middle-address .address{padding:auto 0; margin:0; }
    .footer-middle-address .tel{padding:auto 0; margin:0; }
    .footer-middle-address .fax{padding:auto 0; margin:0; }

    .copy-right{width: 100%; right: 0; }

    .footer-left{right: 35px !important; left: auto !important; top: 290px !important; text-align: center;}
    .footer-left-right{left: 0 !important; right: auto !important; top: 290px !important; text-align: center;}
}

@media screen and (max-width: 575px) {
    .footer-middle{ padding-right: 15px; }
    .footer-middle-nav-item a{padding-left: 8px; font-size: 12px;}
    .footer-middle-address span.address{font-size: 12px;}
    .footer-middle-address span{display: block;}

    .copy-right{width: 100%; right: 0;top: 500px;}
    .footer-left{right: 35px; left: auto !important;  top: 310px !important;}
    .footer-left-right{left: 0 !important; right: auto !important; top: 310px !important; }

}
@media screen and (max-width: 360px) {
    .copy-right{width: 100%; right: 0;top: 500px;}
    .footer-left{right: 35px; left: auto !important;  top: 340px !important;}
    .footer-left-right{left: 0 !important; right: auto !important; top: 340px !important; }

}


/************* footer ************/




/************** category ************/

.category-main{width: 100%; margin-top: 80px;}
.category-main-header{width: 100%; padding: 25px 70px; position: relative;}
.category-main-header h4{float: right; font-size: 16px; font-weight: 300; color: #aaaaaa;}
.category-main-header h5{float: left; font-size: 14px; font-weight: 300; color: #aaaaaa; cursor: pointer;}
.category-main-header h5 span{margin-left: 5px; margin-top: 5px;}
.category-main-header a{float: left; font-size: 15px; font-weight: 300; color: #333333; background: #eeeeee;
    border-radius: 30px; padding: 5px 25px; margin-top: -7px;}
.category-main-header a:hover{text-decoration: none;}

.category-main-header ul{list-style: none; position:  absolute; left: 45px; top:55px; z-index: 20; display: none;;
    margin: 0; padding: 0; background: rgba(100,100,100,.8); border-radius: 10px;}
.category-main-header ul li{}
.category-main-header ul a{ font-size: 14px; font-weight: 300; color: #ffffff; background: inherit;}
.category-main-header ul a:hover{ text-decoration: none; color: #ffffff;}

.category-item{ padding: 0; border: 2px solid #313446; border-top: none; border-right: none; position: relative;
    min-height:550px;  max-height:550px;  overflow: hidden;}
.category-item img{width:100%; min-height:550px;  max-height:550px;}

.category-item-hover{text-align: center; border: 1px solid #eeeeee; }
.category-item-hover:hover .content{height: 101%;}
.category-item-hover{transition: 1s;}
.category-item-hover img{max-width: 50% !important;}
.category-item img{width:100%; min-height:600px;  max-height:600px; object-fit: cover;}

.category-item-zoom{transition: 1s;position: relative;}
.category-item-zoom:hover .category-img-zoom{}



.category-item .content {position: absolute;bottom: -2px;background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;width: 100%; height: 65px; padding: 20px 20px 15px; transition: .5s; text-align: right;}
.category-item .content h2{font-weight: 300;font-size: 12px;float: right; color: #eeeeee; display: block; clear: both; margin: -10px 0 0;}
.category-item .content h3{font-weight: 300;font-size: 16px;float: right; color: #eeeeee; display: block; clear: both; margin: 5px 0 0;}
.category-item .content a{color: #aaaaaa; font-size: 14px;}
.category-item .content a:hover{color: #bbbbbb; text-decoration: none;}
.category-item .category-item-social{position: absolute; left: 15px; bottom: 20px;}
.category-item .category-item-social a{color: #cccccc; text-decoration: none; margin-right: 10px;}
.category-item .category-item-social a:hover{color: #aaaaaa;}

.content-body h4{font-weight: 300; font-size: 17px; margin-bottom: 20px; display:block;}
.content-body h6{font-weight: 300; font-size: 13px; margin-bottom: 10px; display:block;position: static;}
.content-body h5{font-weight: 300; font-size: 13px; height: 140px; overflow: hidden; margin-top: 15px; margin-bottom: 30px; display:block; }

.content .buy-book{background: #ffffff; padding: 5px 30px; overflow: hidden; font-size: 16px;
    color: #333333 !important; margin-top: 230px; border-radius: 5px; text-align: center;
    display: block; width: 150px;}

.category-aside{width: 100%; min-height: 300px; padding: 40px; overflow: hidden; float: right; z-index: 25;}
.category-aside1{padding: 0 !important;}
.category-aside-item{padding: 40px;}
.category-aside-item h4{font-size: 16px; color: #000000; font-weight: 400; margin-bottom: 15px;}
.category-aside-item a{display:block;font-size: 11px; color: #aaaaaa; font-weight: 300; margin-bottom: 5px;
    overflow: hidden; height: 18px;}
.category-aside-item a:hover{color: #888888;text-decoration: none;}

.category-item-zoom:hover .category-img-zoom{
    -webkit-transform:scale(1.02);
    -ms-transform:scale(1.02);
    transform:scale(1.02);
}
.category-img-zoom{transition: transform 1.5s ease-out, opacity 1.5s, -webkit-transform 1.5s ease-out;}

@media screen and (max-width: 2000px) {
    .category-item{ min-height:480px;  max-height:480px;}
    .category-item img{width:100%; min-height:500px;  max-height:500px;}
    .content .buy-book{margin-top: 130px;}
}
@media screen and (max-width: 1440px) {
    .category-item{min-height:340px;  max-height:340px;}
    .category-item img{width:100%; min-height:340px;  max-height:340px;}
    .content-body h5{height: 90px; margin-top: 5px;margin-bottom: 40px;  }
    .content .buy-book{display: inline;}
}
@media screen and (max-width: 1200px) {
    .category-aside-item{float: right;}
}
@media screen and (max-width: 992px) {
    .category-item .category-item-social{display: none;}
    .category-item{min-height:280px;  max-height:280px; float: right !important;}
    .category-item img{min-height:280px;  max-height:280px;}
    .category-item .content{height: 52px;}
    .content-body h4{font-size: 17px; margin-bottom: 10px}
    .content-body h6{font-size: 13px; margin-bottom: 6px;}
    .content-body h5{height: 90px; margin-top: 5px;margin-bottom: 20px;  }

}
@media screen and (max-width: 768px) {
    .category-main-header{padding: 25px 30px; margin-bottom: 25px;}
    .category-main-header h4{margin-top: 5px;}
    .category-item{float: right;min-height:220px;  max-height:220px;}
    .category-item h2{margin-top: -3px !important;}
    .category-item h3{margin-top: 0;}
    .category-item img{min-height:220px;  max-height:220px;}
    .category-item .content{ height:50px;padding: 9px 5px 15px;}
    .category-item .category-item-social a{margin-right: 5px; font-size: 12px !important;}
    .content-body h4{font-size: 15px; margin-bottom: 6px}
    .content-body h6{font-size: 12px; margin-bottom: 6px;}
    .content-body h5{height: 45px; margin-top: 5px;margin-bottom: 10px;  }
}
@media screen and (max-width: 575px) {
    .category-item{border-bottom: 1px solid #313446;}
    .category-aside{padding: 50px 5px ;}

}
@media screen and (max-width: 425px) {
    .category-main-header{padding: 25px 7px; margin-bottom: 25px;}
    .category-main-header h4{font-size: 14px;}
    .category-main-header a{font-size: 14px;}
}

.category-gallery{width: 100%; text-align: center; margin-bottom: 60px; margin-top: -50px;}
.category-gallery span{font-size: 15px; font-weight: 300; padding: 6px 15px; background: #eeeeee;
    color: #999999; border-radius: 5px; width: 120px; display: block; margin: auto; cursor: pointer;}
.gallery-content{position: fixed; top:0; right: 0; bottom: 0; left: 0; background: #ffffff;
z-index: 25; display: none;}

.gallery-content-close{position: absolute; right: 15px; top: 15px; background: #eeeeee; color: #999999;
    border-radius: 50%; padding: 8px 10px;}

.gallery-image{}

.gallery-image .box-indicators{width: 170px; height: 100vh; position: absolute; top: 0; left: 0; z-index: 30;
    overflow-y: scroll; overflow-x: hidden;}

/* width */
.gallery-image .box-indicators::-webkit-scrollbar {height: 3px; transition: .3s; width: 6px;}
/* Track */
.gallery-image .box-indicators::-webkit-scrollbar-track {background: #ffffff;}
/* Handle */
.gallery-image .box-indicators::-webkit-scrollbar-thumb{background: #898989;border-radius: 5px;}
/* Handle on hover */
.gallery-image .box-indicators::-webkit-scrollbar-thumb:hover {background: #313131;}

.gallery-image .carousel-indicators{ width:170px; height: 100vh;  top: 0; left: 0;}
.gallery-image .carousel-indicators li{width: 100% !important; height: 100px !important;
    border:1px solid #aaaaaa !important; clear: both !important; position: absolute; border-radius: 0;}
.gallery-image .carousel-indicators li:nth-child(1){top:0;}
.gallery-image .carousel-indicators li:nth-child(2){top:100px;}
.gallery-image .carousel-indicators li:nth-child(3){top:200px;}
.gallery-image .carousel-indicators li:nth-child(4){top:300px;}
.gallery-image .carousel-indicators li:nth-child(5){top:400px;}
.gallery-image .carousel-indicators li:nth-child(6){top:500px;}
.gallery-image .carousel-indicators li:nth-child(7){top:600px;}
.gallery-image .carousel-indicators li:nth-child(8){top:700px;}
.gallery-image .carousel-indicators li:nth-child(9){top:800px;}
.gallery-image .carousel-indicators li:nth-child(10){top:900px;}
.gallery-image .carousel-indicators li:nth-child(11){top:1000px;}
.gallery-image .carousel-indicators li:nth-child(13){top:1200px;}
.gallery-image .carousel-indicators li:nth-child(14){top:1300px;}
.gallery-image .carousel-indicators li:nth-child(15){top:1400px;}
.gallery-image .carousel-indicators li:nth-child(16){top:1500px;}
.gallery-image .carousel-indicators li:nth-child(17){top:1600px;}
.gallery-image .carousel-indicators li:nth-child(18){top:1700px;}
.gallery-image .carousel-indicators li:nth-child(19){top:1800px;}
.gallery-image .carousel-indicators li:nth-child(20){top:1900px;}
.gallery-image .carousel-indicators li:nth-child(21){top:2000px;}
.gallery-image li img{width: 100% !important; height: 100%; position: absolute; top: 0; left: 0; opacity: 1;}
.gallery-image .carousel-indicators li.active{opacity: 1;background: #000000;}
.gallery-image .carousel-item img{width: 100% !important;height: auto !important;}

@media screen and (max-width: 768px) {
    .gallery-image .box-indicators{width: 100px; height: 100vh;}
    .gallery-image .carousel-indicators{ width:100px; height: 100vh;}
    .gallery-image .carousel-indicators li{width: 100% !important; height: 50px !important;}
    .gallery-image .carousel-indicators li:nth-child(1){top:0;}
    .gallery-image .carousel-indicators li:nth-child(2){top:50px;}
    .gallery-image .carousel-indicators li:nth-child(3){top:100px;}
    .gallery-image .carousel-indicators li:nth-child(4){top:150px;}
    .gallery-image .carousel-indicators li:nth-child(5){top:200px;}
    .gallery-image .carousel-indicators li:nth-child(6){top:250px;}
    .gallery-image .carousel-indicators li:nth-child(7){top:300px;}
    .gallery-image .carousel-indicators li:nth-child(8){top:350px;}
    .gallery-image .carousel-indicators li:nth-child(9){top:400px;}
    .gallery-image .carousel-indicators li:nth-child(10){top:450px;}
    .gallery-image .carousel-indicators li:nth-child(11){top:500px;}
    .gallery-image .carousel-indicators li:nth-child(13){top:550px;}
    .gallery-image .carousel-indicators li:nth-child(14){top:600px;}
    .gallery-image .carousel-indicators li:nth-child(15){top:650px;}
    .gallery-image .carousel-indicators li:nth-child(16){top:700px;}
    .gallery-image .carousel-indicators li:nth-child(17){top:750px;}
    .gallery-image .carousel-indicators li:nth-child(18){top:800px;}
    .gallery-image .carousel-indicators li:nth-child(19){top:850px;}
    .gallery-image .carousel-indicators li:nth-child(20){top:900px;}
    .gallery-image .carousel-indicators li:nth-child(21){top:950px;}

}

.category-body-header{width: 800px; margin: auto; position: relative;}
.category-body .category-item-social{width: 800px; margin: auto; margin-bottom: 10px;}
.category-body .category-item-social a{color: #cccccc; text-decoration: none; margin-left: 10px;}
.category-body .category-item-social a:hover{color: #aaaaaa;}
.category-body-header h5{font-size: 13px; font-weight: 300; color: #afafaf;height: 120px;
    overflow: hidden; position: relative; width: 100%;}
.category-body-header span.show-more{ display:block;font-size: 13px; font-weight: 300; background: #eeeeee; color: #666666; width: 120px;
    margin: 40px auto; padding: 8px; text-align: center; cursor: pointer; border-radius: 30px;}

.category-map{width: 70%; height: 750px; margin: auto; background: #afafaf;}

.category-info{width: 1000px; margin: auto;}
.category-info h4{font-size: 16px; font-weight: 300; text-align: center; margin-bottom: 70px; color: #6f6f6f;}
.category-info ul{list-style: none; margin: 0; padding: 0;}
.category-info ul li{width: 48%; margin:0 1%; float: right; border-bottom: 1px solid #cfcfcf; color: #bfbfbf;
    padding: 30px 20px; font-size: 14px;}
.category-info ul li span:first-child{display:block; width: 30%; float: right;}
.category-info ul li span:last-child{display:block; width: 70%;float: right;text-align: center;}


.stats-header{width: 575px !important; height: auto; margin: auto; padding: 80px 0; text-align: center;}
.stats-header ul{list-style: none; margin: 0; padding: 0; padding-bottom: 10px; width:  575px;;
    border-bottom: 1px solid rgba(240,240,240,.5);float: right;}
.stats-header ul li{float: right; margin: 0;position: relative; padding: 0; text-align: center;
}
.stats-header ul li a{color: #aaaaaa; text-decoration: none;}
.stats-header ul div.news-header-border{height: 4px; width: 60%; background: #555555;
    position: absolute; bottom: -23px; right: 20%; border: 1px solid #555555; border-radius: 15px; margin: auto; }

.category-similar{width: 1200px; height: 300px; margin: auto; margin-top: 100px; margin-bottom:50px;clear: both;}
.category-similar a{color: #ffffff;}
.category-similar a:hover{color: #ffffff; text-decoration: none;}
.category-similar-item{width: 44%; height: 100%; margin: 0 3%; position: relative; float: right;}
.modal-video-body{width: 80%; max-width: 1440px; height: auto; margin: 0 auto; padding: 50px; padding-top: 25px;}
.modal-video-body video{width: 100%; height: auto;}

@media screen and (max-width: 768px) {
    .modal-video-body{width: 100%; height: auto;padding: 50px 0 0;}
}
.project-movie-icon{width: 6%; height: 6%; position: absolute; right: 47%; top: 47%; z-index: 5;
    display: block; font-size: 46px;}
.category-similar img{width: 100%; height: 100%; object-fit: cover;}
.category-similar h4{font-size: 16px; font-weight: 300; position: absolute; right: 0; bottom: 0;
    width: 100%; padding: 15px; background: rgba(0,0,0,.5); margin: 0;}
.category-similar-header{width:100%; font-size: 18px; padding:40px; padding-bottom: 20px;}
.category-slider-header{width:1200px; margin: 100px auto -50px; color: #afafaf;
    padding: 0 35px; }
.category-slider-header h4{font-weight: 300; font-size: 18px;}

.owl-carousel-custom{
    width: 1200px; margin: auto;margin-top: 150px !important; padding-top: 0;
}
.item-custom{width: 88%; height: 300px; margin: 0 6%; position: relative; float: right;}
.item-custom img{width: 100%; height: 100%; object-fit: cover;}
.item-custom h4{font-size: 16px; font-weight: 300; position: absolute; right: 0; bottom: 0;
    width: 100%; padding: 15px; background: rgba(0,0,0,.5); margin: 0;}

#category-slider{ margin-bottom: 120px;}
#category-slider .carousel-indicators{bottom: -75px;right: 27% !important;}
#category-slider .carousel-indicators li{border:1px solid #aaaaaa !important;}
#category-slider .carousel-indicators li.active{background-color: #aaaaaa !important;}


@media screen and (max-width: 2000px) {
    .category-map{height: 650px;}
}
@media screen and (max-width: 1440px) {
    .category-map{width:82%; height: 500px;}
    .category-info{width: 84%;}
    .category-similar{width: 90%; height: 330px;}
    .item-custom{width: 90%;}
}
@media screen and (max-width: 1200px) {
    .category-map{width:86%;height: 500px;}
    .category-similar{ height: 280px;}
    .item-custom{height: 280px;}
}
@media screen and (max-width: 992px) {
    .category-body-header{width: 90%;}
    .category-info{width: 90%;}
    .category-similar{width: 90%; height: 240px;}
    .item-custom{height: 240px;}
}
@media screen and (max-width: 768px) {
    .category-body .category-item-social{width: 98% !important;}
    .category-body-header{width: 98%;}
    .category-map{width:100%; height: 350px;}
    .category-info{width: 98%;}
    .category-slider-header{width: 90%;padding-right: 0;}
    .category-similar{width: 98%;height: 200px;}
    .category-similar-header{font-size: 16px; padding:25px; padding-bottom: 20px;}
    .item-custom{height: 200px;}
}
@media screen and (max-width: 575px) {
    .category-map{width:100%; height: 300px;}
    .category-info{width: 98%;}
    .category-info ul li{width: 100%;}
    .category-similar{width: 98%; height: 140px}
    .category-similar-item h4{font-size: 12px !important;}
    .item-custom{height: 140px;}
    .item-custom h4{font-size: 12px !important;}
    .stats-header{width: 100% !important;}
    .stats-header ul{width: 100% !important;}
    .category-similar-header{margin-right: 0; padding-right: 10px;}

}
@media screen and (max-width: 425px) {
    .category-map{width:100%; height: 250px;}
}
/************** category ************/


/************** news ***************/

.news{width: 1440px; margin: auto;}
.news-content{width: 1440px; margin: auto;}
.news-header{width: 768px; height: auto; margin: 0 auto 80px; padding: 80px 0 2px ; text-align: center;overflow-x: scroll;
    overflow-y:hidden;white-space: nowrap; transition: .3s;}
    /*
    .news-header:hover{overflow-x: scroll; transition: .3s;}
    */
/* width */
.news-header::-webkit-scrollbar {height: 3px; transition: .3s;}

/* Track */
.news-header::-webkit-scrollbar-track {}

/* Handle */
.news-header::-webkit-scrollbar-thumb{background: #ffffff;border-radius: 5px;}
/* Handle on hover */
.news-header::-webkit-scrollbar-thumb:hover {background: #cfcfcf;}
.news-header:hover::-webkit-scrollbar-thumb{background: #cfcfcf !important;}

.news-header ul{list-style: none; margin: 0; padding: 0; padding-bottom: 10px;
    border-bottom: 1px solid rgba(240,240,240,.5);float: right;}
.news-header ul li{float: right; margin: 0;position: relative;padding: 0; text-align: center;  min-width: 8%;
    }
.news-header ul li a{color: #aaaaaa; text-decoration: none;}
.news-header ul div.news-header-border{height: 4px; width: 100%; background: #555555;
    position: absolute; bottom: -13px; right: 0; border: 1px solid #555555; border-radius: 15px; }


.news-filter{width: 180px; margin: -30px auto 30px; position: relative; overflow: visible !important; text-align: center;
    padding-bottom:30px;  }
.news-filter h5{clear: both; font-size: 13px; font-weight: 300; color: #aaaaaa; cursor: pointer; margin-top: 160px;}
.news-filter h5 span{margin-left: 5px; margin-top: 5px;}
.news-filter ul.filter-list{list-style: none; position:  absolute; right:-10px;  top:25px; z-index: 20; display: none;;
    margin: 0; padding: 10px 0; background: rgba(100,100,100,.8); border-radius: 10px; width: 220px;}
.news-filter ul.filter-list li{ width: 200px;}
.news-filter ul.filter-list a{ font-size: 14px; font-weight: 300; color: #ffffff !important; background: inherit;}
.news-filter ul.filter-list a:hover{ text-decoration: none; color: #ffffff;}

.news-header ul li a{color:#999999; font-size: 15px; font-weight: 400;}
.news-header ul li a:hover{color:#999999; text-decoration: none;}

.news-header h5{clear: both; font-size: 13px; font-weight: 300; color: #aaaaaa; cursor: pointer; margin-top: 160px;}
.news-header h5 span{margin-left: 5px; margin-top: 5px;}

.news-body{ clear: both; margin-top: 50px; padding: 0 100px 0 100px;}
.news-body-item{width: 100%; margin-bottom: 45px;}
.news-body-item h4{font-weight: 300; font-size: 18px; color: #999999; margin-bottom:15px;}
.news-body-item h4 a{color: #999999;}
.news-body-item h4 a:hover{color: #999999; text-decoration: none;}
.news-body-item .news-items-title{font-weight: 400; font-size: 18px; color: #888888; margin-bottom:15px;}
.news-body-item h5{font-weight: 300; font-size: 13px; color: #aaaaaa; clear: both; height: 35px; line-height: 18px;
    overflow: hidden;}
.news-body-item h6{font-weight: 300; font-size: 13px; color: #aaaaaa; clear: both; line-height: 18px;
    overflow: hidden;}
.news-body-item .news-icon{margin-top: -13px; }
.news-body .news-social{float: right; padding: 18px 0;}
.news-body .news-social a{color: #cccccc; text-decoration: none; margin-left: 10px; font-size: 13px;}
.news-body .news-social a:hover{color: #bbbbbb;}
.news-body-item .news-pdf{float: right; padding: 18px 0;}
.news-body-item .news-pdf a{color: #ffffff;}
.news-body-item .news-pdf a:hover{color: #ffffff; text-decoration: none;}
.news-body-item .news-pdf span{width: 25px; height: 25px; background: #cccccc; border-radius: 4px; font-size: 12px;
    padding: 0; font-weight: 400;}
.news-body-item .news-date{float: right; margin-right: 20px;padding: 18px 0;}
.news-body-item .news-date span {color: #aaaaaa; font-size: 14px; margin-left: 4px;}
.news-body-item img{width: 100%; object-fit: cover;}

.news-footer{border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; padding: 10px 0 100px;}
.news-footer-right{border-left: 1px solid #eeeeee;  padding: 20px 0  30px 30px;}
.news-footer-right  h4{font-weight: 400; font-size: 18px; color: #999999; margin-bottom:15px;}
.news-footer-right  h5{font-weight: 300; font-size: 13px; color: #999999; clear: both;}
.news-footer-form{width: 60%; float: left; margin-top: 50px; margin-left: 70px;}
.news-footer-right input{width: 100%; margin-bottom: 10px !important; font-size: 13px; color: #cccccc !important;
    border-radius: 7px; border-color:#eeeeee; }
.news-footer-right input:focus{outline: none; box-shadow: none; border-color: #eeeeee;}
.news-footer-right input::placeholder{color: #cccccc;}
.news-footer-right select{width: 100%; font-size: 13px; color: #cccccc;border-radius: 7px;border-color:#eeeeee;}
.news-footer-right select:focus{outline: none; box-shadow: none; border-color: #eeeeee;}
.news-footer-right button{float: left;border-radius: 7px; width: 110px; color: #666666;}

.news-footer-left{padding: 0 15px 0 0;}
.news-footer-left .keywords{clear: both;}
.news-footer-left .keywords h5{font-weight: 300; font-size: 13px; color: #999999; clear: both; margin-bottom: 22px;}
.news-footer-left .keywords a{float: right;border-radius: 7px; color: #888888; background: #dddddd; padding: 3px 8px;
    font-size: 11px; margin-left: 5px; margin-bottom: 5px;}
.news-footer-left .keywords a:hover{color: #666666; text-decoration: none;}


@media screen and (max-width: 1440px) {
    .news{width: 100%; padding: 0 100px 0 150px;}
    .news-content{width: 100%; padding: 0 100px;}
}
@media screen and (max-width: 1200px) {
    .news{ padding: 0 50px;}
    .news-content{width: 100%; padding: 0;}
    .news-footer-right{padding: 5px; float: right;}
    .news-footer-left{float: right;}
}
@media screen and (max-width: 992px) {
    .news-body{ padding: 0 25px 0 25px;}
    .news-body-item img{height: 350px;}
    .news-footer-right{padding: 5px; border-left: none;}
    .news-footer-left{margin-top: 50px;}
}
@media screen and (max-width: 768px) {
    .news{width: 100%; padding: 5px;}
    .news-content{width: 100%; padding: 5px;}
    .news-header{width: 100%; }

    .news-body{ padding: 0 5px 0 5px;}
    .news-body-item img{height: 300px;}
    .news-footer-right{padding: 20px 10px; width: 100%;}
    .news-footer-left{padding: 20px;}
    .news-footer-form{width: 80%;}
}
@media screen and (max-width: 575px) {
    .news-header ul li a{color:#999999; font-size: 12px;}
    .news-body-item img{height: 200px;}
}
@media screen and (max-width: 425px) {
    .news-header ul li{ margin: auto 0; width: 60px;}
    .news-header ul li a{color:#999999; font-size: 10px;}
}

/************** news ***************/





/************** coworker ***************/

.worker-profile-toggle{display: none; position: absolute; right: 0; top: 0; left: 0; bottom: 0; background: #ffffff !important;
z-index: 20; width: 100%; height: 100% !important;}
.center-coworker{width: 2000px; margin: auto;}
.worker-body{ padding: 0 100px;}
.worker-body a{color: #666666; cursor: pointer;}
.worker-body a:hover{color: #333333;}
.worker-body-item{width: 18%; padding: 0; height: auto ; margin:10px 1% 50px;float: right; text-align: center;}
.worker-body-item img{width: 90%; height: auto;}
.worker-body-item h4{font-size: 15px; margin-top: 15px;}
.hr{width: 100%; height: 1px; background: #eeeeee; float: right; margin-top: 60px;}

.worker-profile{}

.worker-profile-right{width: 40%; float: right; padding: 50px 5% 50px 5%;}
.worker-profile-right span{width: 30px; height: 30px; border: 3px solid #cccccc; color: #cccccc; border-radius: 50%;
    text-align: center; padding-top: 3px; margin-bottom: 60px; cursor: pointer;}
.worker-profile-right h2{color: #666666; font-size: 20px;  margin-bottom: 15px;}
.worker-profile-right h3{color: #777777; font-size: 18px;  margin-bottom: 15px;}
.worker-profile-right h4{font-size: 15px; font-weight: 400; border-bottom: 1px solid #eeeeee; margin-bottom: 50px;
    padding-bottom: 50px; color: #999999; line-height: 20px;}
.worker-profile-right h5{font-size: 15px; font-weight: 400;color: #999999; line-height: 19px;}
.download-cv{ display:block; font-size: 14px; font-weight: 400;color: #666666; padding: 7px 15px; background: #eeeeee;
    border-radius: 20px; width: 150px;  text-align: center; float: left; margin-top: 50px;}
.download-cv:hover{color: #666666; text-decoration: none;}


.worker-profile-left{width: 50%; float: left; padding: 50px; text-align: center;}
.worker-profile-left img{width:60%; margin-top: 90px;}

@media screen and (max-width: 2000px) {
    .center-coworker{width: 100%;}
}
@media screen and (max-width: 1440px) {
    .worker-profile-right{width: 50%; float: right; padding: 50px;}
    .worker-profile-left img{width:100%; margin-top: 90px;}
}
@media screen and (max-width: 1200px) {
    .worker-profile-right{width: 60%;padding:20px;}
    .worker-profile-left{width: 40%;padding:20px;}
}
@media screen and (max-width: 992px) {
    .worker-profile-right{width: 60%;padding:20px;}
    .worker-profile-left{width: 40%;padding:20px;}
}

@media screen and (max-width: 768px) {
    .worker-body-item{width: 48%;margin: 1%;}
    .worker-profile-right{width: 100%;padding:10px;}
    .worker-profile-left{width: 100%;padding:10px;}
    .worker-body{ padding: 0 10px;}
    .worker-profile-right h4{font-size: 14px; font-weight: 300;}
    .worker-profile-right h5{font-size: 14px; font-weight: 300; }
}

/************** coworker ***************/



/************** studio ***************/

.studio-body{}

.studio-body-img{ width: 100%; margin-bottom: 100px; margin-top: 40px;}

.studio-body-header{width: 800px; margin: auto; position: relative;}
.studio-body-header h5{font-size: 13px; font-weight: 300; color: #afafaf;
overflow: hidden; position: relative; width: 100%;}
.studio-body-header a.show-more{ display:block;font-size: 13px; font-weight: 300; background: #eeeeee; color: #666666; width: 120px;
    margin: 40px auto; padding: 8px; border-radius: 30px; text-align: center; cursor: pointer;}
.studio-body-header a:hover{text-decoration: none;}
.studio-body-middle{width: 100%;height: 550px; border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee;
    margin-bottom: 100px; text-align: center;}
.studio-body-middle img{max-width: 100%; margin-right: auto; margin-left: auto;}
.studio-body-middle h4{font-size: 22px; font-weight: 400; color: #999999;margin-bottom: 15px; text-align: right; }
.studio-body-middle h4 a{ color: #999999;}
.studio-body-middle h4 a:hover{ color: #999999; text-decoration: none;}

.studio-body-middle-right{width: 50%;  float: right; padding: 30px 30px 0 30px; border-left: 1px solid #eeeeee;margin-top: 1px;
    text-align: center; height: 100%; overflow: hidden;}
.studio-body-middle-right:hover{border-top: 1px solid #eeeeee;margin-top:0;}

.studio-body-middle-left{width: 50%;  float: right;padding: 30px 30px 0 30px;margin-top: 1px; text-align: center;
    height: 100%; overflow: hidden;}
.studio-body-middle-left:hover{border-top:1px solid #eeeeee;margin-top:0;}

.studio-body-footer{width: 800px; margin: auto;}
.studio-body-footer h4{font-size: 22px; font-weight: 400; color: #aaaaaa; width: 100%; margin-bottom: 50px;
    text-align: center;}
.studio-body-footer h5{font-size: 13px; font-weight: 300; color: #aaaaaa;
    overflow: hidden; position: relative;}
.studio-body-footer a.show-more1{ display:block;font-size: 14px; font-weight: 300; background: #eeeeee; color: #666666; width: 120px;
    margin: 40px auto; padding: 8px; border-radius: 30px; text-align: center; cursor: pointer;}
.studio-body-footer a:hover{text-decoration: none;}
@media screen and (max-width: 1440px) {
    .studio-body-middle{height: 450px;}
}
@media screen and (max-width: 992px) {
    .studio-body-middle-right{width: 100%;}
    .studio-body-middle-left{width: 100%;}
}
@media screen and (max-width: 768px) {
    .studio-body-header{width: 100%;}
    .studio-body-footer{width: 100%;}
}

/************** studio ***************/


/************** studio ***************/

header.expertise{ width: 100%; max-height: 500px; margin-bottom: -50px;}
.expertise-header{width: 100%;text-align: right;  padding-top: 50px; padding-bottom: 50px;}
.expertise-header h4{width: 50%; font-size: 24px; font-weight: 400; margin: auto; margin-bottom: 20px; color: #666666;}
.expertise-header h5{width: 50%; font-size: 14px; font-weight: 300; margin: auto; color: #afafaf; line-height: 18px;}

.expertise-header a.show-more{ display:block;font-size: 13px; font-weight: 300; background: #eeeeee; color: #666666; width: 120px;
    margin: 40px auto; padding: 8px; border-radius: 30px; text-align: center; cursor: pointer;}
.expertise-header a:hover{text-decoration: none;}

@media screen and (max-width: 1200px) {
    .expertise-header h4{width: 70%;}
    .expertise-header h5{width: 70%;}
}
@media screen and (max-width: 992px) {

}
@media screen and (max-width: 768px) {
    .expertise-header h4{width: 94%;}
    .expertise-header h5{width: 94%;}
}

.expertise-dropdown{width: 100%; height: 70px; text-align: right; border-bottom: 1px solid #eeeeee;
padding: 25px;}
.expertise-dropdown h3{font-weight: 400; font-size: 14px; color: #666666; cursor: pointer; position: relative; float: right;
    margin: 0 10px;}
.expertise-dropdown h3 span{margin-right: 5px;}
.expertise-dropdown h4{float: left; font-size: 17px; font-weight: 300; text-align: left; margin-top: -5px;}

.expertise-dropdown-menu{width: 100%; height: auto; position: absolute; top:145px; right: 0; background: #ffffff;
    z-index: 20; display: none; font-weight: 400;}
.expertise-dropdown-menu ul{list-style: none; padding: 20px 40px !important;}
.expertise-dropdown-menu ul li{width: 25%; float: right; padding: 20px 0;}
.expertise-dropdown-menu ul li a.active{font-weight: 500 !important;}
.expertise-dropdown-menu ul li a{font-size: 16px; font-weight: 300; color: #666666;}
.expertise-dropdown-menu ul li a:hover{ color: #666666; text-decoration: none;}

.expertise-img{margin-bottom: 50px; object-fit: cover; width: 100%; max-height: 500px; margin-top: -5px;}
.expertise-content{width: 30%; margin: auto;}
.expertise-content h4{font-size: 22px; font-weight: 300; margin: auto; color: #afafaf; line-height: 22px; margin-bottom: 15px;}
.expertise-content h6{font-size: 11px; font-weight: 300; margin: auto; color: #afafaf; line-height: 18px; margin-bottom: 5px;}
.expertise-content h5{font-size: 14px; font-weight: 300; margin: auto; color: #afafaf; line-height: 20px;}

.expertise-silmilar{width: 1200px; height: 450px; margin: auto; margin-top: 100px;clear: both;}
.expertise-silmilar-header h4{font-size: 16px!important; font-weight: 300 !important; margin: 25px !important;}
.expertise-silmilar a{color: #999999;}
.expertise-silmilar a:hover{color: #999999; text-decoration: none;}
.expertise-silmilar-item{width: 44%; height: 100%; margin: 0 3%; float: right; background: #ffffff; border: 1px solid #efefef;
    margin-bottom: 25px;}
.expertise-silmilar img{width: 100%; height: 300px; object-fit: cover;}
.expertise-silmilar h4{font-size: 16px; font-weight: 300;width: 100%; padding: 10px; margin: 0;}
.expertise-silmilar h5{font-size: 13px; font-weight: 300;width: 100%; padding: 10px; margin: 0; height: 70px; overflow: hidden;
    line-height: 19px;}

@media screen and (max-width: 1440px) {
    .expertise-content{width: 50%; margin: auto;}

    .expertise-silmilar{width: 90%;}
}
@media screen and (max-width: 1200px) {
    .expertise-silmilar{}
    .expertise-content{width: 70%;}
}
@media screen and (max-width: 992px) {

    .expertise-silmilar{width: 90%; height: 400px;}
    .expertise-silmilar img{width: 100%; height: 250px; object-fit: cover;}

}
@media screen and (max-width: 768px) {
    .expertise-content{width: 90%; margin: auto;}

    .expertise-dropdown-menu ul li{width: 33%;}
    .expertise-content{width: 94%;}
    .expertise-silmilar{width: 98%; height: auto;}
    .expertise-silmilar-item{width: 94%; padding-bottom: 15px;}
    .expertise-silmilar img{width: 100%; height: auto; object-fit: cover;}
}
@media screen and (max-width: 575px) {
    .expertise-dropdown-menu ul li{width: 50%;}
    .expertise-dropdown h3{font-size: 13px !important; margin: 0 6px !important;}
    .expertise-dropdown h4{font-size: 13px; margin-top: -1px;}

}
@media screen and (max-width: 420px) {
    .expertise-dropdown-menu ul li{width: 100%;}

}

/************** studio ***************/



/************** contact ***************/

.contact-body{width: 100%;  margin-top: 75px; }

.contact-body-header{width: 100%; clear: both;}
.contact-body-header ul{list-style: none; margin: 0; padding: 0;}
.contact-body-header ul li{width: 25%; height: 200px; border: 1px solid #efefef; padding: 30px; color: #6f6f6f; float: right;}
.contact-body-header ul li h4{font-weight: 400; font-size: 19px; margin: 10px 0; }
.contact-body-header ul li h5{font-weight: 300; font-size: 15px; margin: 10px 0;}

.contact-body-items{width: 100%; margin: auto; margin-top: 100px;clear: both;}
.contact-body-item{width: 50%; height: 100%; float: right; background: #ffffff; border: 1px solid #efefef;
    margin-bottom: 25px;}
.contact-body-items img{width: 100%; height: 300px; object-fit: cover;}
.contact-body-items h4{font-size: 16px; font-weight: 300;width: 100%; padding: 10px; margin: 0;}
.contact-body-items h5{font-size: 13px; font-weight: 300;width: 100%; padding: 10px; margin: 0;overflow: hidden;
    line-height: 19px;}
@media screen and (max-width: 1440px) {

}
@media screen and (max-width: 1200px) {

}
@media screen and (max-width: 992px) {

}
@media screen and (max-width: 768px) {
    .contact-body-header ul li{
        width: 50% !important;}
}
@media screen and (max-width: 575px) {
    .contact-body-header ul li{
        width: 100% !important;}
}
@media screen and (max-width: 420px) {

}
/************** contact ***************/


/************** careers ***************/

.careers-body{margin-top: 50px;}
.careers-body-item{background: rgba(250,250,250,1); width: 99%; margin: 10px auto; height: 200px; padding: 50px; transition: .5s;}
.careers-body-item:hover{background: #efefef;}
.careers-body-item h6{font-weight: 300; font-size: 12px; color: #9f9f9f;}
.careers-body-item h5{font-weight: 300; font-size: 20px; padding-bottom: 10px; color: #6f6f6f;}
.careers-body-item a{background: #dfdfdf; padding: 5px 15px; border-radius: 50px; color: #6f6f6f; transition: .5s; margin-top: 10px;}
.careers-body-item a:hover{color: #6f6f6f; text-decoration: none;}

.careers-sign{width: 768px; margin: auto; margin-top: 80px;}
.careers-sign h4{font-weight: 300; font-size: 22px; color: #9f9f9f; margin: 40px 0;}
.careers-sign input{background: #f5f5f5; border-radius: 50px; border: none; height: 45px;}
.careers-sign button{width:150px;background: #f5f5f5; border-radius: 50px; border: none; height: 45px;}
.careers-sign input:focus{ box-shadow: none; border: none;background: #f5f5f5;}

@media screen and (max-width: 992px) {
    .careers-body-item{padding:50px 20px !important; }
}
@media screen and (max-width: 768px) {
    .careers-body-item{padding:50px !important; }
    .careers-body .col-sm-6{float: right !important;}
    .careers-sign{width: 100%;}
}
/************** careers **************/


.error{width: 768px; margin: auto; height: 100vh; padding-top: 25vh; text-align: center;}
.error h1{font-weight: 700; font-size: 150px; margin: 0; color: #333333;}
.error p{font-weight: 300; font-size: 16px; margin-top: -40px; margin-right: 30px;}
.error a{padding: 5px 15px; background: #aaaaaa; color: #ffffff; border-radius: 30px; margin-right: 30px;}
.error a:hover{text-decoration: none;}

@media screen and (max-width: 768px) {
    .error{width: 100%;}
}