/*
 * Theme Name: NR Global
 * Description: Công nghệ thông tin ngày càng phát triển, nó giúp con người mua thực hiện công việc mua bán, tìm kiếm thông tin sản phẩm ngày càng hiệu quả hơn. Thay vì phải chạy đến tận nơi bán sản phẩm để tìm hiểu thông tin hay mua một sản phẩm nào đó, bạn chỉ việc ngồi ở nhà và với một thiết bị được kết nối internet là bạn có thể có tất cả. Có thể nói website là một công cụ hữu hiệu nhất trong hoạt động quảng bá thương hiệu, sản phẩm, dịch vụ một cách hiệu quả. Bạn là một người kinh doanh thì việc thiết kế một website là điều vô cùng cần thiết và cấp bách trong thời buổi công nghệ này, đó là sợi dây liên kết giữa doanh nghiệp và khách hàng, giúp cho doanh nghiệp quảng bá thương hiệu, sản phẩm và dịch vụ của mình đến với mọi người một cách nhanh chóng, hiệu quả, dễ dàng và trực quan nhất.
 * Theme URI: https://nrglobal.vn
 * Version: 13.0
 * Theme Author: info@nrglobal.vn
 * Author: Cristian Dev
 * Author URI: info@nrglobal.vn
 * Textdomain: gaumap
 */
/*html {
  scroll-behavior: smooth;
}*/
body {
  position: relative;
}
/*#header{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
}*/
#header, #header-sm {
    transition: all .5s ease;
}
.navigation,
.navigation ul,
.navigation ul li,
.navigation ul li a {
    list-style: none;
    line-height: 0;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.navigation ul li ul li {
    -webkit-box-shadow: 0px 0px 25px 0px rgba(50, 50, 50, 0.21);
    box-shadow: 0px 0px 25px 0px rgba(50, 50, 50, 0.21);
}

.navigation ul {
    /*width: 100%;*/
    margin: 0 auto;
    padding: 0;
}

.navigation:after,
.navigation > ul:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

/*.navigation > ul > li {
    display: table-cell;
    width: 1%;
}*/

.navigation > ul > li > a {
    color: #fff;
    display: block;
    font-size: 14px;
    /*line-height: 30px;*/
    text-align: center;
    padding: 0 10px;
    text-transform: uppercase;
    white-space: nowrap;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    overflow: hidden;
    font-weight: 700;
    /*height: 35px;*/
    padding-top: 4px;
}

.navigation ul li:first-child a {
    margin-left: 0
}

.navigation ul li:last-child a {
    margin-right: 0;
}

/*.navigation > ul > li:hover {
    background-color: #9E6F19;
}

.navigation > ul > li.active {
    background-color: #9E6F19;
}
*/
.navigation > ul > li.active > a:hover:before,
.navigation > ul > li.active > a:focus:before,
.navigation > ul > li.active > a:active:before {
    display: none;
}

.navigation ul ul {
    position: absolute;
    left: -9999px;
    top: 40px;
    /*width: 200px;*/
    z-index: 999;
    padding-top: 15px;
    opacity: 0;
    -webkit-transition: top 0.2s ease, opacity 0.2s ease-in;
    -o-transition: top 0.2s ease, opacity 0.2s ease-in;
    transition: top 0.2s ease, opacity 0.2s ease-in;
}

.navigation ul ul ul {
    width: auto;
}

.navigation.align-right ul ul {
    text-align: right;
}

.navigation > ul > li > ul::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom-color: #41aeee;
    top: -1px;
    left: 30%;
}

.navigation.align-right > ul > li > ul::after {
    left: auto;
    right: 20px;
}

.navigation ul ul ul::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-right-color: #41aeee;
    top: 12px;
    left: -8px;
}

.navigation.align-right ul ul ul::after {
    border-right-color: transparent;
    border-left-color: #387002;
    left: auto;
    right: -4px;
}

.navigation > ul > li:hover > ul {
    top: 45px;
    left: -45px;
    opacity: 1;
}

.navigation.align-right > ul > li:hover > ul {
    left: auto;
    right: 0;
}

.navigation ul ul ul {
    padding-top: 0;
    padding-left: 6px;
}

