body{position: relative;font-family: Roboto, sans-serif;}


@font-face {
    font-family: Pe-icon-7-stroke;
    src: url("../fonts/Pe-icon-7-stroke.ttf");
}

.p-0{padding: 0}
.ul-clearfix{padding: 0; margin: 0; list-style: none;}
.overflow{overflow: hidden;}

.wrapper{position: relative; z-index: 2;}
header{  width: 100%; position: fixed;  top: 0;  left: 0;  z-index: 4  ; }
header h1{    float: left;  display: table;  margin-left: 30px;  z-index: 4;}
header .text{font-size: 11px;  color: #999999;  display: table-cell;  vertical-align: middle;  padding: 0 0 0 30px;  line-height: initial;  text-transform: uppercase; font-family: Roboto, sans-serif; font-weight: 400;}
header h1 .td-logo{    width: 100px;  height: 100px;  display: table; transition: .2s;}
header h1 .td-logo .logo{ background-image: url("../assets/logo.png"); width: 100px; height: 100px; display: block; background-color: #fff;transition: .2s;}
header .header-right{float: right;  display: table;  margin-top: 30px;  margin-right: 30px;  z-index: 4;}
header .header-right .menu:after{clear: both; display: table; content: ""}
header .header-right .menu{list-style: none; margin: 26px 0; display: inline-block;}
header .header-right .menu li{display: inline-block; vertical-align: middle;}
header .header-right .menu li a{ font-weight: 400; font-size: 16px; color: #666666; margin: 0 20px; text-decoration: none; transition: .2s;  padding: 0 5px  10px 5px; }
header .header-right .search i{font-size: 30px; display: inline-block;  text-decoration: none; color: #363636;}
header .header-right .search:hover i{color: #ff0009}
header .header-right .item i{font-size: 30px; display: inline-block;  text-decoration: none; color: #363636;}
header .header-right .item:hover i{color: #ff0009}
header .header-right .menu li a:hover{color: #ff0009;}
header .header-right .menu li a:hover{border-bottom: 3px solid #ff0009;}
header .header-right .menu li:last-child  a:hover{color: #ff0009 !important; border-bottom: none;}

.button_container {  position: fixed;  top: 5%;  right: 2%;  height: 27px;  width: 35px;  z-index: 201;  cursor: pointer;  transition: opacity .25s ease;   display: none;}
.button_container:hover {  opacity: .7;  }
.button_container.active .top {  transform: translateY(11px) translateX(0) rotate(45deg);  background: #FFF;  }
.button_container.active .middle {  opacity: 0;  background: #FFF;  }
.button_container.active .bottom {  transform: translateY(-11px) translateX(0) rotate(-45deg);  background: #FFF;  }
.button_container span {  background: #ff0009;  border: none;  height: 3px;  width: 30px;  position: absolute;  top: 0;  left: 0;  transition: all .35s ease;  cursor: pointer;  }
.button_container span:nth-of-type(2) {  top: 11px;  }
.button_container span:nth-of-type(3) {  top: 22px;  }
.button-white{  top: -12%;  }
.button-white span{  background-color: #fff;  }
.button-white .top {  transform: translateY(11px) translateX(0) rotate(45deg);  background: #FFF;  }
.button-white .middle {  opacity: 0;  background: #FFF;  }
.button-white .bottom {  transform: translateY(-11px) translateX(0) rotate(-45deg);  background: #FFF;  }
.overlay {  position: fixed;  background: #333;  top: 0;  left: 0;  z-index: 200;  width: 100%;  height: 0%;  opacity: 0;  visibility: hidden;  transition: opacity .35s, visibility .35s, height .35s;  overflow: hidden;  }
.overlay.open {  opacity: .9;  visibility: visible;  height: 100%;  }
.overlay.open li {  animation: fadeInRight .5s ease forwards;  animation-delay: .35s;  }
.overlay.open li:nth-of-type(2) {  animation-delay: .4s;  }
.overlay.open li:nth-of-type(3) {  animation-delay: .45s;  }
.overlay.open li:nth-of-type(4) {  animation-delay: .50s;  }
.overlay nav {  position: relative;  height: 70%;  top: 50%;  transform: translateY(-50%);  font-size: 50px;  font-family: 'Varela Round', serif;  font-weight: 400;  text-align: center;  }
.overlay ul {  list-style: none;  padding: 0;  margin: 0 auto;  display: inline-block;  position: relative;  height: 100%;  }
.overlay ul li {  display: block;  height: 25%;  height: calc(100% / 6);  min-height: 50px;  position: relative;  opacity: 0;  }
.overlay ul li a {  display: block;  position: relative;  color: #72706c;  text-decoration: none;  font-size: 42px;  font-family: Roboto, sans-serif;  overflow: hidden;  }
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {  width: 100%;  }
.overlay ul li a:after {  content: '';  position: absolute;  bottom: 0;  left: 50%;  width: 0%;  transform: translateX(-50%);  height: 3px;  background: #ff0009;  transition: .35s;  }
.overlay ul li a:before {  content: '';  position: absolute;  bottom: 0;  left: 50%;  width: 0%;  transform: translateX(-50%);  height: 3px;  background: #ff0009;  transition: .35s;  }

.headroom {
    will-change: transform;
    transition: transform 200ms linear;
}
.headroom--pinned {
    transform: translateY(0%);
}
.headroom--unpinned {
    transform: translateY(-100%);
}

.header--fixed {position: fixed; z-index: 100; right: 0; left: 0; top: 0;}

.headroom--pinned.headroom--not-top { background-color: #fff; border-bottom: 1px solid #e8e8e8;    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);}
.headroom--pinned.headroom--not-top h1 .td-logo{    width: 60px;height: 60px;}
.headroom--pinned.headroom--not-top h1 .td-logo .logo{    width: 60px;height: 60px;background-size: contain;}
.headroom--pinned.headroom--not-top .header-right{margin-top: 0; margin-left: 0;}
.headroom--pinned.headroom--not-top .header-right .menu{margin: 35px 0;}
.headroom--pinned.headroom--not-top .header-right .menu li a{color: #666666}
.headroom--pinned.headroom--not-top .text{color: #666666}
.headroom--pinned.headroom--not-top .header-right .search i{color: #666666}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        left: 20%;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}


.landing-wrapper{  width: 100%;    position: relative; height: 100vh;}
.landing-slogan{    height: 100%;  position: absolute;  right: 0;  top: 0; display: table; left: 0; }
.landing-slogan-wrapper{   text-align: left;  vertical-align: middle;   color: #333;  padding-left: 0; display: table-cell;}
.landing-slogan-wrapper .title{ font-size: 30px; color: #363636; font-weight: 300; display: block; margin-bottom: 50px; visibility: hidden;  animation-play-state: running;   animation-delay: 3s;max-width: 600px; float: left;}
.landing-slogan-wrapper .sub{ font-size: 16px; color: #999999; font-weight: 300; display: inline-block; /*margin-bottom: 50px;*/ position: relative; padding-bottom: 10px; text-decoration: none;  animation-play-state: running;   animation-delay: 3s; visibility: hidden;}
.landing-slogan-wrapper .sub:after{background: #eb3719 none repeat scroll 0 0;  bottom: 0;  content: "";  height: 3px;  left: 0;  position: absolute;  width: 0;     transition: all .5s ease;}
.landing-slogan-wrapper .sub:hover{color: #eb3719;}
.landing-slogan-wrapper .sub:hover:after{width: 100%}
.mouse-icon{border: 2px solid rgba(255,0,9, 1);  border-radius: 16px;  height: 30px;  width: 18px;  display: block;  z-index: 10;  opacity: .7;  position: absolute;  left: 50%;  bottom: 20px;  margin: 0 0 0 -9px;}
.mouse-icon .wheel{position: relative;  border-radius: 10px;  background: rgba(255,0,9,1);  width: 2px;  height: 6px;  top: 4px;  margin-left: auto;  margin-right: auto;  animation: slideInUp;     animation-play-state: running;    animation-iteration-count: infinite;animation-delay: 3s;    animation-timing-function: linear;    animation-duration: 1s;}

.bg{margin-bottom: 150px;}
.staticPage-bg{margin-bottom: 0px;}
.hero-bkg-animated {  display: inline-block;  width: 100%;  height: 500px;  background: #fff url(../assets/bg.jpg) 0 0 no-repeat;  animation: cbg-pos-move 40s infinite alternate linear, fadeInUp;    position: relative; }
.staticPage-image {  display: inline-block;  width: 100%;  height: 500px;   position: relative; background-size: cover ;    background-position: center center; background-repeat: no-repeat;}
.hero-bkg-animated .bg-logo {   width: 172px;  height: 179px;  display: block;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  }
.staticPage-image .bg-logo-o {  width: 260px;height: 260px;box-shadow: inset 0 0 0 3px #fff; display: block;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%); padding: 10px; }


.static-cat{text-align: center; border-bottom: 1px solid #f1f1f1; margin-bottom: 70px;}
.static-cat-item{color: #666666; font-size: 16px; font-weight: 400; display: inline-block; padding: 34px 0; text-decoration: none; margin: 0 20px;  }
.static-cat-item.active{border-bottom: 3px solid #ff0009; }
@media (max-width: 1400.98px) {
    .landing-slogan-wrapper{padding: 50px;}
}
@media (max-width: 1199.98px) {
    .landing-slogan-wrapper{padding: 0;}
}
@media (max-width: 991.98px) {
    .button-white{top: -10% !important; }
    .button_container{display: block; top: 30px;}
    .staticPage-image{height: 300px;}
    header .header-right .menu{display: none;}
    .landing-slogan{position: relative; top: 60px;}
    .landing-wrapper{height: 100%;}
}
@media (max-width: 767.98px) {
    .landing-slogan-wrapper{padding: 20px; text-align: center;}
    .landing-slogan-wrapper .title{margin-bottom: 30px; font-size: 24px;}
    .static-cat{font-size: 14px; padding: 15px 0;}
    header h1{
        left: 10px;
    }
    header h1 .td-logo .logo{
        height: 60px;
        width: 60px;
        background-size: contain;

    }
    .hero-bkg-animated{height: 300px;}
    .hero-bkg-animated .bg-logo-o{
        width: 130px;
        height: 130px;
    }
    .hero-bkg-animated .bg-logo{
        width: 130px;
        height: 130px;
        background-size: contain;
        background-repeat: no-repeat;
    }
}

@media (max-width: 575.98px) {
    header .text{display: none;}
}


@keyframes cbg-pos-move {
    0% {
        background-position: 0 0
    }
    100% {
        background-position: 0 -650px
    }
}
@-moz-keyframes cbg-pos-move {
    0% {
        background-position: 0 0
    }
    100% {
        background-position: 0 -650px
    }
}
@-webkit-keyframes cbg-pos-move {
    0% {
        background-position: 0 0
    }
    100% {
        background-position: 0 -650px
    }
}
@-ms-keyframes cbg-pos-move {
    0% {
        background-position: 0 0
    }
    100% {
        background-position: 0 -650px
    }
}
@-o-keyframes cbg-pos-move {
    0% {
        background-position: 0 0
    }
    100% {
        background-position: 0 -650px
    }
}

.new-container{ margin: 0 auto;  position: relative;  max-width: 1380px; padding: 0 28px;}
.branch{margin-bottom: 245px; /*overflow: hidden;*/}
.branch:after{clear: both; display: table; content: ""}
.branch-about{max-width: 860px; margin: 0 auto; text-align: center;}
.branch-about .title{font-size: 48px; color: #363636; font-weight: 300; display: block; margin-bottom: 40px;}
.branch-about .desc{font-size: 16px; color: #999999; font-weight: 300; display: block; margin-bottom: 150px; text-align: justify; line-height: 30px;}
.branch-about .desc a{color: #ff0009 ; text-decoration: none;}
.branch-box{display: flex; justify-content: flex-start; flex-wrap: wrap}
.branch-box:after{clear: both; display: table; content: ""}
.branch-item{box-shadow: 0 0 0 3px #e0dedb inset; position: relative;  z-index: 1;  margin-left: -3px; box-sizing: border-box; margin-bottom: -3px;  transition: .2s;  border: none; width: 20%; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px;}
.branch-item:hover{    border-color: #eb3719;  box-shadow: 0 0 0 3px #eb3719 inset;  z-index: 4;}
/*.branch-item:last-child{border-right: 3px solid #e0dedb; }*/
.branch-item img{-webkit-filter: grayscale(100%);  filter: grayscale(100%); transition: .8s all;}
.branch-item:hover img{-webkit-filter: grayscale(0%);  filter: grayscale(0%);}

.pictureContained-wrapper{position: absolute; top: 3px; right: 3px; bottom: 3px; left: 3px; overflow: hidden;}
.pictureContained-image{
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.pictureContained-image--h{
    height: 100%;
    width: auto;
}
.pictureContained-image--w{
    height: auto;
    width: 100%;
}

.pictureCovered-wrapper{position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;}
.pictureCovered-image{position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.pictureCovered-image--h{height: 100%;width: auto;}
.pictureCovered-image--w{height: auto;width: 100%;}

.image-wrapper {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
    overflow: hidden;
}
.image-wrapper .img {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
}
.image-wrapper .img img.horizontal {
    width: 100%;
    height: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.image-wrapper .img img.vertical {
    width: auto;
    height: 100%;
}
.image-wrapper .img img.block {
    width: 100%;
    height: 100%;
}
.image-wrapper .img.contained img.horizontal {
    position: relative;
    width: auto;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}
.image-wrapper .img.contained img.vertical {
    position: relative;
    width: 100%;
    height: auto;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}
.image-wrapper .img.contained img.block {
    width: 100%;
    height: 100%;
}
.image-wrapper [data-type=vendue] {
    opacity: 0;
    transition: 0.3s opacity;
    bottom: 0;
}
.image-wrapper .img {
    transition: 0.5s all;
}
.image-wrapper:hover .img {
    transform: scale(1.05);
}

@media (max-width: 1400.98px) {

}
@media (max-width: 1199.98px) {

}
@media (max-width: 991.98px) {

}
@media (max-width: 767.98px) {

}
@media (max-width: 575.98px) {
    .branch-item{width: 50%;}
}




.project{margin-bottom: 240px;}
.project-about{max-width: 860px; margin: 0 auto; text-align: center;}
.project-about .title{font-size: 48px; color: #363636; font-weight: 300; display: block; margin-bottom: 10px; text-transform: uppercase;}
.project-about .desc{font-size: 16px; color: #999999; font-weight: 300; display: block; margin-bottom: 150px;  line-height: 30px;}
.project-box{position: relative;}
.project-box:after{clear: both; display: table; content: ""}
.project-top{padding-bottom: 45.2554745%; position: relative; width: 100%; height: 0; overflow: hidden; background-color: #363636; display: block; margin-bottom: 10px;}
.project-item{ width: 260px;  height: 260px;  box-shadow: inset 0 0 0 3px #e0dedb;   z-index: 1;  border: 0; position: absolute; top: -120px; left: 155px; padding: 10px;}
.project-item:before{border: 3px solid transparent;  width: 0;  height: 0;  position: absolute;  content: "";     top: 0;  left: 0;}
.project-item:after{border: 3px solid transparent;  width: 0;  height: 0;  position: absolute;  content: "";     right: 0;  bottom: 0;}
.project-item--green:before{    border-top-color: #eb3719;  border-right-color: #eb3719; -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;  transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;     width: 100%;  height: 100%;}
.project-item--green:after{    border-bottom-color: #eb3719;  border-left-color: #eb3719; -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;  transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;     width: 100%;  height: 100%;}
.project-sub{width: 965px; margin: 0 auto;}
.project-sub__video{padding-bottom: 60%; position: relative; width: 100%; height: 0; overflow: hidden; }
.project-photo-item{padding-right: 10px; padding-left: 0;}
.project-sub__icon{padding-bottom: 60%; position: relative; width: 100%; height: 0; overflow: hidden;}
.project-sub__icon--video{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); background-image: url("../assets/video_icon.png"); width: 70px; height: 70px; background-repeat: no-repeat; background-size: contain; z-index: 1;}

/*.project-item--green{ box-shadow: inset 0 0 0 3px #7ebe42;}*/

.contact-about{max-width: 860px; margin: 0 auto; text-align: center;}
.contact-about .title{font-size: 36px; color: #363636; font-weight: 300; display: block; margin-bottom: 10px;}
.contact-about .desc{font-size: 16px; color: #999999; font-weight: 300; display: block; margin-bottom: 50px;  line-height: 30px;}
.contact-line{    width: 100%;  height: 3px;     background: #d9d7d3; display: block; position: relative;}
.contact-line:after{position: absolute;  content: "";  top: 0;  left: 0;  width: 0%;  height: 100%;  background: #eb3719;}
.contact-line-active:after{    width: 100%;  -webkit-transition: all 1.5s ease; }

.small-container{padding: 0 160px; text-align: center;}
.contact-list{display: inline-block;  width: 100%;  margin: 40px 0 0 0;  padding: 0 0 130px 0;  border-bottom: 3px solid #d9d7d3;  position: relative; list-style: none;}
.contact-list .item{display: inline-block;  color: #b1ada5;  margin: 0;  text-align: center;  vertical-align: top;}
.contact-list .item:nth-child(1){ width: 32.9%; padding: 0;}
.contact-list .item:nth-child(2){ width: 32.9%;     padding: 0 0 0 60px;}
.contact-list .item:nth-child(3){ width: 32.9%;     padding: 0 0 0 60px;}
.contact-list .icon{    display: inline-block;  text-align: left;  color: #999999;  line-height: initial;  width: 100%;  padding: 90px 0 0 0; font-size: 18px; font-weight: 300; text-decoration: none;}
.contact-list .icon i{font-size: 72px; display: block;    float: right;  margin: -60px 22px -25px 0;transition: .2s;}
.contact-list .text{color: #666666; font-size: 30px; transition: .2s; display: block;}

.contact-list li:hover .text{color: #eb3719;}
.contact-list li:hover .icon i{color: #eb3719;}

.contact-social{    display: inline-block;}
.contact-social:after{clear: both; display: table; content: ""}
.contact-social .item{  float: left; width: 50px;  height: 50px;  border: 3px solid #d9d7d3;  margin: -3px -1px 0 -2px;  position: relative;  cursor: pointer;     -webkit-transition: all .5s ease;}
.contact-social .item.instagram{    margin-top: -50px;  height: 50px;  margin-bottom: 56px;}
.contact-social .item i{    width: 100%;  height: 14px;  position: absolute;  top: 50%;  left: 0;  margin: -7px 0 0 0; color: #b9b5ae;     -webkit-transition: all .5s ease;}
.contact-social .item:hover{    border-color: #eb3719;      z-index: 1;}
.contact-social .item:hover i{    color: #eb3719;      z-index: 1;}
.contact-social-facebook{}
.ft-bottom{width: 100%;  background: #fff;  padding: 80px 0;  text-align: center;  font-size: 14px;  color: #cac8c2;  position: relative;}
.ft-bottom .logo{background-image: url("../assets/foot-logo.png"); width: 72px; height: 74px; display: inline-block; margin-bottom: 20px;}
.ft-bottom .copyright{display: block;  line-height: initial;  margin: -5px 0 0 0;}

@media (max-width: 1400.98px) {

}
@media (max-width: 1199.98px) {

}
@media (max-width: 991.98px) {
    .contact-list .text{
        font-size: 24px;
    }
    .small-container{
        padding: 0 20px;
    }
    .project-item{
        width: 130px;
        height: 130px;
        top: -60px;
        left: 60px;

    }
    .sub-image{
        padding-left: 15px;
    }
    .contact-list .item:nth-child(1) {
        width: 80%;
        padding: 0;margin-bottom: 20px;
    }
    .contact-list .item:nth-child(2){
        width: 80%; padding: 0; margin-bottom: 20px;
    }

    .contact-list .item:nth-child(3){
        width: 80%; padding: 0;margin-bottom: 20px;
    }
    .contact-list .icon i{
        float: none;;
        display: inline-block;;
    }
}
@media (max-width: 767.98px) {

}

@media (max-width: 575.98px) {
    header .text{display: none;}
}



.articles{margin: 160px 0;}
.articles .title{display: block; text-align: center; font-weight: 300; color: #ff0009; font-size: 48px; margin: 50px 0;}
.articles .desc{font-size: 16px; color: #999999; font-weight: 300; display: block; margin-bottom: 50px;  line-height: 30px; padding:0 250px;}
.article-box{}
.article-box:after{clear: both; display: table; content: ""}
.article{padding-right: 5px; padding-left: 5px; margin-bottom: 30px;}
.article a{text-decoration: none;}
.article .image{padding-bottom: 60.6060606%; width: 100%; height: 0; position: relative; display: block; background-color: #363636; margin-bottom: 20px;}
.article .item-hover{opacity: 0;position: absolute; right: 0; left: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0.3);  transition: 0.3s; }
.article .item-hover i{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff;  font-size: 36px;}
.article:hover .item-hover{opacity: 1;}
.article .name{display: block;font-size: 16px; color: #000000; margin-bottom: 10px; }
.article .date{display: block;font-size: 14px; color: #999999; }

@media (max-width: 1400.98px) {

}
@media (max-width: 1199.98px) {

}
@media (max-width: 991.98px) {
    .articles .desc{padding: 0 50px;}
}
@media (max-width: 767.98px) {
    .articles .desc{padding: 0 20px;}
    .articles .title{font-size: 36px;}
}
@media (max-width: 575.98px) {

}

.project-article{padding: 0;}
.project-article:nth-child(odd) .box{background-color: #f0f0f0;}
.project-article:nth-child(even) .box{background-color: #ffffff;}
.project-article:nth-child(even) .triangle{ border-bottom: 10px solid #fff;;}
.project-article .img{padding-bottom: 100%; width: 100%; height: 0; position: relative; display: block; background-color: #363636; margin-bottom: 0; overflow: hidden;}
.project-article .box{padding: 40px 30px; display: block;text-decoration: none; position: relative;}
.project-article .triangle{	width: 0;  height: 0;   border-left: 10px solid transparent;  border-right: 10px solid transparent;  border-bottom: 10px solid #f0f0f0; position: absolute; top: -10px;}
.project-article a{text-decoration: none;}
.project-article .name{color: #000000; font-size: 16px; display: block; font-weight: 500; text-transform: uppercase; margin-bottom: 15px; transition: .2s;}
.project-article .date{color: #999999; font-size: 14px; display: block; font-weight: 400; text-transform: uppercase;}

.project-article .item-hover{opacity: 0;position: absolute; right: 0; left: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0.3);  transition: 0.3s; }
.project-article .item-hover i{position: absolute;   top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 36px; }
.project-article:hover .img .item-hover{opacity: 1;}
.project-article:hover .name{color: #eb3719;}


/*home intro heseg*/
.home-intro{ background-image: url("../assets/intro-bg.png"); }
.home-intro-wrapper{height: 100vh; width: 100%; position: relative;}
.home-intro-box{position: absolute;   top: 45%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 80%; visibility: hidden;  animation-play-state: running;   animation-delay: 3s;}
.home-intro-logo{ display: block; background-image: url("../assets/intro-logo.png"); width: 130px; height: 212px; margin: 0 auto;}
.home-intro-lang{text-align: center; margin-top: 60px;}
.home-intro-lang .item{display: inline-block; position: relative; text-decoration: none; padding-bottom: 10px; }
.home-intro-lang .border-line{display: inline-block; width: 2px; height: 20px; background-color: #dcdcdc; margin: 0 25px; vertical-align: middle;}
.home-intro-lang .item:after{background: #eb3719 none repeat scroll 0 0;  bottom: 0;  content: "";  height: 3px;  left: 0;  position: absolute;  width: 0;     transition: all .5s ease;}
.home-intro-lang .item .img{display: inline-block; width: 28px; height: 14px;     margin-top: -2px; vertical-align: middle;}
.home-intro-lang .item .img.mn{ background-image: url("../assets/mn-flag.png"); }
.home-intro-lang .item .img.en{background-image: url("../assets/en-flag.png");}
.home-intro-lang .item .text{font-size: 14px; font-weight: 400; color: #666666;}
.home-intro-lang .item:hover .text{color: #000;}
.home-intro-lang .item:hover:after{width: 100%;}


/*modal search*/
.search-form::after{  clear: both;; display: table;; content: "";  }
.search-form .text{  padding-right: 49px;  font-family: "Roboto Condensed", sans-serif !important;  text-transform: uppercase !important;  font-size: 24px;  line-height: 30px;  }
.search-button{  cursor: pointer;  background-color: #0071bc;  font-size: 12px;  color: #fff;  text-shadow: none;  float: right;  min-height: 40px;  margin: 0;  overflow: visible;  text-transform: none;  display: inline-block;  box-sizing: border-box;  vertical-align: middle;  text-decoration: none;  text-align: center;  border: 1px solid rgba(0,0,0,.06);  padding: 0 15px;  line-height: 38px;  }
.search-input{  vertical-align: middle;  height: 40px;  padding: 8px 6px;  font-size: 16px;  width: calc(100% - 50px);  border: 1px solid #ddd;  background: #fff;  color: #444;  transition: all .2s linear;  transition-property: border,background,color,box-shadow,padding;  }
.page-wrapper{  width:100%;  height:100%; /*background:url(https://i.imgur.com/2ZgHKbQ.jpg) center no-repeat;*/  background-size:cover;  }
.blur{  -webkit-filter: blur(5px);  -moz-filter: blur(5px);  -o-filter: blur(5px);  -ms-filter: blur(5px);  filter: blur(5px);  }
.modal-wrapper{  width:100%;  height:100%;  position:fixed;  top:0; left:0;  background:rgba(0,0,0,0.75);  visibility:hidden;  z-index: 200;  opacity:0;  -webkit-transition: all 0.25s ease-in-out;  -moz-transition: all 0.25s ease-in-out;  -o-transition: all 0.25s ease-in-out;  transition: all 0.25s ease-in-out;  }
.modal-wrapper.open{  opacity:1;  visibility:visible;  }
.modal-wrapper.close{  opacity:0;  visibility:hidden;  }
.modal{  max-width:600px;  max-height:200px;  display:block;  margin:50% 0 0 -300px;  position:relative;  top:50%; left:50%;  background:#fff;  opacity:0;  -webkit-transition: all 0.5s ease-in-out;  -moz-transition: all 0.5s ease-in-out;  -o-transition: all 0.5s ease-in-out;  transition: all 0.5s ease-in-out;  box-shadow: 0 0 10px rgba(0,0,0,.3);  border-radius: 4px;  }
.modal-wrapper.open .modal{  margin-top:-200px;  opacity:1;  }
.head{ /*width:90%;*/ /*height:32px;*/  padding: 15px;  overflow:hidden; /*background:#01bce5;*/  }
.btn-close{  width:32px;  height:32px;  display:block;  float:right;  }
.btn-close::before, .btn-close::after{  content:'';  width:15px;  height:3px;  display:block;  background:#ccc;  }
.btn-close::before{  margin-top:12px;  -webkit-transform:rotate(45deg);  -moz-transform:rotate(45deg);  -o-transform:rotate(45deg);  transform:rotate(45deg);  }
.btn-close::after{  margin-top:-3px;  -webkit-transform:rotate(-45deg);  -moz-transform:rotate(-45deg);  -o-transform:rotate(-45deg);  transform:rotate(-45deg);  }
.content{  padding:5%;  }

@media (max-width: 1400.98px) {

}
@media (max-width: 1199.98px) {

}
@media (max-width: 991.98px) {
    .project{margin-bottom: 150px;}
}
@media (max-width: 767.98px) {
    .home-slider{height: 100vh;}
    .project{margin-bottom: 50px;}
    .project-about .title{font-size: 36px;}
}
@media (max-width: 575.98px) {

}

/*Мэдээ үзэх*/

.news-view__title{display: block; font-family: 'Roboto', sans-serif; font-size: 24px; text-transform: uppercase; color: #363636; text-align: center; max-width: 550px; margin: 0 auto; line-height: 1.3; margin-bottom: 40px; margin-top: 70px;}
.news-view__info{border-top: 1px solid #e6e6e6; height: 80px;     margin-bottom: 5px;}
.news-view__info:after{display: table; content: ''; clear: both;}
.news-view__info-date{float: left; margin: 30px 0; font-size: 16px; color: #eb3719; font-family: 'Roboto', sans-serif;}
.news-view__info-date:before{font-family: FontAwesome; content: '\f017'; font-size: 16px; margin-right: 8px;}
.news-view__share{float: right; margin: 22px 0;}
.news-view__share-print, .news-view__share-mail, .news-view__share-download{color: #d9d7d3; font-size: 36px; margin-right: 40px;}
.news-view__share > a:last-child{margin-right: 0;}

.news-view__image img{width: 100%; height: auto;}
.news-view__content{overflow: hidden;}
.news-view__content p{font-family: 'Roboto', sans-serif; color: #363636; font-size: 16px; line-height: 30px; margin-bottom: 20px;}

.news-view__social{margin-bottom: 50px; margin-top: 50px; text-align: center; font-family: 'Roboto', sans-serif;}
.news-view__social-facebook{width: 48%; margin-right: 1%; height: 40px;}
.news-view__social-facebook-icon{font-size: 18px; left: 10px; top: -10px;}
.news-view__social-twitter{width: 48%; margin-right: 0; height: 40px;}
.news-view__social-twitter-icon{font-size: 18px; left: 10px; top: -10px;;}
.news-view__social-name{position: absolute; font-size: 15px; right: 0;   left: 60%;  transform: translate(-60%, 0); top: 0;}
.news-view__social-facebook{display: inline-block; font-size: 18px; color: #fff; width: 160px; height: 40px; background-color: #3b5998; line-height: 40px; border-radius: 5px; position: relative; margin-right: 10px;}
.news-view__social-facebook:hover{background-color: #8b9dc3;}
.news-view__social-facebook-icon{font-size: 20px; color: #fff; position: absolute; top: 1px; left: 20px;}
.news-view__social-twitter{display: inline-block; font-size: 18px; color: #fff; width: 160px; height: 40px; background-color: #55acee; line-height: 40px; border-radius: 5px; position: relative; margin-right: 10px;}
.news-view__social-twitter:hover{background-color: #0084b4;}
.news-view__social-twitter-icon{font-size: 20px; color: #fff; position: absolute; top: 1px; left: 20px;}



.c-content h1 h2 h3 h4 h5 h6 { margin-top: 20px; margin-bottom: 10px; font-weight: 500; line-height: 1.2; font-family: "PT Sans", sans-serif; font-weight: bold; color: #333; }
.c-content a:hover{color: #0077dd;}
.c-content b, strong { font-weight: 600; }
.c-content p{ font-size: 17px; line-height: 28px;; margin: 0 0 30px; color: #333; }
.c-content a{ color: #0077dd; text-decoration: none; cursor: pointer; }
.c-content .tweetabletext{background-color:#e9ebe4;cursor:pointer;padding-left:0px;padding-right:4px; color: #000;}
.c-content .tweetabletext:after{font-family:"FontAwesome";content:'\f099';margin-left:4px}
.c-content .tweetabletext:hover{background-color:#e2f1f9}
.c-content .tweetabletext:hover:after{font-family:"FontAwesome";content:'\f099';margin-left:4px;color:#00acee}
.c-content figure.image{position: relative; padding: 0; margin: 0; display: inline-block;}
.c-content figure.image figcaption{ background-color: #dbe1ea; font-size: 11px; color: #454d62; text-align: center; font-style: italic; line-height: 1.6; padding: 4px; position: absolute; bottom: 0; box-sizing: border-box; left: 0; right: 0; width: 100% }
.c-content blockquote { border-left: 5px solid #0077dd; background: #f1f1f1; padding: 20px; }
.c-content blockquote p { color: #333; font-size: 17px; font-style: italic; line-height: 28px; }
.c-content o{ color: red; }
.c-content li{ font-size: 17px; line-height: 28px; }
.c-content h1{font-size: 36px;}
.c-content h2{font-size: 30px;}
.c-content h3{font-size: 24px;}
.c-content h4{font-size: 18px;}
.c-content h5{font-size: 14px;}
.c-content h6{font-size: 12px;}
.c-content img{ border-color: #007bff; max-width: 100%;  height: auto !important;}
.c-content table{ border-color: rgba(0,0,0,.125); background-color: #fff; margin: 20px 0;   border-collapse: collapse; }
.c-content table, th, td {border: 1px solid #363636;}
.c-content caption{ color: #fff; background-color: #007bff; border-color: #007bff; padding: 10px; font-weight: bold; }
.c-content tr:hover { background-color: #eee; transition: 0.2s; }
.c-content th { background-color: #1E88E5; color: white; }
.c-content tr:nth-child(odd){ background-color: #f6f7fa; }
.c-content hr{ border: 0; border-top: 2px solid #333; opacity: .1; }
.c-content .videoWrapper{ width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.c-content .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.c-content .videoWrapper{width: 100%;position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;}
.c-content .videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: none;}
.c-content .embeddedContent{width: 100%;position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;}
.c-content .embeddedContent iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: none;}