* {
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
     -khtml-user-select: none; 
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none; 
        }

 .wow {animation-duration: 2s !important; }
.delay100 {animation-delay: 100ms;}
.delay200 {animation-delay: 200ms;}
.delay300 {animation-delay: 300ms;}
.delay400 {animation-delay: 400ms;}
.delay500 {animation-delay: 500ms;}
.delay600 {animation-delay: 600ms;}
.delay700 {animation-delay: 700ms;}
.delay800 {animation-delay: 800ms;}
.delay900 {animation-delay: 900ms;}
.delay1000 {animation-delay: 1000ms;} 
.delay1100 {animation-delay: 1100ms;} 
.delay1200 {animation-delay: 1200ms;} 
.delay1300 {animation-delay: 1300ms;} 
.delay1400 {animation-delay: 1400ms;} 
.delay1500 {animation-delay: 1500ms;} 
.delay1600 {animation-delay: 1600ms;} 
.delay1700 {animation-delay: 1700ms;} 
.delay1800 {animation-delay: 1800ms;} 
.delay1900 {animation-delay: 1900ms;} 
.delay2000 {animation-delay: 2000ms;} 

header .container {max-width: 1000px}
.light-effect {position: relative; overflow: hidden}
.light-effect:before {
    transform: skewX(-25deg) translateY(-50%);
    content: "";
    position: absolute;
    top: 50%;
    width: 40px;
    height: 100%;
    background-color: white;
    z-index: 0;
    animation: light-left 5s infinite alternate linear;
    left:-5%;
    z-index: 1;
}

.light-effect:after {
    transform: skewX(-25deg) translateY(-50%);
    content: "";
    position: absolute;
    top: 50%;
    width: 40px;
    height: 100%;
    background-color: white;
    z-index: 0;
    animation: light-right 3s infinite alternate linear;
    right:-5%;
    z-index: 1;
}


@keyframes light-right {
    0% {
        right:-5%;
        opacity: 0;
    }
    50% {
        right: 50%;
        opacity: .2;
    }
    100% {
        right: 105%;
        opacity: 0;
    }
}

@keyframes light-left {
    0% {
        left:-5%;
        opacity: 0;
    }
    50% {
        left: 50%;
        opacity: .2;
    }
    100% {
        left: 105%;
        opacity: 0;
    }
}


:root {
    --lightblue:#7addfe;
    --darkblue:#2c4a63;
    --blue:#214e84;
    --yellow:#e78e21;
    --box-shadow:0 2px 8px 0 rgba(26,26,26,0.16);
    --padding-v-50:50px 0;
}