.navigation.align-right ul ul ul {
    padding-right: 6px;
}

.navigation ul ul > li:hover > ul {
    left: 100%;
    top: 0;
    opacity: 1;
}

.navigation.align-right ul ul > li:hover > ul {
    left: auto;
    right: 100%;
    opacity: 1;
}

.navigation ul ul li a {
    background-color: #41aeee;
    border-bottom: 1px solid #41aeee;
    color: #fff;
    font-size: 13px;
    font-weight: 300;
    text-decoration: none;
    padding: 0 10px 0 25px;
    line-height: 36px;
    width: 160px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.navigation ul ul li:last-child a {
    border-bottom: none;
}

.navigation ul ul li a::before {
    font: normal normal normal 10px/1 FontAwesome;
    content: "\f101";
    position: absolute;
    top: 14px;
    left: 10px;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.navigation ul ul li:hover > a,
.navigation ul ul li > a:hover,
.navigation ul ul li > a:focus {
    background-color: #9E6F19;
    color: #fff;
}

.navigation ul ul li.active > a {
    background-color: #9E6F19;
    color: #fff;
}

.navigation ul ul li:hover > a::before,
.navigation ul ul li > a:hover:before,
.navigation ul ul li > a:focus:before {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

.navigation ul ul li.active > a::before {
    color: #fff;
}
/*single-project*/
.article-project.section{
    overflow: visible;
}
.intro-project{
    position: sticky;
    z-index: 1030;
    top: 120px;
    padding-bottom: 20px;
}
.sidebar-menu .section-title {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0px;
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 700;
    color: #41aeee;
}
.sidebar-menu ul.menu-intro{
    list-style: none;
    padding-left: 0;
    border:  none;
}
.menu-intro > li {
    border-bottom: 1px solid #ccc;
    width: 100%;
    float: none;
    padding:  0;
}
.menu-intro > li a {
    border: none;
    text-align: left;
    background-color: transparent;
    padding:  10px 5px;
}
.menu-intro > li.active .list-group-item, .menu-intro > li:hover .list-group-item, .menu-intro > li .list-group-item:hover,  .menu-intro > li .list-group-item:focus{
    background-color: #41aeee !important;
    z-index: 2;
    color: #fff;
    background-color: #41aeee !important;
    border-color: #41aeee;
    border-radius:  0;
}
.menu-intro a {
    margin: 0;
    padding: 10px 10px 10px 0;
    line-height: 22px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
}   
.menu-intro i:last-child {
    position: absolute;
    top: 12px;
    right: 6px;
}
.menu-intro a span {
    padding-left: 10px;
}
h1.post-title {
    color: #41aeee;
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 700;
}
.focus-in-expand {
    -webkit-animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.single-project__title {
    font-size: 25px;
    color: #41aeee;
    line-height: 24px;
    font-weight: 700;
    text-align: center;
    padding: 20px 0;
    margin-bottom: 30px;
    background: url(resources/images/icon-title.png) center bottom no-repeat;
}
.single-project-wrap{
    padding-top: 20px;
}
.content-post{
    color: #000;
}
.open-youtube{
    display: block;
    position: relative;
}
.open-youtube:after{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(resources/images/youtube-play.png) center no-repeat;
    background-size: 50px;
}
body.single .da-thumbs{
    margin:  0 -15px;
}
.list-gallery .row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
#services .row{
    margin: 0 -7.5px;
}
#services .row .col-xs-6{
    padding: 0 7.5px;
}
.swal2-popup .swal2-styled.swal2-confirm{
    background-color: #41aeee !important;
}

.windows8 .wBall {
    position: absolute;
    width: 76px;
    height: 76px;
    opacity: 0;
    -moz-transform: rotate(225deg);
    -moz-animation: orbit 4.95s infinite;
    -webkit-transform: rotate(225deg);
    -webkit-animation: orbit 4.95s infinite;
    -ms-transform: rotate(225deg);
    -ms-animation: orbit 4.95s infinite;
    -o-transform: rotate(225deg);
    -o-animation: orbit 4.95s infinite;
    transform: rotate(225deg);
    animation: orbit 4.95s infinite;
}

.windows8 .wBall .wInnerBall{
    background-color: #f7941e;
    position: absolute;
    width: 10px;
    height: 10px;
    left: 0;
    top: 0;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

.windows8 #wBall_1 {
    -moz-animation-delay: 1.08s;
    -webkit-animation-delay: 1.08s;
    -ms-animation-delay: 1.08s;
    -o-animation-delay: 1.08s;
    animation-delay: 1.08s;
}

.windows8 #wBall_2 {
    -moz-animation-delay: 0.22s;
    -webkit-animation-delay: 0.22s;
    -ms-animation-delay: 0.22s;
    -o-animation-delay: 0.22s;
    animation-delay: 0.22s;
}

.windows8 #wBall_3 {
    -moz-animation-delay: 0.43s;
    -webkit-animation-delay: 0.43s;
    -ms-animation-delay: 0.43s;
    -o-animation-delay: 0.43s;
    animation-delay: 0.43s;
}

