/* Add here all your CSS customizations */

li.language .dropdown-menu a {
    color: #f39200!important;
}

.page-header {
    position: relative;
    z-index:1;
    overflow:hidden; /*if you want to crop the image*/
}

.page-header:before{

    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.2;

    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.page-services .page-header:before{
    background-image: url(../img/slides/slide-4.jpg);
}

.page-services-detail .page-header:before{
    background-image: url(../img/slides/slide-1.jpg);
}

.page-blog .page-header:before,
.page-blog-post .page-header:before{
    background-image: url(../img/blog/medium/blog-11.jpg);
}

.page-projects .page-header:before,
.page-project .page-header:before{
    background-image: url(../img/slides/projects.png);)
}

/* =============== revolution slider ultra-it ======================= */
.ultra-it .tp-bullet {
    width: 18px;
    height: 18px;
    position: absolute;
    background: #484544;
    /* border: 2px solid #FFF; */
    border-radius: 4px;
    cursor: pointer;
    box-sizing: content-box;
}
html .tp-bullets.bullets-color-primary .tp-bullet:hover, html .tp-bullets.bullets-color-primary .tp-bullet.selected {
    background: #f39200;
    /* border: 1px solid #484544; */
}
.ultra-it.tparrows {
    background: #484544;
    background: #484544aa;
    
    border-radius: 6px!important;
    padding: 10px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
}

.ultra-it.tparrows:before {
    color: #FFF;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

.ultra-it.tparrows:hover {
    background: #f39200;
    background: #f39200bb;
}
/* =============== \revolution slider ultra-it ======================= */

/* #services:before {

    width  : 0;
  height : 0;
  content : '';
  position : absolute;
  left : -50px;
  top  : 35px;
  border : 25px solid transparent;
  border-top : 35px solid green;
} */
.arrow-down {
    width: 160px;
    height: 0;
    border-right: 80px solid transparent;
    border-left: 80px solid transparent;
    border-top: 50px solid #FFF;
    position: absolute;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    z-index: 1;
}

.arrow-down.arrow-small {
    width: 40px;

    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    border-top: 13px solid #FFF;
  
}

.arrow-down.arrow-primary {
    border-top-color: #f39200;
}


.arrow-down.arrow-secondary {
    border-top-color: #484544;
}

#services {
    padding-top: 80px;
    position: relative;
    overflow: hidden;
}

#services::before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: 0;
    background: url(../img/22_years.png) 0 0 repeat;
    background-size: 600px;
    transform: rotate(30deg);
}

.container-bg-22 {
    position: relative;
    overflow: hidden;
}
.bg-22-years:before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: 2;
    background: url(../img/22_years.png) 0 0 repeat;
    background-size: 600px;
    transform: rotate(30deg);
}

html .toggle-light-secondary .svg-fill-color-secondary svg path,
html .toggle-light-secondary .svg-fill-color-secondary svg rect,
html .toggle-light-secondary .text-color-light,
html .toggle-light-secondary .text-color-secondary {
    /* transition-timing-function: ease-in-out; */
    transition: fill .4s ease;
    transition: color .4s ease;
}

html .toggle-light-secondary .svg-fill-color-secondary svg path,
html .toggle-light-secondary .svg-fill-color-secondary svg rect {
    fill: #484544 !important;
}

html .toggle-light-secondary:hover .svg-fill-color-secondary svg path,
html .toggle-light-secondary:hover .svg-fill-color-secondary svg rect {
    fill: #FFF !important;
}

html .toggle-light-secondary .svg-fill-color-light svg path,
html .toggle-light-secondary .svg-fill-color-light svg rect {
    fill: #FFF !important;
}

html .toggle-light-secondary:hover .svg-fill-color-light svg path,
html .toggle-light-secondary:hover .svg-fill-color-light svg rect {
    fill: #484544 !important;
}