@font-face {
    font-family: "roboto";
    src: url("../fonts/RobotoCondensed-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "roboto";
    src: url("../fonts/RobotoCondensed-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

h1, h2, h3, h4 {font-family: roboto;
}
 
.gray-overlay {position: relative; transition: all .5s }
.gray-overlay:after {content:"";background: rgba(0,0,0,.5); transition: all .5s; position: absolute; left:0; top:0; width: 100%; height: 100%} 
header, footer, section, nav {display: block}
.width100 {float: left; width: 100%}

#main-toc {float: left; margin: 20px 0;font-size: 20px; width: 100%; position: relative; cursor: pointer; border: 1px solid #ccc; padding: 5px 10px; border-radius: 5px;
}
#main-toc:hover {color: var(--green)}

div[name="tableOfContents"] {float: left; max-width: 100%; display: none; clear: both;}
div[name="tableOfContents"]>a {color: black;  }
 
body>.container {margin-top: 50px; min-height: 500px}


.header-filler {float: left; width: 100%; height:90px}
.header-top {float: left;width: 100%; background: var(--darkblue); color:white; height: 15px;}
.header-top .contact-info:before {content:"";position: absolute; right: 100%; height: 35px; bottom:-3px; z-index: 1; width: 45px; background: url('../images/triangle.png') no-repeat; }
 
.header-top .contact-info {position: relative; float: left; margin-left:150px; width: calc(100% - 100px); height:50px; background: var(--darkblue); color:white;  border-bottom:3px solid var(--yellow); padding:15px 0; font-size: 13px; color:var(--lightblue)}
.header-top .contact-info:after {content:""; top:0; left:90%; position: absolute; width:500px; height:50px; background:var(--darkblue); border-bottom:3px solid var(--yellow) }
.header-top .contact-info .item {float:left;padding:0 20px; border-right: 1px solid var(--lightblue)}
.header-top .contact-info .item:last-child {border:none}
header {float:left; width: 100%;  background:rgba(255,255,255,.9);  height:90px; box-shadow: 0 0 10px rgba(0,0,0,.2); position: fixed; top:0; left:0; z-index: 999}
header .container {position: relative;}
header .logo {float:left;}
header .logo img {height:90px;  }
header #call {background: #014aaa; color: white; font-weight: bold; transition: all .3s}
header #call:hover {transform: scale(1.05,1.05); transition: all .3s}
header #dat-lich {background: var(--yellow); color: white; font-weight: bold; transition: all .3s}
header #dat-lich:hover {transform: scale(1.05,1.05); transition: all .3s}
header .main-menu {position: absolute; right: 0; top: 22px;}
header .main-menu>ul {padding:0; float: right; margin:0}
header .main-menu>ul>li {list-style: none; float:left;  position: relative;}
header .main-menu>ul>li a {color:black; text-transform: uppercase; font-family: roboto; padding:15px 20px; display: inline-block; font-size: 14px; margin-right: 5px; letter-spacing: 1px;  border-radius: 30px;}
 
header .main-menu>ul>li .active, header .main-menu>ul>li a:hover {color:var(--yellow);  }

header .main-menu>ul>li:hover .main-menu-sub {display: block}

 
header .main-menu .icon {display:none;color:#333; font-style: normal;cursor:pointer; font-size:20px; position:absolute; right:10px; top:10px}
header .main-menu .icon:hover {color:#3A8CD8}
header .main-menu .main-menu-sub {display: none; position: absolute; left:0; top:50px; background: white; padding: 0; box-shadow: var(--box-shadow)}
header .main-menu .main-menu-sub li {display: inline-block; width: 100%; white-space: nowrap;}
header .main-menu .main-menu-sub li a {color: #333; border-bottom: 1px solid #eee; border-radius: 0; width: 100%}

header .language {position: absolute; top:5px; right: 10px; margin:0}
header .language>li{float: left; padding: 0 3px; list-style: none; display: inline-block;}
header .language>li img{transition: 0.5s; height: 35px; }
header .language>li:hover img{
    filter: grayscale(100%);
    transition: 0.7s;
}


footer {float:left; width: 100%; padding:50px 0 !important; background: #eee; position:relative; }
 
footer .copyright {float:left; width: 100%; background: white; color:black; padding:20px 10px; text-align: center}
footer .heading-home {text-align: left; margin-bottom: 50px}
footer a {color:crimson}
footer a:hover {color:var(--yellow)}
 
footer ul {padding-left:0}
footer li {list-style: none}
footer .footer-img {position:absolute; right:0; top:0;  width: 40%; height: 100%; background:url('../images/footer.png') no-repeat; background-size:cover; background-position: center; 
             border:10px solid #376ba9}

footer .box-body {z-index: 2}
#breadcrumbs {float: left; width: 100%; padding:20px 0; background: white; }
.breadcrumb-heading {float: left; width: 100%;  font-size: 25px; font-weight: bolder; margin-bottom: 10px}
.breadcrumb {background:transparent !important; margin:0; padding:0 20px}
.breadcrumb a {color:black; }
.breadcrumb a:hover {text-decoration: none}
 
.news {float:left; width: 100%; margin-bottom: 20px; position: relative;}
.news .img {float:left; width: 100%; position: relative; height: 0; padding-bottom: 70%}
.news .img img {position: absolute; left:0; top:0; width: 100%; object-fit: cover; height: 100%;  }
.news .info {float:left; width: 100%; padding: 0 15px}
.news .info .title {float:left; width: 100%; font-weight: bold; text-transform: uppercase; font-size:15px;line-height: 20px; height: 60px;  margin-top:20px; overflow:hidden;  margin-bottom: 20px; color:#555; position: relative;}
.news .info .title:after {content:""; position: absolute; bottom:-10px; left:0; width: 50px; height: 3px; background: #ccc}
.news .info .des {float:left; width: 100%; color:#666; line-height: 20px; font-size: 13px; height: 60px; overflow: hidden;}

.news-big {height: 500px; overflow: hidden; position: relative; transition: all .5s;}
.news-big .img {float:left; width:60%; position: relative; overflow: hidden;s}
.news-big .img img {position: absolute; left:0; top:0; width: 100%; height:500px; object-fit: cover;  transition:  all .5s}
.news-big .info {float:left; width:40%; height:500px; background:#eee; padding: 30px; align-items: center; display: flex}
.news-big .info .title {border-bottom:1px solid rgba(255,255,255,.1); margin-bottom: 20px; padding-bottom: 10px; margin-top:0; height: auto; color:black; font-family: roboto; font-size:18px; text-transform: uppercase;}
.news-big .info .des {height: auto; letter-spacing: 1px; line-height: 25px; font-size: 14px}
.news-big .info .viewmore {width: 50px; height: 50px;  transition:all .5s; color:black; background: var(--lightblue); position: absolute; bottom:0; right: 0; padding:12px; font-size: 20px; text-align: center} 

.news-big:hover img {transform: scale(1.1); transition: all .5s}
.news-big:hover .viewmore {width: 100px; transition: all .5s; background: white}

.news-small {height: 240px;  overflow: hidden}
.news-small .img {float: left; width: 100%; height: 200px}
.news-small .info {color:white; position: absolute; bottom:0; left:0; width: 100%; padding:30% 10px 10px 10px; background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5))}
.news-small .info>* {color:white !important}
.news-small .info .title {height: auto}

.news2 .img {padding-bottom: 60%; }
.news2 .img img {border-radius: 0}
.news2 .info {background: white; width: 80%; margin:-20px 10% 0 10%; position: relative; height: 150px; padding:20px 10px; border-radius:10px;box-shadow: 0 0 10px 10px rgba(0,0,0,.1)}
.news2 .info .title {margin:0 0 20px 0}
 

.heading {font-family:roboto; font-size:25px; margin-bottom:30px; line-height: 30px; border-bottom: 1px solid var(--lightblue); padding-bottom: 20px; float:left; width:100%;   font-weight: normal; text-align: left; color:black; position: relative;}
.heading:before {content:"\f64f"; display:inline-block;font-family: FontAwesome; margin-right: 10px; color:var(--lightblue);} 
 
.heading-home { position: relative;
  width:100%;
  float:left; color:var(--darkblue);
  text-align: center;
  font-size: 40px; 
  z-index: 2; font-weight: bold;
  text-decoration: none;
  font-family: roboto;
  margin: 10px 0 30px 0;
  padding:0;
}
 
.heading-home a{ color:var(--yellow) }
.heading-home a:hover {text-decoration: none; color: var(--yellow)}

.des-home {float: left; width: 100%; font-size: 16px; padding: 10px 0; text-align: justify; color:#333; margin-top:-20px;margin-bottom: 20px}

.des-search {float:left; width: 100%; margin:20px 0; font-size: 15px}

.news-banner {float:left; width: 100%; height: 0; padding-bottom: 25%; position: relative; overflow: hidden}
.news-banner img {position:absolute; left:0; top:0; height:100%;width:100%; object-fit: cover}


.search-box {float:left; width: 100%; margin-top:-10%; position: relative; z-index: 2; }


.search-box .inner {float:left; width: 100%; position:relative;}
.search-box input {height: 60px; width: 100%; border-radius: 30px; box-shadow: var(--box-shadow); padding:20px; font-size: 15px}
.search-box button {height: 60px; background:transparent; color:black; position: absolute; top:0; right: 0; border:none; width: 80px; font-size: 25px}

.service {float:left; width: 100%; position: relative; margin-bottom: 30px; border-radius: 10px; overflow: hidden; box-shadow:var(--box-shadow)}
.service .img {float:left; width: 100%; position: relative; overflow: hidden; height: 0; padding-bottom: 80%}
.service .img img {position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit: cover}
.service .info {float:left; width: 100%; padding:15px; height: 100px}
.service .info .title {float:left; width: 100%; font-weight: bold; font-size:15px;line-height: 25px; max-height: 50px; overflow: hidden;  color:black}
.service .info .des {float:left; width: 100%; color:#666; line-height: 20px; height: 60px; overflow: hidden;}
.service .info .price {font-weight: bold; color:var(--yellow); margin:5px 0}
.service .info .city {width: 50%; float:left; }
.service .info .rating {width: 50%; float:left; text-align: right}
.service .info .rating span {background: var(--yellow); color:white; padding:5px}
.service .info .rating span i {color:yellow}



.service-album {float: left; width: 100%; margin:20px 0}
.service-album .img {float:left; width:16.66%; height: 0; padding-bottom: 11%; position: relative;overflow: hidden; }
.service-album .img img {object-fit: cover; position: absolute; height: calc(100% - 15px); width: calc(100% - 15px); border-radius:15px;}
.service-album .smaller-img {width: 12.5%; padding-bottom: 11%}

.service-album .img:first-child {width:50% !important;padding-bottom: 33% !important}

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }


.side-bar {
    -webkit-transform: translate(0px, 0);
    -moz-transform: translate(0px, 0);
    -ms-transform: translate(0px, 0);
    -o-transform: translate(0px, 0);
    transform: translate(0px, 0);
    transition: 0.3s all linear;
}

body {
    overflow-x:hidden;
    font-size: 15px;
    position:relative;
    position: relative;
    transition: all .5s;
}
body:after {content:"";transition: all .5s}
a:hover {
    text-decoration: none;
}

a:focus{
    text-decoration: none;
}

.n_padding_l{padding-left: 0 !important}
.n_padding_r{padding-right: 0 !important}
.n_padding_l_r{padding:0 !important}

.white_bg{background: #fff}

.displaynone{display: none !important}
 
 
 
.box-content{
    padding:10px 0;
    overflow: hidden; 
    width: 100%;
}
 
.box-content h2 {font-size:20px} 
.box-content p{line-height: 1.5;  font-size: 15px;}

.box-content img {max-width: 100% !important; height:auto !important }

.swiper {--swiper-pagination-bullet-size:16px; --swiper-navigation-color:var(--yellow); --swiper-pagination-color:var(--yellow)}

#album {padding:30px 0; margin-bottom: 20px}

.album {float:left; width:100%; height: 0; padding-bottom: 60%; position: relative; margin-bottom: 20px;  transition: all .5s}
.album img {position: absolute; transition: all .5s; left:0; top:0; right:0; bottom:0; height: 100%; width:100%; object-fit: cover;   }
.album:hover {transform: scale(1.1,1.1); transition: all .5s} 


.img_n a{display: block; overflow: hidden}
   

.no_padding_r{padding-right: 0 !important}
.no_padding_l{padding-left: 0 !important}
 
.other_news>h2{font-size: 16px; font-weight: bold; padding-bottom: 10px;}
.other_news ul>li{list-style: circle; padding: 3px 0}
.other_news ul>li>a{color: #5f2d00;font-size: 16px;  }
.other_news ul>li>a:hover{color: #578a56; }
.other_news ul{margin-left: 20px;}
/*----------------news-------------------------*/
 
 
.show_error {
    background: none repeat scroll 0 0 #FDD0D0;
    border: 1px solid #FA789A;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 5px #CCCCCC;
    margin: 10px 0;
    padding: 5px;
    color: red;
    text-align: center;
}
.show_success, .show_notice {
    background: none repeat scroll 0 0 #E7FDD0;
    border: 1px solid #B9FA78;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 5px #CCCCCC;
    margin: 10px 0;
    padding: 5px;
    text-align: center;
}

/*---------------- box mod----------------- */
.module {float: left; width: 100%;}
.module-header {float: left; width: 100%} 

.error{color:#c42025 }
.form-control{border-radius: 15px; border:none; background: #f5f5f5; height: 40px}
.contact{padding: 20px}
.contact .map{margin-bottom: 10px;   margin-top: 10px;}
.contact .info_left>ul>li>i{padding-right: 20px;}
.contact .info_left>ul>li{padding: 5px 0 5px 30px;line-height: 25px;}
.contact .info_left>ul>li>span{  color: #25ab4b;  font-weight: 600;  font-size: 15px}
.contact .form-contact .btn_send{  background-color: #59c45b;   color: #fff;   border-color: #4db74f; border: none ; font-size: 18px; padding: 10px 20px}
.contact .form-contact .btn_send:hover {  background-color: #4db74f;   border-color: #59c45b; }
.contact .info_left h1{color: #666 ; font-size: 20px; font-weight: 600; margin-bottom: 20px}
#map-canvas{height: 400px}
 
.feedback{margin-bottom: 30px;}
.feedback ul>li{text-align: center}
.feedback ul>li>img{width: 100%; border-radius: 50%; padding-bottom: 15px;}
.feedback ul>li>h2{color: #578a56; font-size: 18px; padding-bottom: 5px}
 
 

.pages {
    float: left;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    width: 100%;
    font-size: 16px;
}

.pages .pagebar-selections {display:inline-block; padding:5px 10px; text-align:center; height:30px; background:#eee; border-radius:10px; margin: 5px}
.pages a {display:inline-block; padding:5px 10px;  text-align:center; height:30px; background:#eee; border-radius:10px; margin: 5px}

 

.sort-pro {float:right; margin-top:10px; border:1px solid #ddd; background:white; padding:5px}


.product {float:left; width: 100%; position: relative;   box-shadow: var(--box-shadow); margin-bottom:30px; transition: all .5s}
.product .img {float:left; width: 100%; position: relative; height: 0; padding-bottom: 70%; overflow: hidden}
.product .img img {position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit: contain;}
.product .info {float:left; width: 100%; padding:15px; color:black; line-height: 25px;}
.product .info .title {float: left; width: 100%; font-family: roboto; line-height: 25px;height: 70px; text-transform: uppercase; font-size: 16px; font-weight: bold;}
.product .info .rating {color:#666}
.product .info .rating span {color:orange; font-weight: bold}
.product .info .price {position: absolute; left:0; bottom:0; padding:10px; width:100%; background:var(--darkblue) ;font-size:16px; font-weight: bold;}
.product .info .price span {float:right;color:var(--lightblue);}
.product .info .price b {float: left; color:var(--yellow)}  
.product:hover {box-shadow: 0 0 15px rgba(0,0,0,.2); transition: all .5s}

.main {margin: auto; max-width: 1000px; clear: both;}
.main-800 {max-width: 800px}
.main-500 {max-width: 500px}
/*------------------------  slide khach hang ----------------------------------------------*/


@media screen and (min-width: 1199px) {
    .col-lg-20{width: 20%; float: left}
}

@media screen and (min-width: 1400px) {
    .container{width: 1400px}
}


@media screen and (max-width: 1199px) {
     .search-box input, .search-box button {height: 40px}
     .slide-text button {display: none}
 
}

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

.mobile-menu-toggle {position: absolute; bottom:35px; right: 20px; cursor: pointer; display:none; }
.mobile-menu-toggle {
    transform: scale(1.3,1.3);
    width: 30px;
    height: 20px;
    .line {
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 1.5px;
    background: var(--yellow);
    position: absolute;
    transition: all 200ms;
    &:nth-child(1) {
      top: 0;
    }
    &:nth-child(2) {
      top: 50%;
      transform: translateY(-50%);
    }
    &:nth-child(3) {
      bottom: 0;
    }
  }
  &.close {
    opacity: 1; 
    .line {

      &:nth-child(1),
      &:nth-child(2) {
        top: 0;
        transform: translateY(9px) rotate(45deg);
      }
      &:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
      }
    }
  }
 
}

.box {float:left; width:100%; padding:var(--padding-v-50);  position: relative;}

.box .box-body {float: left; width: 100%}
.box-center {align-items: center; display: flex}
/*.box-center .box-body {position: absolute; top:50%; left:50%; width: 100%; transform: translate(-50%, -50%)}*/
.box-about {float: left; width: 100%;}
/*.box-about b, .box-about strong {color:var(--yellow)}*/
.box-about table * {border:none !important}

.box-about img {height: 300px; object-position: center; object-fit: cover;}

@media screen and (min-width:1360px) {
    .col-20 {width: 20%; padding-left:10px; padding-right: 10px}
 
}
@media screen and (max-width: 992px) {

    .mobile-menu-toggle  {display:block}
    header .main-menu {left:0; top:90px; width:100%; display: none;  background:white; position:fixed; z-index:9999 ; margin: 0; right: auto; bottom: auto;}
    header .main-menu .active {color:var(--yellow)}
    header .main-menu>ul {width:100%; float:left; margin: 0; padding: 0}
    header .main-menu>ul>li {list-style: none; width: 100%; margin:0; position: relative;}
    header .main-menu>ul>li>a {color:#333;  display: inline-block; height: 50px; padding:12px; width: 100%; border-bottom: 1px solid #eee; text-align: center}
    header .main-menu>ul>li>a:hover {color:var(--yellow);text-decoration: none;}
    header .main-menu>ul>li:hover .main-menu-sub {display: none; }
    header .main-menu .icon-open {display: block;}
    header .main-menu .main-menu-sub {position: relative; float: left; width: 100%; top:0; box-shadow: none; background: #f1f1f1}
    header .main-menu .main-menu-sub>li>a {color:black}

    .header-top .contact-info .item:nth-child(2) {border:none}
    .header-top .contact-info .item:last-child {display: none}
    
}

.for-mobile {display:none}
.for-desktop {}
@media screen and (max-width: 768px) {
    footer .footer-img {position: relative; width: 100%; display: none}
    .linhvuc .item {width: 100%; height: 300px}
    .linhvuc .item .info {transform:none}
    .linhvuc {position: relative;}
    .box-linhvuc .heading-home {color:black; text-shadow: none}
    
}




@media screen and (max-width: 530px) {
    footer {text-align: center}
    footer .heading-home {text-align: center}
    .news .img {padding-bottom: 50%}
    .news-big {height: auto}
    .news-big .img {width: 100%;}
    .news-big .info {width: 100%; height: auto}
    .news-big .info .viewmore {display:     none}
    
    .header-top .contact-info .item {display: none;}
    .noidung table, .box-content table {max-width: 100% !important}
 
     
    .col-xs-6{
        width: 100% !important;
    }

    

    .col-xs1-12{width: 100% !important}
    
    .td_hide{display: none}
 
    .social {top:auto; bottom:10%}
  
}
 
.box-project {padding-left:30px; padding-right: 30px; background:linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)), url('../images/project.jpg'); background-attachment: fixed; position: relative; background-repeat: no-repeat; background-size:cover;  }

 
.project {float: left; width: 100%; background: white; box-shadow: var(--box-shadow); position: relative; margin-bottom: 20px}
.project .img {float: left; width: 100%; height: 0; padding-bottom:60%; overflow: hidden; position: relative}
.project .img img {position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit: cover}
.project .info {float: left; width: 100%; line-height: 20px; height: 100px; position: absolute; left:0; bottom: 0; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); transition: all .5s}
.project .info .title {position:absolute; bottom:0; left:0; padding:20px 80px 20px 20px; width:100%; color:white; font-size: 18px; text-transform: uppercase; font-family: roboto; font-weight: bold}
.project .info .arrow {position: absolute; right: 0; bottom:0; background: var(--yellow); height: 50px; padding:15px 25px; }
.project:hover .info .arrow {background: var(--lightblue)}
.project:hover .info {height: 100%; background: rgba(18,32,59,.8); transition: all .5s; }
.project .icon {position: absolute; top: 50%; width: 100%; color:white; font-size: 50px; opacity: 0; transition: all .5s;
    transform: translateY(-50%); z-index: 4; text-align:center}

.project:hover .icon {opacity: 1; transition: all .5s;}
.project:hover .icon i {transform:rotate(180deg); transition: all .5s}



.box-contact {background: white; padding:20px; border-radius: 10px; margin-bottom: 20px; box-shadow: var(--box-shadow); min-height: auto}
.box-contact .box-header {text-align: left; font-size: 20px; padding:0}
.box-contact .box-header .box-title {text-align: left; font-size: 20px; color:black; position: static;}
.box-contact .box-header .box-title:after {content:""; height: 0}

.box-contact .box-body {line-height: 30px}
.box-contact .box-body h4 {margin:0 0 20px 0}
.box-contact .box-body i {width: 30px}


.btn-viewmore {float: left; width: 100%; margin-top:0px; margin-bottom: 30px; text-align: right}
.btn-viewmore a {display: inline-block;height: 50px; transition: all .5s; letter-spacing: 2px; background: var(--darkblue); text-transform: uppercase; font-weight: bold; font-family: roboto; color:white; }
.btn-viewmore a:hover {transition: all .5s; letter-spacing: 2px; background: white; color:var(--darkblue)}
.btn-viewmore a span {display:inline-block; padding:15px 20px;text-align:center; width: 150px; }
.btn-viewmore a i {width: 50px; border-left:1px solid rgba(255,255,255,.3); padding:15px; text-align: center;}

.btn-viewmore a:hover i {border-left:1px solid rgba(0,0,0,.3);}


 

.category {float:left; width: 100%; margin:80px 0 0 0; padding:0}
.category li {float:left; width: 100%;  position: relative; list-style: none}
.category li a {color:black; display: inline-block; padding:10px 15px; width: 100%}
.category>li>a:hover {background:var(--blue); color:white; text-decoration: none}
.category li a i {width: 25px}
.category>li>.active {background: var(--blue); color:white}
.category>li>.sub-category {display: block}
.category>li>.expand {display: none}
.category>li>a {text-transform: uppercase;font-weight: bold; background:relative;}


.category .expand, .category .collapse {position: absolute; top:0; right: 0; padding:10px}

.category .sub-category {display: none; float: left; width: 100%; padding: 0}
.category .sub-category .sub-category {background: #eee}
.category .sub-category a {padding-left:30px; transition: all .5s}
.category .sub-category a:before { position: absolute; content:""; top:20px; right:calc(100% - 20px); width: 10px; height: 2px; background: var(--yellow);  transition: all .5s}
.category .sub-category a:hover:before, .category .sub-category .active:before {width: 30px; transition: all .5s; right: calc(100% - 40px)}
.category .sub-category a:hover, .category .sub-category .active {padding-left:50px; transition: all .5s}