@media only screen and (max-width: 767px) {
    .main-menu{
        position: fixed;
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        background-color: #000;
        box-shadow: 0px 5px 15px rgba(237, 83, 15,0.05);
        z-index: 999999;
        width: 75%;
        max-width: 75%;
        left: -100%;
        transition: all 0.3s !important;
    }
    .main-menu.open{
    	transition: all 0.3s;
        left: 0%;
    }
    .main-menu ul{
        width: 100%;
    }
    .main-menu li:first-child{
        margin-top: 30px;
    }
    .main-menu li{
        width: 100%;
    }
    .main-menu li a{
        padding: 10px;
    }
    .menu-trigger{
        color: #333;
        font-size: 30px;
        position: absolute;
        right: 30px;
        top: 22px;
    }
    .menu-trigger:hover{
        cursor: pointer;
    }
    .mobile-100{
        -webkit-box-flex: 0;
        -webkit-flex:100%  !important;
        -ms-flex: 100% !important;
        flex: 100% !important;
        max-width: 100% !important;
    }
    .mobile-50{
        -webkit-box-flex: 0;
        -webkit-flex:50%  !important;
        -ms-flex: 50% !important;
        flex: 50% !important;
        max-width: 50% !important;
    }
    .banner-content h1{
        font-size: 30px;
    }
    .banner-content{
        padding: 50px 0;
    }
    .mobile-mt-50{
        margin-top: 50px;
    }
    .mobile-hidden{
        display: none;
    }
    .team-item-name{
        font-size: 20px;
    }
    .team-item-position{
        transform: rotateZ(0deg) !important;
        position: relative;
        width: 100%;
        left: 0;
        margin: 10px 0px;
    }
    .team-item-img{
        width: 100%;
    }
    .col-20{
        width: 50%;
    }
    .partner-type{
        font-size: 11px;
    }
    .global-pad{
        padding: 40px 0;
    }
    .menu-trigger.open .fa-times{
        display: block;
    }
    .menu-trigger.open .fa-bars{
        display: none;
    }
    .menu-trigger .fa-times{
        display: none;
    }
    .menu-trigger{
        display: block;
    }
    .menu-trigger .fa-bars{
        display: block;
    }
    #banner-area{
        background-position: right;
    }
    .banner-content h3{
        color: #333;
    }
    .banner-content h1{
        color: #333;
        font-size: 80px;
    }
    .tags-container .tag{
        margin: 0 5px;
        font-size: 14px;
    }

    body.has-menu{
        overflow: hidden;
    }
    .menu li .link{
        padding:15px 20px;
    }
    .redbox .product-details{
        text-align:center;
        margin:auto;
        padding:40px 0px;
    }
    .redbox h3::after {
        content: "";
        width: 150px;
        height: 2px;
        background:transparent;
        position: absolute;
        bottom: -15px;
        left: 0;
    }
    .c-popup-height{
    	overflow-y: scroll;
    	overflow-x: hidden;
    	display: block !important;
    }
    .cpopupw{
    	width: 85% !important;
    	padding:0 !important;
    }
    .popupBox{
    	padding:20px 20px 50px !important;
    }
    .quick-steps-box .row{
    	width: 100%;
    	margin: 0;
    }
    .stepHover{
    	padding: 30px 10px !important;
    }
    #popup .btn-pop-yellow-button{
    	font-size: 12px;
		font-weight: 600;
		white-space: normal;
    }
    #popup .input-group{
    	display: block;
    }
    #popup .input-group .input-group-prepend, #popup .input-group input.form-control{
    	display: block;
		width: 100%;
		float: unset;
		clear: both;
		border-radius:0px;
		font-size: 12px;
		text-align: center;
    }
    #popup .input-group .input-group-prepend span{
    	text-align: center;
		float: unset;
		display: block;
		border-radius: 0;
    }
    .layer-6.popupBox img {
	    width: 100%;	
	}
}

@media only screen and (max-width: 1200px) {
    .black-ribbon:after{
        content: "";
        background: transparent;
        background-position-x: right;
        background-position-y: top;
        position: absolute;
        height: 37px;
        width: 30px;
        background-position: 0px;
        margin-top: -7px;
        right: 3px;
    }
    .red-ribbon:after{
        content: "";
        background: transparent;
        background-position-x: right;
        background-position-y: top;
        position: absolute;
        height: 37px;
        width: 30px;
        background-position: 0px;
        margin-top: -7px;
        right: 3px;
    }
}
@media only screen and (max-width: 1200px) {
    .feature-01 .line{
        position: absolute;
        height: 2px;
        width: 450px;
        background:#ffb400;
        z-index: 9;
    }
    .feature-02 .line{
        position: absolute;
        height: 2px;
        width: 375px;
        background:#ffb400;
        z-index: 9;
    }
    .feature-03 .line{
        position: absolute;
        height: 2px;
        width: 325px;
        background:#ffb400;
        z-index: 9;
    }
    .feature-04 .line{
        position: absolute;
        height: 2px;
        width: 230px;
        background:#ffb400;
        z-index: 9;
    }
    .map .box{
        max-width: 190px;
    }
}
@media only screen and (max-width: 991px) {
    .menu li .link{
        padding:25px 11px;
    }
    .features .feature:not(:last-child)::after {
        width:90px;
        margin-left:50px;
    }
    .pack-image{
       display:none;
    }
    .feature-01, .feature-02, .feature-03, .feature-04{
        width:100%;
        padding-top:15px;
        text-align:left;
    }
    .feature-01 .line:after, .feature-02 .line:after, .feature-03 .line:before, .feature-04 .line:before{
        display:none;
    }
    .feature-01 .line, .feature-02 .line, .feature-03 .line, .feature-04 .line{
        width:100%;
    }
    .yellow-box img{
        width:100%;
        height:auto;
    }
}
@media only screen and (max-width: 768px) {
    .features .feature:not(:last-child)::after {
        display:none;
    }
    .laptop-right{
        background:transparent;
    }
    .pt-190{
        padding-top:0px;
        text-align: left !important;
    }
    .number-image{
        display:none;
    }
    .mt--50{
        margin-top:0px;
    }
    .numbers{
        text-align: left !important;
    }
    .button-line::before, .button-line::after{
        display:none;
    }
    .map img{
        height:auto;
    }
    .map .box{
        left:0px;
        width:100%;
        max-width:100%;
        position: unset;
    }
    footer p{
        text-align: center !important;
    }
    .map{
        padding-top:175px;
    }
    .menu-trigger {
        font-size:20px;
        top:43px;
    }
}

@media only screen and (max-width: 510px) {
	.mobile-center{
		display:block;
		margin-left:auto;
		margin-right:auto;
	}
}