html .toggle-light-secondary:hover .text-color-light {
    color: #484544 !important;
}

html .toggle-light-secondary:hover .text-color-secondary {
    color: #FFF !important;
}

.thumb-info .thumb-info-wrapper:after {
    content: "";
    background: #FFF;
    transition: all 0.3s;
    color: #484544;
    position: absolute;
    display: block;
    z-index: 1;
}

.thumb-info-action-icon.thumb-info-action-icon-visible {
    right: 0;
    top:0;
}

.testimonial-project {
    height: 400px;
    border: #484544 10px solid;
}

.thumb-ultra-it {
    border-top: #f39200 1px solid!important;
    /* border-bottom: #f39200 1px solid!important; */
}


.owl-carousel .owl-nav button[class*="owl-"] {
	/* background-color: #f39200;
	border-color: #f39200 #f39200 #d97a08; */
	color: #FFF;
    border-radius: 10px;
    background: #FFFFFF;
    background: #ffffff52;
    border-color: #ffffff52 #ffffff52 #ffffff52;
}

.owl-carousel .owl-nav button[class*="owl-"]:hover,
.owl-carousel .owl-nav button[class*="owl-"].hover {
	/* background-color: #f8a542;
	border-color: #f9ab4e #f9ab4e #f39200; */

    background: #f39200;
    background: #f39200bb;
    border-color: #f39200bb #f39200bb #f39200bb;
}

.owl-carousel .owl-nav button[class*="owl-"]:active,
.owl-carousel .owl-nav button[class*="owl-"].active {
	/* background-color: #e68108;
	background-image: none;
	border-color: #d97a08 #d97a08 #a85e06; */
    background: #f39200;
    background: #f39200bb;
    border-color: #f39200bb #f39200bb #f39200bb;
}

.owl-theme .owl-dots .owl-dot span {
    border-radius: 2px;
}

.owl-carousel .owl-dots .owl-dot span {
    width: 15px;
    height: 15px;
}

@media (min-width: 992px) {
    li.language {
        position: absolute;
        right:0;
    }

    li.language span.circle-bg {
        display: inline-block;
        background-color: #f39200;
        border:1px solid #f39200;
        padding: 7px 10px;
        /* border-radius: 22px; */
        color: #FFF;
        transition: background-color 0.2s ease-out;
    }

    li.language:hover span.circle-bg {
        background-color: #FFF;
        color: #f39200;
    }

    #header .header-nav.header-nav-line.header-nav-bottom-line.header-nav-bottom-line-effect-1 nav > ul > li.language:hover > a:before {
        right: unset;
    }

    #header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li > a, #header .header-nav.header-nav-line:not(.header-nav-light-text) nav > ul > li > a {
        color: #484544;
        /* position:absolute; */
    }

    #header .header-nav.header-nav-line.header-nav-bottom-line nav > ul > li > a:before, #header .header-nav.header-nav-line.header-nav-bottom-line nav > ul > li:hover > a:before {
        
        height: 2px;
    
    }

/*     #header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li:before, 
    #header .header-nav.header-nav-line:not(.header-nav-light-text) nav > ul > li:before {
        content:url('../img/menu-square.png');
        position:relative; 
        z-index:100000; 
        left:-50px;
        top:50%;
        width: 8px;
        height: 8px;
        display: inline-block;
        transform: scale(.3);
    } */

    /* .square {
        display: inline-block;
        background: url('../img/menu-square-sm.png');
        width:10px;
        height: 10px;
        background-size: contain;

    } */
    #header .header-nav-main nav > ul > li {
        background: url(../img/menu-square-sm.png) no-repeat;
        background-size: 5px;
        background-position: 0px 50%;
    }

    #header .header-nav-main nav > ul > li.active,
    #header .header-nav-main nav > ul > li:hover {
        background: url(../img/menu-square-active-sm.png) no-repeat;
        background-size: 5px;
        background-position: 0px 50%;
    }
}