.windows8 #wBall_4 {
    -moz-animation-delay: 0.65s;
    -webkit-animation-delay: 0.65s;
    -ms-animation-delay: 0.65s;
    -o-animation-delay: 0.65s;
    animation-delay: 0.65s;
}

.windows8 #wBall_5 {
    -moz-animation-delay: 0.86s;
    -webkit-animation-delay: 0.86s;
    -ms-animation-delay: 0.86s;
    -o-animation-delay: 0.86s;
    animation-delay: 0.86s;
}

@-moz-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -moz-transform: rotate(180deg);
        -moz-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -moz-transform: rotate(300deg);
        -moz-animation-timing-function: linear;
        -moz-origin:0%;
    }

    30% {
        opacity: 1;
        -moz-transform:rotate(410deg);
        -moz-animation-timing-function: ease-in-out;
        -moz-origin:7%;
    }

    39% {
        opacity: 1;
        -moz-transform: rotate(645deg);
        -moz-animation-timing-function: linear;
        -moz-origin:30%;
    }

    70% {
        opacity: 1;
        -moz-transform: rotate(770deg);
        -moz-animation-timing-function: ease-out;
        -moz-origin:39%;
    }

    75% {
        opacity: 1;
        -moz-transform: rotate(900deg);
        -moz-animation-timing-function: ease-out;
        -moz-origin:70%;
    }

    76% {
        opacity: 0;
        -moz-transform:rotate(900deg);
    }

    100% {
        opacity: 0;
        -moz-transform: rotate(900deg);
    }

}

@-webkit-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -webkit-transform: rotate(180deg);
        -webkit-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -webkit-transform: rotate(300deg);
        -webkit-animation-timing-function: linear;
        -webkit-origin:0%;
    }

    30% {
        opacity: 1;
        -webkit-transform:rotate(410deg);
        -webkit-animation-timing-function: ease-in-out;
        -webkit-origin:7%;
    }

    39% {
        opacity: 1;
        -webkit-transform: rotate(645deg);
        -webkit-animation-timing-function: linear;
        -webkit-origin:30%;
    }

    70% {
        opacity: 1;
        -webkit-transform: rotate(770deg);
        -webkit-animation-timing-function: ease-out;
        -webkit-origin:39%;
    }

    75% {
        opacity: 1;
        -webkit-transform: rotate(900deg);
        -webkit-animation-timing-function: ease-out;
        -webkit-origin:70%;
    }

    76% {
        opacity: 0;
        -webkit-transform:rotate(900deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: rotate(900deg);
    }

}

@-ms-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -ms-transform: rotate(180deg);
        -ms-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -ms-transform: rotate(300deg);
        -ms-animation-timing-function: linear;
        -ms-origin:0%;
    }

    30% {
        opacity: 1;
        -ms-transform:rotate(410deg);
        -ms-animation-timing-function: ease-in-out;
        -ms-origin:7%;
    }

    39% {
        opacity: 1;
        -ms-transform: rotate(645deg);
        -ms-animation-timing-function: linear;
        -ms-origin:30%;
    }

    70% {
        opacity: 1;
        -ms-transform: rotate(770deg);
        -ms-animation-timing-function: ease-out;
        -ms-origin:39%;
    }

    75% {
        opacity: 1;
        -ms-transform: rotate(900deg);
        -ms-animation-timing-function: ease-out;
        -ms-origin:70%;
    }

    76% {
        opacity: 0;
        -ms-transform:rotate(900deg);
    }

    100% {
        opacity: 0;
        -ms-transform: rotate(900deg);
    }

}

