/*
Theme Name: Stephear
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Normalize
2.0 Accessibility
3.0 Alignments
4.0 Clearings
5.0 Typography
6.0 Forms
7.0 Formatting
8.0 Lists
9.0 Tables
10.0 Links
11.0 Featured Image Hover
12.0 Navigation
13.0 Layout
   13.1 Header
   13.2 Front Page
   13.3 Regular Content
   13.4 Posts
   13.5 Pages
   13.6 Footer
14.0 Comments
15.0 Widgets
16.0 Media
   16.1 Galleries
17.0 Customizer
18.0 SVGs Fallbacks
19.0 Media Queries
20.0 Print
--------------------------------------------------------------*/



@font-face {
    font-family: 'Roboto Bold';
    src: url('./assets/fonts/Roboto-Bold.eot');
    src: local('Roboto Bold'), local('Roboto-Bold'),
        url('./assets/fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
        url('./assets/fonts/Roboto-Bold.woff2') format('woff2'),
        url('./assets/fonts/Roboto-Bold.woff') format('woff'),
        url('./assets/fonts/Roboto-Bold.ttf') format('truetype'),
        url('./assets/fonts/Roboto-Bold.svg#Roboto-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('./assets/fonts/RobotoCondensed-Regular.eot');
    src: local('Roboto Condensed Regular'), local('RobotoCondensed-Regular'),
        url('./assets/fonts/RobotoCondensed-Regular.eot?#iefix') format('embedded-opentype'),
        url('./assets/fonts/RobotoCondensed-Regular.woff2') format('woff2'),
        url('./assets/fonts/RobotoCondensed-Regular.woff') format('woff'),
        url('./assets/fonts/RobotoCondensed-Regular.ttf') format('truetype'),
        url('./assets/fonts/RobotoCondensed-Regular.svg#RobotoCondensed-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Light';
    src: url('./assets/fonts/Roboto-Light.eot');
    src: local('Roboto Light'), local('Roboto-Light'),
        url('./assets/fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
        url('./assets/fonts/Roboto-Light.woff2') format('woff2'),
        url('./assets/fonts/Roboto-Light.woff') format('woff'),
        url('./assets/fonts/Roboto-Light.ttf') format('truetype'),
        url('./assets/fonts/Roboto-Light.svg#Roboto-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto CondensedBold';
    src: url('./assets/fonts/RobotoCondensed-Bold.eot');
    src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'),
        url('./assets/fonts/RobotoCondensed-Bold.eot?#iefix') format('embedded-opentype'),
        url('./assets/fonts/RobotoCondensed-Bold.woff2') format('woff2'),
        url('./assets/fonts/RobotoCondensed-Bold.woff') format('woff'),
        url('./assets/fonts/RobotoCondensed-Bold.ttf') format('truetype'),
        url('./assets/fonts/RobotoCondensed-Bold.svg#RobotoCondensed-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('./assets/fonts/Roboto-Regular.eot');
    src: local('Roboto Regular'), local('Roboto-Regular'),
        url('./assets/fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
        url('./assets/fonts/Roboto-Regular.woff2') format('woff2'),
        url('./assets/fonts/Roboto-Regular.woff') format('woff'),
        url('./assets/fonts/Roboto-Regular.ttf') format('truetype'),
        url('./assets/fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* Chrome, Safari, Opera */
@-webkit-keyframes hvr-loopMoveForward {
    0%   {
        transform: translate(0,0);
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -o-transform: translate(0,0);
        -ms-transform: translate(0,0);
    }
    50%  {
        transform: translate(8px,0);
        -webkit-transform: translate(8px,0);
        -moz-transform: translate(8px,0);
        -o-transform: translate(8px,0);
        -ms-transform: translate(8px,0);
    }
    100% {
        transform: translate(0,0);
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -o-transform: translate(0,0);
        -ms-transform: translate(0,0);
    }
}

@keyframes hvr-loopMoveForward {
    0%   {
        transform: translate(0,0);
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -o-transform: translate(0,0);
        -ms-transform: translate(0,0);
    }
    50%  {
        transform: translate(8px,0);
        -webkit-transform: translate(8px,0);
        -moz-transform: translate(8px,0);
        -o-transform: translate(8px,0);
        -ms-transform: translate(8px,0);
    }
    100% {
        transform: translate(0,0);
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -o-transform: translate(0,0);
        -ms-transform: translate(0,0);
    }
}

/* Chrome, Safari, Opera */
@-webkit-keyframes hvr-loopMoveBackward {
    0%   {
        transform: translate(0,0);
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -o-transform: translate(0,0);
        -ms-transform: translate(0,0);
    }
    50%  {
        transform: translate(-8px,0);
        -webkit-transform: translate(-8px,0);
        -moz-transform: translate(-8px,0);
        -o-transform: translate(-8px,0);
        -ms-transform: translate(-8px,0);
    }
    100% {
        transform: translate(0,0);
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -o-transform: translate(0,0);
        -ms-transform: translate(0,0);
    }
}

@keyframes hvr-loopMoveBackward {
    0%   {
        transform: translate(0,0);
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -o-transform: translate(0,0);
        -ms-transform: translate(0,0);
    }
    50%  {
        transform: translate(-8px,0);
        -webkit-transform: translate(-8px,0);
        -moz-transform: translate(-8px,0);
        -o-transform: translate(-8px,0);
        -ms-transform: translate(-8px,0);
    }
    100% {
        transform: translate(0,0);
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -o-transform: translate(0,0);
        -ms-transform: translate(0,0);
    }
}

*, *:hover, *:focus { outline: none; }
body { font-family: 'Roboto'; font-size: 16px; font-weight: 400; }
h1, h2, h3, h4, h5, h6 { font-family: 'Roboto Bold'; }
p { font-family: 'Roboto'; font-weight: 400; }
a { color: #000000; text-decoration: none; }
a:hover, a:focus { color: #fecd2e; text-decoration: none; }
a:focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }


/*Fiverr*/
div.Home_video{
	position: absolute;top: 20px;right: 20px;z-index: 1000;width:48%;
}

#head{
	background-color: #fdc403 !important;
}


@media (max-width: 991px){
	div.Home_video{
		width: 38%;
	}
}

@media screen and (min-width: 1400px){
	div.Home_video{
		width: 37%;
	}
}

@media (max-width: 600px){
div.Home_video{
	position: relative;
    top: 20px;
	right:0;
    z-index: 1000;
    width: 95%;
    margin-left: 15px;
	margin-bottom: 30px;
}
}
/*Fiverr*/


/** Articles **/
.articles-content {
    margin-bottom: 20px;
}
.articles-con{
    padding-left: 80px;
    padding-right: 80px;
    padding-bottom: 50px;
}
.articles-content .media-body button{
    background: #000000;
    border-color: #000;
}
.articles-content .media div a img{
    max-width: 300px;
    margin-right: 1rem;
    object-fit: cover;
    object-position: center;
    border: 1px solid;
    border-color: #fff;
}
.articles-content .media div a:hover img{
        border-color: #feca21 !important;
}
.articles-list {
    background: black;
    padding-top: 15px;
    padding-bottom: 15px;
}
.articles-list li a {
    display: block;
    color: #FDC727;
    font-size: 18px;
    margin-bottom: 10px;
    border-bottom: 1px solid #fff;
    padding-left: 15px;
}
.articles-list .current-menu-item a{
    color: #fff !important;
}
/** Articles **/
header {
}
.header-left img{
    max-width: 205px;
}
.header-left {
    height: 100px;
    padding-top: 25px;
}

.header-right {
    border-left: 1px solid #eeeeee;
}

.header-right-top-left ul li {
    border-right: 1px solid #eeeeee;
    text-align: center;
    width: 55px;
    height: 55px;
    padding-top: 14px;
}

.header-right-top-left ul li a {
    vertical-align: top;
}

.header-right-top-right a {
    background: #fecd2e;
    display: block;
    padding: 17px 24px;
    text-transform: uppercase;
    font-family: 'Roboto CondensedBold';
    color: white;
    font-size: 14px;
}

.header-right-top-right a img {
    margin-left: 10px;
    vertical-align: bottom;
}

.header-right-bottom {
    border-top: 1px solid #eeeeee;
}

.header-right-bottom ul.navbar-nav>li {
    padding: 5px 12px;
    border-right: 1px solid #eeeeee;
    position: relative;
}

.header-right-bottom ul.navbar-nav>li a {
    font-size: 15px;
    font-family: "Roboto";
    line-height: 1.2;
    display: block;
}
.header-right-bottom ul.navbar-nav > li.active {
    background: url("./assets/images/menu-active.png") center bottom no-repeat;
}
.header-right-bottom ul.navbar-nav > li.active>a{
    font-weight: bold;
}
.header-right-bottom ul.navbar-nav ul.sub-menu {
    position: absolute;
    top: 45px;
    left: 0;
    display: none;
    list-style: none;
    padding: 4px;
    width: 200px;
    background: #ffffff;
    z-index: 999;
}
.header-right-bottom ul.navbar-nav ul.sub-menu li a{
    padding: 4px 6px;
}
.header-right-bottom ul.navbar-nav ul.sub-menu li:hover{
    background: #333333;
}
.header-right-bottom ul.navbar-nav li:hover ul.sub-menu,
.header-right-bottom ul.navbar-nav li:focus ul.sub-menu{
    display: block;
}

/*#slider-home .carousel-item{
        height: 541px;
        background: #fecd2e;
}
#slider-home .item1,
#slider-home .item2,
#slider-home .item3,
#slider-home .item4{
        background: #fecd2e url("./assets/images/slider-img.png") center bottom no-repeat;
}
#slider-home .slider-top{
  padding-left: 100px;
  padding-top: 170px;
}

#slider-home .slider-top .slider-left h1{
        font-size: 30px;
        font-family: 'Roboto Bold';
        text-transform: uppercase;
        color: #ffffff;
        line-height: 1;
        padding-top: 30px;
}
#slider-home .slider-top .slider-left h1>div{
        font-size: 46px;
        color: #231f20;
}
#slider-home .slider-top .slider-center{
        margin-left: 125px;
}
#slider-home .slider-vanuebox{
        background-color: rgba(30, 30, 30, 0.7);
        color: white;
        width: 475px;
        position: absolute;
        bottom: 0;
        left: 160px;
}
#slider-home .slider-vanuebox-header{
        font-size: 24px;
        font-family: "Roboto Bold";
        text-transform: uppercase;
}
#slider-home .slider-vanuebox-header img{
        padding: 8px;
        margin-right: 10px;
        background-color: rgb(30, 30, 30);
        vertical-align: middle;
}
#slider-home .slider-vanuebox-header span{
        vertical-align: middle;
}
#slider-home .slider-vanuebox-desc{
        padding: 20px 10px 30px;
        font-size: 18px;
        font-family: 'Roboto Condensed';
        line-height: 1.2;
}
#slider-home .slider-vanuebox-desc img{
        margin-right: 20px;
}
#slider-home .slider-vanuebox-desc div.desc > div{
        font-family: 'Roboto CondensedBold';
}

.carousel-indicators{
        bottom: -20px;
        justify-content: initial;
        left: 135px;
        margin-bottom: 0;
}
.carousel-indicators li {
        height: 10px;
        width: 10px;
        background: #201f1e;
        border-radius: 50%;
        margin: 0 6px;
}
.carousel-indicators li.active {
        background: #fecd2e;
}*/

.banner {
    min-height: 480px;
}
.banner .video{
    height: 100%;
}

.banner .container {
    position: relative;
}

.banner .slider-vanuebox {
    background-color: rgba(30, 30, 30, 0.7);
    color: white;
    width: 475px;
    position: absolute;
    bottom: 0;
    left: 15px;
    height:125px;
}
.owl-theme .owl-dots{bottom:-5px;}

.slider-vanuebox-header {
    font-size: 18px;
    font-family: "Roboto Bold";
    text-transform: uppercase;
}

.slider-vanuebox-header img {
    padding: 8px;
    margin-right: 10px;
    background-color: rgb(30, 30, 30);
    vertical-align: middle;
    width:8%;
}

.slider-vanuebox-header span {
    vertical-align: middle;
}

.slider-vanuebox-desc {
    padding: 20px 10px 30px;
    font-size: 18px;
    font-family: 'Roboto Condensed';
    line-height: 1.2;
}

.slider-vanuebox-desc img {
    margin-right: 20px;
}

.slider-vanuebox-desc div.desc > div {
    font-family: 'Roboto CondensedBold';
}

.carousel-indicators {
    bottom: -20px;
    margin-bottom: 0;
}

.carousel-indicators li {
    height: 10px;
    width: 10px;
    background: #201f1e;
    border-radius: 50%;
    margin: 0 6px;
}

.carousel-indicators li.active {
    background: #fecd2e;
}


.app-bar{
    padding: 8px 0;
    font-family: 'Roboto Light';
}
.app-bar a{
    display: inline-block;
    padding: 0 10px;
    border-right: 1px solid #eeeeee;
    vertical-align: bottom;
}
.app-bar a:last-child{
    border:none;
}

#main-content{
    background: #f4f4f4;
}
.box{padding: 40px 0 20px;}
.box .box-header{margin-bottom: 40px;}
.box .box-header .title{
    font-size: 20px;
    font-family: "Roboto Bold";
    color: rgb(0, 0, 0);
    font-weight: bold;
    text-transform: uppercase;
}
.box .box-header .line-title{
    position: relative;
}
.box .box-header .line-title:before{
    content: '';
    width: 33%;
    height: 1px;
    background-color: #dfdfdf;
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
}
.box .box-header .line-title:after {
    content: '';
    width: 33%;
    height: 1px;
    background-color: #dfdfdf;
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
}
.box .box-header .box-header-desc{
    padding: 0 14em;
    font-family: 'Roboto Light';
    font-size: 19px;
    line-height: 1.2;
}

.solution-img{
    background: #fecd2e; 
    width: 200px; 
    height: 200px;
    border-radius: 50%; 
    margin: 0 auto 20px;
}
.desc-text{
    font-size: 18px;
    font-family: 'Roboto Light';
    margin-bottom: 15px;
    padding: 0 25px;
}

.box-content .btn{
    font-size: 14px;
    font-family: "Roboto CondensedBold";
    color: white;
    text-transform: uppercase;
    border-radius: 0;
    background: #000000;
    border: none;
    padding: 7px 18px;
}
.box-content .btn:hover{
    outline: none;
    background: #000000;
    color: #fecd2e;
    box-shadow: none;
}
.box-content .btn:focus{
    box-shadow: none;
}
.box-content .btn img{
    vertical-align: baseline;
    margin-left: 10px;
}
.box-content h3{
    text-transform: uppercase;
}


.yellow-bar{
    background: #fecd2e;
    font-size: 21px;
    font-family: "Roboto Bold";
    text-transform: uppercase;
    margin-top: 30px;
}
.yellow-bar img{
    padding: 10px 17px;
    background: #1e1e1e;
}
.yellow-bar span{
    padding-top: 14px;
    width: 94%;
} 
.yellow-bar-content .desc-text{
    padding: 30px 100px 0;
    margin-bottom: 0;
}

.sector-box .sector{
    border-right: 1px solid #dfdfdf;
    margin: 15px 0;
}
.sector-box .row{
    border-bottom: 1px solid #dfdfdf;
}
.sector-box .sector:last-child,
.sector-box .row:last-child{
    border: none;
}
.sector-box .sector .desc-text{
    margin-top: 15px;
    font-size: 21px;
}
.sector-box .sector-img{
    position: relative;
    width: 200px; 
    height: 200px;
    border-radius: 50%; 
    margin: 0 auto;
}
.sector-box .sector-img img{width: 100%;}
.sector-box .sector-img .sector-img-text{
    position: absolute;
    top: 0;
    left: 0;
    width: 200px; 
    height: 200px;
    border-radius: 50%; 
    border: 8px solid #fecd2e;	
    background: rgba(0,0,0,0.7);
    color: white;
    padding-top: 38%;
    display: none;
    font-family: 'Roboto Light';
    font-size: 23px;
    line-height: 1;
}
.sector-box .sector-img:hover .sector-img-text{
    display: block;
}


/* client slider */
.clients-box .box-header {margin-bottom: 15px;}

.clientCarousel{margin-top: 20px;}

.owl-carousel .owl-nav button.owl-prev, 
.owl-carousel .owl-nav button.owl-next{position: absolute;}

.owl-carousel .owl-nav button.owl-prev img, 
.owl-carousel .owl-nav button.owl-next img{background: #000000; padding: 8px; border-radius: 50%;}

.owl-carousel .owl-nav button.owl-prev{left: -44px; top: 10px;}
.owl-carousel .owl-nav button.owl-next{right: -44px; top: 10px;}


/* /client slider */

footer {
    background: #000000 url('./assets/images/footer-bg.png') bottom center repeat-x;
    background-size: cover;
    color: white;
    position: relative;
    text-align: center;
    border-bottom: 3px solid #fecd2e;
    font-size: 14px;
    font-family: 'Roboto Light';
}

footer:before {
    content: "";
    width: 70px;
    height: 70px;
    background: url("./assets/images/footer-icon.png") center top no-repeat;
    position: absolute;
    top: -34px;
    margin-left: -31px;
}

.footer-ul {
    text-align: left;
    padding-left: 20px;
}

.footer-ul li {
    list-style-image: url('./assets/images/arrow-right.png');
    line-height: 2;
}

.footer-ul li a {
    color: white;
    -webkit-transition: all 100ms;
    -moz-transition: all 100ms;
    -o-transition: all 100ms;
    transition: all 100ms;
}

.footer-ul li a:hover {
    padding-left: 4px;
    -webkit-transition: all 100ms;
    -moz-transition: all 100ms;
    -o-transition: all 100ms;
    transition: all 100ms;
}

footer .footer-logo {
}

footer .company-info>div {
    margin: 30px 0;
    max-width: 330px;
}

footer .contact-us .contact-us-icon {
    padding: 5px 5px 0 0;
}

footer .contact-us .contact-us-detail a {
    color: white;
}

footer .contact-us .contact-us-detail .contact-us-detail-email a {
    font-family: 'Roboto Bold';
    color: #fecd2e;
}
footer .copyright-bar a{
    color: white;
}


.navbar-toggler {
    border: none;
    background: transparent !important;
    padding: 14px 2px;
}

.navbar-toggler:focus {
    outline: none;
    background: transparent !important;
}

.navbar-toggler .icon-bar {
    background-color: #000000;
    transform: rotate(0deg) translate(0px, 0px);
    transition: ease all .2s;
}

.navbar-toggler .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}
.smallnav {font-size: 10px; color:#000 !important; font-family: 'Roboto Bold'; padding:0; margin:0; text-align:left}

.navbar-toggler .icon-bar+.icon-bar {
    margin-top: 4px;
}

.icon-bar:nth-child(2) {
    width: 16px;
    transition: ease all .2s;
}

.navbar-toggler:hover>.icon-bar:nth-child(2) {
    width: 22px;
    transition: ease all .2s;
}

.navbar-toggler:active>.icon-bar:nth-child(2) {
    width: 22px;
    transition: ease all .2s;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 4px);
    transition: ease all .2s;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(2) {
    opacity: 0;
    transition: ease all .2s;
}

.navbar-toggler:not(.collapsed) .icon-bar:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
    transition: ease all .2s;
}


.social-box{position: fixed; left: 0; bottom: 40%; text-align: center; z-index: 9999; }
.social-box a{padding: 4px 8px; background: #fecd2e; display: block; border-bottom: 1px solid #eab40f; color: white; text-shadow: 0 1px 1px #777;}
.social-box a:last-child{border: none;}
.social-box a:hover{background: #000000;}
.social-box a:hover i{color: #fecd2e;}

.globe-li{position: relative; text-align: center;}
.globe-li:after{
    content: "";
    width: 7px;
    height: 6px;
    background: url("./assets/images/arrow-down.png") center bottom no-repeat;
    position: absolute;
    bottom: 5px;
    left: 23px;
}


#head {
    background-color: #aaa;
    width: 100%;
}
#container {
    cursor: pointer;
    width: 100%;
    height: 481px;
    margin: auto;
    position: relative;
}
.inactive-state {
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url('./assets/images/video.jpg');
}
.hover-state {
    background-image: url('./assets/images/video.jpg');
}

.cumvideo-wrapper a{width:100%;}
.client-list .col-md-4:nth-child(2){     flex: 0 0 33.33%; max-width: 33.33%;}
.contact-after-content.text-left{text-align:left;}
.box-content.news h3{font-size:20px;}
/* --------------------------------------------------------------------- RESPONSIVE STARTS ---------- */
/*@media only screen and (max-width:2560px) { }
@media only screen and (max-width:1920px) { }
@media only screen and (max-width:1680px) { }
@media (max-width:1366px) { }
@media (max-width:1280px) { }
@media only screen and (max-width:1080px) { }*/
@media only screen and (min-width:1441px) {
    .banner .video { width: 100%; }
}
@media only screen and (max-width:1024px) {
    .header-left { width: 22%; padding-top: 30px; }
    .header-left img { width: 100%; }
    .header-right { width: 76%; }
    .header-right-bottom ul.navbar-nav>li { padding: 5px 0; }
    .banner { min-height: auto; height: auto; }
    .app-bar a img { width: 115px; }
    .app-bar a { padding: 0 6px; }
    .box-content h3 { font-size: 24px; }
    .desc-text, .box .box-header .box-header-desc { padding: 0; }
    .yellow-bar span { width: 92%; }
    .yellow-bar-content .desc-text { padding: 30px 0 0; }

    #container{height: 346px;}
}
@media only screen and (max-width:991px) {
    button.navbar-toggler { margin: 0 auto; }
    button.navbar-toggler span { color: #fecd2e; }
    /*.banner { height: 360px; }*/
    .header-right-bottom ul.navbar-nav>li { padding: 0 10px; }
    .header-right-bottom ul.navbar-nav > li.active { background: none; background: #fecd2e; }
    .header-right { border-right: 1px solid #eeeeee; }
    .header-right-bottom ul.navbar-nav li a { color: #000000; }
    .header-right-bottom ul.navbar-nav ul.sub-menu { position: static; width: 100%; margin-bottom: 10px; }
    .header-right-bottom ul.navbar-nav ul.sub-menu a:hover, .header-right-bottom ul.navbar-nav ul.sub-menu a:focus { color: white; }
    .header-left { width: 30%; }
    .header-right { width: 67%; }
    .app-bar { padding-top: 25px; }
    .yellow-bar span { width: 90%; line-height: 1; padding-top: 8px; }
    .sector-box .sector:nth-child(even) { border-right: none; }
    #container{height: 260px;}
}
/*@media only screen and (min-height:768px) and (max-width:1024px) { }
@media only screen and (max-width:800px) { }
@media only screen and (orientation:landscape) and (max-device-width:960px) { }
@media only screen and (orientation:landscape) and (max-device-width:640px) { } */
@media (width:1024px) { 
    .articles-content .media-body p{
        font-size: 13px;
    }
}    
@media (max-width:768px) { 
    .articles-con {
        padding-left: 15px;
        padding-right: 15px;
    }
    .articles-content .media-body h2{
        font-size: 20px;
    }
    .articles-content .media-body p{
        margin-bottom: 9px;
        font-size: 13px;
    }
    .articles-content .media-body button {
        font-size: 12px;
        padding: 5px;
    }
    .articles-content .media div a img {
        max-width: 250px;
    }

} 
@media (max-width:767px) { 
    .articles-content .media div a img {
        max-width: 100%;
        width: 100%;
        margin: 0;
    }
    .articles-content   .media {
        display: block !important;
    }
    .articles-content .media-body h2 {
        padding-top: 10px;
    }
    .articles-content {
        margin: 0;
        margin-bottom: 20px;
    }

    .articles-con .box .box-header {
        margin-bottom: 0px;
    }
    .social-box{bottom: 50px;}
}
@media only screen and (max-width:640px) { 
    .banner .slider-vanuebox { width: 100%; left: 0; }
    .box .box-header .line-title:before, .box .box-header .line-title:after { width: 18%; }
    .box .box-content .row>div { margin-bottom: 40px; }
    .yellow-bar span { width: 84%; padding-right: 20px; }
    .sector-box .row>div.sector { margin-bottom: 15px; }
    .clients-box .row>div { margin-bottom: 0 !important; }
    footer .contact-us .contact-us-icon, footer .contact-us .contact-us-detail { float: left !important; }
    footer .contact-us .contact-us-icon { padding: 5px 10px 0 0; }
    footer .box .box-content .row>div { margin-bottom: 20px; }
    footer .box .box-content .row>div.copyright-bar { margin-bottom: 0; }

    .app-bar {padding-top: 38px;}
    .carousel-indicators li{height: 14px; width: 14px; margin: 0 8px;}
    .carousel-indicators{bottom: -26px;}

    #container{height: 216px;}
    .client-list .col-md-4:nth-child(2) {
        flex: 0 0 100%;
        max-width: 100%;
        width:100%;
    }
}
/*@media (max-width:600px) { }
@media (max-width:499px) { }*/
@media only screen and (max-width:575px) { 
    .sector-box .row>div.sector{width: 50%;}
    #container{height: 162px;}
}
@media (max-width:480px) { 
    /*.banner { height: 270px; }*/
    .app-bar { padding-bottom: 10px }
    .app-bar span { display: block; margin-top: 10px; }
    footer .box { text-align: left; }
    footer .company-info>div { max-width: 100%; }
    .yellow-bar { font-size: 18px; margin-top: 0;}
    /*.sector-box .sector { border: none; }*/
    .sector-box .sector-img,
    .sector-box .sector-img .sector-img-text{width: 150px; height: 150px;}
    .sector-box .sector .desc-text,
    .sector-box .sector-img .sector-img-text{font-size: 17px;}
    .banner { height: auto; }
    .banner>.video { height: auto; }
    .banner .container { padding: 0; }
    .sector-box .row { border: none; }
    .clients-box { padding: 20px 0; }
    .header-left { width: 40%; }
    .header-right { width: 59%; }
    .header-right-top-right a { padding: 17px 15px; }
    .banner .slider-vanuebox { position: static; }
    .header-right-top { display: none; }
    .header-right { border: none; }
    .header-left { height: initial; padding: 8px 0; }
    .header-right-bottom { float: right; padding: 6px 0; }
    header { position: relative; }
    button.navbar-toggler { position: absolute; right: 0; top: 0; }
    #navbarResponsive { position: absolute; top: 50px; right: 0; width: 240px; background: white; z-index: 99999; box-shadow: 0 0 6px #333; }
    .header-right-bottom ul.navbar-nav>li { border: none; }
    .header-right { width: 45%; }
    .header-left { width: 45%; }
    .yellow-bar img { padding: 17px; }
    /*.box .box-header .title { font-size: 24px; }
    .box-content h3 { font-size: 20px; }*/

    #container{height: 140px;}
}
@media (max-width:479px) {
    .box .box-header .line-title:before, .box .box-header .line-title:after { content: none; }
    .yellow-bar span { width: 80%; padding-right: 10px; }
    .slider-vanuebox-desc img { margin-right: 10px; }
    .slider-vanuebox-desc { padding: 20px 5px 30px; }

    #container{height: 121px;}
}
@media (max-width:320px) {
    .yellow-bar img { padding: 25px 17px; }
    .sector-box .sector-img, .sector-box .sector-img .sector-img-text{width: 125px; height: 125px;}
    .sector-box .sector .desc-text,
    .sector-box .sector-img .sector-img-text{font-size: 15px;}
    #container{height: 109px;}
}
/* --------------------------------------------------------------------- RESPONSIVE ENDS ------------ */