@media(min-width:1921px){
}
@media(max-width:1920px){
}

@media(max-width:1600px){

}


@media(max-width:1440px){
}

@media(max-width:1366px){

}

@media(min-width:1199px){
	
}

@media (min-width: 1200px) and (max-width:1366px){
    h1{font-size: 40px;}
    h2{font-size: 30px;}
    h3{font-size: 24px;}
    h4{font-size: 18px;}
    h5{font-size: 16px;}
    h6{font-size: 14px;}

}
@media (max-width:1199px){
}
@media (min-width: 992px) and (max-width:1199px){
    .modal-content-area {width: 90%;}
}
/*====== Navigation styles start ======*/
@media (max-width: 1060px) {
	#mainNavBoxLarge .primaryNavBoxLarge {gap: 0 5px;}
	
}
@media (max-width: 1300px) {
	
    .mainNavBtnBox {display: block;}
    .topMainNav, .topMainNav.topMainNavScroll {padding: 5px 15px;}
    #mainNavBoxLarge {position: fixed;top: 117px; right: -100%; background: var(--darker); width: 420px; max-width: 100%; height: 100vh; overflow: auto; z-index: 999;
        -webkit-transition: .3s ease-in-out;
        -moz-transition: .3s ease-in-out;
        -ms-transition: .3s ease-in-out;
        -o-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }
    #navLogoBox {padding: 10px 0;}
    #mainNavBoxLarge .primaryNavBoxLarge {padding: 20px; gap: 10px 0;}
    #mainNavBoxLarge .primaryNavBoxLarge li:not(.sub-menu li) {padding: 0; margin-right: 0; width: 100%;}
    #mainNavBoxLarge .primaryNavBoxLarge li.menu-item-has-children:not(.sub-menu li) > a:before {display: none;}
    #mainNavBoxLarge .primaryNavBoxLarge li ul.sub-menu {display: block; position: static; width: 100%;}
    #mainNavBoxLarge .primaryNavBoxLarge li a:not(.sub-menu li a) {padding: 5px 10px; color: #ffffff;}
    #mainNavBoxLarge .primaryNavBoxLarge li.menu-item-196 a:not(.sub-menu li a) {padding: 10px 20px;}
    #mainNavBoxLarge .primaryNavBoxLarge li a:not(.sub-menu li a):after {display: none;}
    #mainNavBoxLarge .primaryNavBoxLarge li:hover a:not(.sub-menu li a), 
    #mainNavBoxLarge .primaryNavBoxLarge li.current-menu-item a:not(.sub-menu li a), 
    #mainNavBoxLarge .primaryNavBoxLarge li a:not(.sub-menu li a):focus {color: var(--light-orion-gray);}
    .mainNavBtnBox #mainNavBtn i {color: var(--dark);}
    .topMainNav.topMainNavScroll .mainNavBtnBox #mainNavBtn i {color: #ffffff;} 
    #mainNavBoxLarge.mainNavBoxOpened {right: 0;}
    .pageMarginTop {margin-top: 116px;}
}
/*====== Navigation styles end ======*/
@media (max-width:991px){
    .mainHomeBanner h1, .textPageHeader h1 {font-size: 36px;}
    .portalPageIntro .portalTextBox, .portalPageIntro .portalLinkBox {padding: 40px;}
	.topMainNavContainer{
		padding: 25px 0;
	}
	
	#mainNavBtn{
		color: #fff;
	}
	
	.mainHomeBanner video{
		height: 100%;
		object-fit: cover;
	}
	
	.mainHomeBanner .mainBannerTextContainer .mainBannerText{
		width: 100%;
    	padding: 0 20px;
	}
	
	.orionServices .flexContainer .serviceItem .serviceText{
		min-height: 300px;
	}
	
	.aboutOrion::after{
		background: linear-gradient(90deg, rgba(0, 0, 0, 0) 35%, rgb(146, 146, 146) 100%);
	}
	
	.aboutOrion .flexContainer .flexItem .aboutText{
		widtH: 100%;
	}
	
	.productTypes .flexContainer .productsBox{
		width: calc(50% - 23px);
	}
	
	#mainNavBoxLarge{
		background: #00003e;
	}
	
	.aboutCbc .aboutCbcText{
		padding: 100px 50px;
	}
}
@media (min-width: 768px) and (max-width:991px){}
@media (min-width: 768px) and (max-width:1199px){
    h1{font-size: 40px;}
    h2{font-size: 30px;}
    h3{font-size: 24px;}
    h4{font-size: 18px;}
    h5{font-size: 16px;}
    h6{font-size: 14px;}
}
@media (min-width: 576px) and (max-width:767px){}
@media (max-width:767px){
    h1{font-size: 36px;}
    h2{font-size: 30px;}
    h3{font-size: 24px;}
    h4{font-size: 18px;}
    h5{font-size: 16px;}
    h6{font-size: 14px;}
    .servicePageBigImage img {height: 500px;}
    .serviceBox2 .serviceBoxInfo2 {font-size: 14px;}
    .portalPageIntro .portalTextBox {font-size: 16px;}
}
@media (max-width:575px){
    body{font-size: 14px;}
    #menu-footer-menu{margin-left: 0;}
    h1{font-size: 30px;}
    h2{font-size: 22px;}
    h3{font-size: 20px;}
    .mainHomeBanner h1, .textPageHeader h1 {font-size: 28px;}
	
	.mainHomeBanner .mainBannerTextContainer{
		width: 100%;
	}
	
	.mainHomeBanner .mainBannerTextContainer .mainBannerText{
		transform: initial;
		width: 100%;
	}
	
	#mainNavBoxLarge .primaryNavBoxLarge li:hover a:not(.sub-menu li a), #mainNavBoxLarge .primaryNavBoxLarge li.current-menu-item a:not(.sub-menu li a), #mainNavBoxLarge .primaryNavBoxLarge li a:not(.sub-menu li a):focus{
		color: #ffffff;
	}
	
	.orionServices .flexContainer{
		flex-direction: column;
	}
	
	.aboutOrion .flexContainer .flexItem{
		flex: auto;
	}
	
	.productTypes .flexContainer .productsBox{
		width: calc(100% - 23px);
	}
	
	.navigation-footer-menu, .find-us-footer-menu{
		margin-top: 2em;
	}
	
	.aboutCbc .aboutCbcText {
        padding: 50px 20px;
    }
	
	.orionTeam .flexContainer .teamBox {
		width: calc(100% - 15px);
	}
	
	.singleTeamInfoBox{
		padding-top: 20px;
	}
	
	.orionServices .flexContainer .serviceItem .serviceText {
        min-height: 245px;
    }
	
	.mediaContainer .flexContainer .mediaBox{
		flex-direction: column;
	}
	
	.mediaContainer .flexContainer .mediaBox .mediaImage{
		width: 100%;
	}
	
	.mediaContainer .flexContainer .mediaBox .mediaImage img{
		width: 100%;
	}
	
	.mediaContainer .flexContainer .mediaBox .mediaContent{
		width: 100%;
	}
	
	.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{
		height: 350px;
	}
}
@media (max-width: 360px){
     h1{font-size: 22px;}
}
@media (max-width: 320px){}
@media (min-width: 768px){}