/*======================================================================
=            some normal media queries added for navigation            =
======================================================================*/
.logo,.trial-button,.header-right{
	width: auto;
}
.logo img{
	width: 85%;
}
.trial-button,.logo,.phone-nav {
	margin-top: 7px;
}
.trial-button .blue-btn, .trial-button .orange-btn, .phone-nav {
	   height: auto;
	   margin-left: 20px;
	  
}
.trial-button .blue-btn, .trial-button .orange-btn {
    padding: 0.6rem 1rem;
    height: auto;
    
}
.xs-dev-show{
	display: none;
}

/*======================================================================
=            responseive media queries added for navigation            =
======================================================================*/
@media only screen and (max-width: 1109px) and (min-width: 1024px){
	.main-nav li a {
    	font-size: 16px!important;
	}
	.top-drop-menu{
		top: 55px!important;
	}
	.main-nav .drpdown-item {
		padding: 0px 0px 10px;
	}
}

@media only screen and (max-width: 1109px) {

.main-nav li a, .main-nav li span {
	    display: block;
	    width: 100%;
	    height: auto;
	    margin: 0;
	    font-size: 16px;
	    padding: 8px 10px 7px;
	    color: #fff;
	    border-bottom: 0;
	    position: relative;
	    text-transform: uppercase;
	}
	
	.menu_nav{
		height:auto!important;
	}
	.main-nav .drpdown-item {
	    position: relative;
	    top: -1px;
	    padding: 0;
        left: 0px;
	    display: none;
	}

	/** This is to show the mobile menu if it has drop downs **/
	.showmenu_url{
		display:block!important;
	}
	
	.main-nav .drpdown-item li {
	    float: none;
	    width: 100%;
	    margin: 0;
	    padding: 0;
	    height: auto;
	    overflow: hidden;

	}   
	.main-nav .drpdown-item li:last-child{
		border-bottom:none;
	}
	.main-nav .drpdown-item li a {
	    float: none;
	    color: #fff;
	    font-size:13px;
	    padding-left: 20px;
	    top: 0px;
	    padding: 8px 10px 7px;
	}

	.drpdown-item li a {
	    padding-left: 20px;
	    padding-right: 20px;
	}
	
	.main-nav .drpdown-item {
	    top:0px!important;
	    left: 0px;
	    width:100%;
	}

	.active-drpdown li a{
		background:#6F91A4!important;
	}
	.active-drpdown li:hover a{
		background-color:#4d6d7f!important;
	}
}

@media only screen and (max-width: 1109px) and (min-width: 991px){
	/*** Begin header ***/
	.header-content {
		padding: 20px;
		min-height: 100px;
	}
	.logo {
		width: 30%;
		margin-top: 7px;
		max-width: 220px;
	}
	.header-right {
		width:350px;
		padding: 17px 0 0;
	}
	.main-nav {
		float: none;
		clear: both;
		padding: 0;
		position: relative;
		width: 100%;
	}
	.phone-nav {
		float: right;
		display: block;
		cursor: pointer;
		overflow: hidden;
		position: relative;
		z-index: 3;
	}
	.phone-nav em {
		font-size: 14px;
		line-height: 18px;
		font-style: normal;
		color: #fff;
		float: right;
		padding: 3px 10px 0 0;
		text-transform: uppercase;
	}
	.phone-nav div{
		float: right;
		width: 30px;
		padding: 4px;
		right: 0;
		display: block;
		border: 1px solid #fff;
		background: none;
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-o-transition: all .3s ease-out;
		transition: all .3s ease-out;
	}
	.phone-nav span {
		float: left;
		display: block;
		width: 100%;
		height:3px;
		margin: 1px 0;
		line-height: 3px;
		background: #fff;
	}
	.phone-nav div:hover,
	.nav-active-icon div {
		background: #6F91A4;
	}
	.nav-active-icon div {
		border-color: #6F91A4;
	}

	.main-nav ul { 
		float:none; 
		width:100%; 
		position:absolute; 
		left:0; 
		top:24px;
		margin: 0;
		padding:0;
		background:#6F91A4;
		display: none;
	}
	
	.main-nav li{ 
		float:none; 
		width:100%;
		margin: 0; 
		padding:0;
		height: auto;
		overflow: hidden;
		border-top: 1px solid #8ea9b7;
		border-bottom: 1px solid #547385;
	}
	.main-nav li a{ 
		display: block;
		width: 100%;
		height: auto;
		margin: 0;
		font-size: 16px;
		padding: 8px 10px 7px;
		color: #fff;
		border-bottom: 0;
	}
	.main-nav li a:hover,
	.main-nav li.active a {
		color: #fff;
		background-color:#4d6d7f;
	}
	.main-nav .drpdown-item {
	   /* padding: 38px 0 10px;*/
	    display: none;
	}
	/**end of header**/
	

}
@media only screen and (max-width: 1024px) and (min-width: 992px){
	.header-right {
    	float: right;
    }
    .main-nav .drpdown-item li a {
    	line-height: 28px;
	}
 }

@media only screen and (min-width: 767px) and (max-width: 1109px){
	.logo img{
		width: 100%;
	}
	.trial-button {
	    height: auto;
	    width: auto;
	}
	.trial-button .blue-btn, .trial-button .orange-btn {
	   height: auto;
	   padding: 0.5rem 1rem;
	  
	}
	.logo,.trial-button,.header-right{
		width: 250px;
	}
	.header-right{
		width: 350px!important;
		clear: both;
	}
	.logo{
		max-width: 184px;
	}

}
@media only screen and (max-width: 767px){
	.logo img{
		width: 100%;
	}
	.header-left{
		float: left;
		position: absolute;
		width:100%;
	}
	.header-content{
		padding: 1rem 0rem;
	}
	.main-nav ul {
		clear:both;
		top: 16px;
	}
	.header-right,.trial-button,.logo{
		width: auto;
	}
	.header-right {
    	float: right;
    	width: 100%;
    }
	.trial-button,.logo{
		float: left;
		position: static;
	}
	.trial-button .blue-btn, .trial-button .orange-btn {
	    margin: 0;
	    padding: 0.4rem 1rem;
	    height: auto;
	}
	.trial-button{
		margin-left: 1rem;
	}
	.logo{
		margin-left: 1rem;
	}
	.phone-nav{
		margin-right: 1rem;
	}
}
@media only screen and (max-width: 498px){
	.logo img{
		width: 100%;
	}
	.header-left{
		position: inherit;
		width: auto;
	}
	.trial-button,.logo{
		width: auto;
	}
	.main-nav ul {
		top: 15px;
	}
	.main-nav{
		width: 100%;
	}
	.header-right {
    	width: 100%;
    }
	.trial-button,.logo{
		float: left;
	}
	.trial-button .blue-btn, .trial-button .orange-btn {
	    margin: 0;
	    padding: 0.4rem 1rem;
	    height: auto;
	}
	.logo {
	    position: inherit;
	    width: 100%;
	}
	.xs-dev-hidden{
		display: none;
	}
	.xs-dev-show{
		display: block;
	}
	.logo{
		margin-left: 1rem;
	}
	.phone-nav{
		margin-right: 1rem;
	}
}