@-o-keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        -o-transform: rotate(180deg);
        -o-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -o-transform: rotate(300deg);
        -o-animation-timing-function: linear;
        -o-origin:0%;
    }

    30% {
        opacity: 1;
        -o-transform:rotate(410deg);
        -o-animation-timing-function: ease-in-out;
        -o-origin:7%;
    }

    39% {
        opacity: 1;
        -o-transform: rotate(645deg);
        -o-animation-timing-function: linear;
        -o-origin:30%;
    }

    70% {
        opacity: 1;
        -o-transform: rotate(770deg);
        -o-animation-timing-function: ease-out;
        -o-origin:39%;
    }

    75% {
        opacity: 1;
        -o-transform: rotate(900deg);
        -o-animation-timing-function: ease-out;
        -o-origin:70%;
    }

    76% {
        opacity: 0;
        -o-transform:rotate(900deg);
    }

    100% {
        opacity: 0;
        -o-transform: rotate(900deg);
    }

}

@keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        transform: rotate(180deg);
        animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        transform: rotate(300deg);
        animation-timing-function: linear;
        origin:0%;
    }

    30% {
        opacity: 1;
        transform:rotate(410deg);
        animation-timing-function: ease-in-out;
        origin:7%;
    }

    39% {
        opacity: 1;
        transform: rotate(645deg);
        animation-timing-function: linear;
        origin:30%;
    }

    70% {
        opacity: 1;
        transform: rotate(770deg);
        animation-timing-function: ease-out;
        origin:39%;
    }

    75% {
        opacity: 1;
        transform: rotate(900deg);
        animation-timing-function: ease-out;
        origin:70%;
    }

    76% {
        opacity: 0;
        transform:rotate(900deg);
    }

    100% {
        opacity: 0;
        transform: rotate(900deg);
    }

}

@-webkit-keyframes shakeit {
    0% { -webkit-transform: rotate(0deg) translate(2px, 1px); }
    10% { -webkit-transform: rotate(1deg) translate(1px, 2px); }
    20% { -webkit-transform: rotate(-1deg) translate(3px, 0px) ; }
    30% { -webkit-transform: rotate(0deg) translate(0px, -2px); }
    40% { -webkit-transform: rotate(-1deg) translate(-1px, 1px); }
    50% { -webkit-transform: rotate(1deg) translate(1px, -2px); }
    60% { -webkit-transform: rotate(0deg) translate(3px, -1px); }
    70% { -webkit-transform: rotate(1deg) translate(-2px, -1px); }
    80% { -webkit-transform: rotate(-1deg) translate(1px, 1px); }
    90% { -webkit-transform: rotate(0deg) translate(-2px, -2px); }
    100% { -webkit-transform: rotate(1deg) translate(-1px, 2px); }
}
@keyframes shakeit {
    0% { transform: rotate(0deg) translate(2px, 1px); }
    10% { transform: rotate(1deg) translate(1px, 2px); }
    20% { transform: rotate(-1deg) translate(3px, 0px) ; }
    30% { transform: rotate(0deg) translate(0px, -2px); }
    40% { transform: rotate(-1deg) translate(-1px, 1px); }
    50% { transform: rotate(1deg) translate(1px, -2px); }
    60% { transform: rotate(0deg) translate(3px, -1px); }
    70% { transform: rotate(1deg) translate(-2px, -1px); }
    80% { transform: rotate(-1deg) translate(1px, 1px); }
    90% { transform: rotate(0deg) translate(-2px, -2px); }
    100% { transform: rotate(1deg) translate(-1px, 2px); }
}
body.home .portfolio-filter ul{
    border: none;
    display: inline-block;
    margin: auto;
}
body.home .portfolio-filter ul li.active a, body.home .portfolio-filter ul li:hover a{
    color: #fff;
    background-color: #41aeee;
}