@container main-wrpper(min-width:1025px) and (max-width:1200px){
	.menulist ul li{
        margin-right: 12px;
    }
    .logo-box img{
        height: 70px;
    }
}

@container main-wrpper(min-width:992px) and (max-width:1024px){
	.menulist ul li{
        margin-right: 12px;
    }
    .logo-box img{
        height: 70px;
    }
}

@container main-wrpper(min-width:768px) and (max-width:991px){
    .banner-inner h1{
        font-size: 1.5rem !important;
    }
    .content-data p{
        font-size: 0.9rem;
    }
    .btn-main{
        font-size: 0.9rem;
    }
    .updates-box li a{
        font-size: 0.9rem;
    }
    .logo-box img{
        height: 70px;
    }
}
@container main-wrpper(max-width:1530px){
	.updates-page .banner{
        background-size: cover;
    }
}
@container main-wrpper(max-width:1460px){
    .updates-page .banner{
        background-size: cover;
    }
}

@media (max-width:991px) {
    .navbar-rw{
        opacity:0; 
		visibility:hidden;
        position: fixed;
        right: -300px;
        bottom: 0;
        background: #fff;
        padding: 0 15px 25px 15px;
        width: 300px;
        height: calc(100% - 70px);
		transition: right 0.4s linear, opacity 0.4s linear, visibility 0.4s linear;
		right: -300px;
    }
    .menulist ul li{
        margin: 5px 0;
    }
    .navbar-toggler{
        display: block;
    }
    .navbar-rw.active{
        right: 0;
		opacity: 1;
		visibility: visible;
		display:inline-block;
    }
	.topbar{display:none;}
	.menulist{display:none;}
	.navbar-rw.active .topbar{display:block;}
	.navbar-rw.active .menulist{display:block;}
    .navbar-rw.active .topbar ul{
        justify-content: flex-end;
    }
    .navbar-rw.active .menulist ul{
        flex-direction: column;
        align-items: flex-start;
    }
    .logo-box img{
        height: 70px;
    }
    .nav-row{
        padding: 5px 0;
    }
}

@container main-wrpper(max-width:991px){

    .updates-box li p{
        flex-direction: column;
        align-items: flex-start;
    }

    /***** Marine Transportation Page *****/
    .marine-banner-inner h1{
        font-size: 1.5rem;
    }
    .marine-banner-inner img{
        width: 50px;
        height: 50px;
    }
    .marine-banner{
        padding: 80px;
    }
    .overview-data p{
        font-size: 0.9rem;
    }
    .comman-title-secondry h2{
        font-size: 1.1rem;
    }
    /***** End Marine Transportation Page *****/

    /***** Obtain Data Page *****/
    .human-dimensions-dec{
        font-size: 0.9rem;
    }
    .obtain-title h2{
        font-size: 1rem;
    }
    .obtain-icon-box{
        width: 48.5%;
    }
    /***** End Obtain Data Page *****/

    /***** Update Page *****/
    .updates-page .banner{
        padding: 110px 0;
    }
    .banner-inner{
        width: 100%;
        padding: 0 15px;
    }
	.menulist ul li a{color:#236b95;}
	.topbar ul li a{color:#236b95; padding:0px;}
	.topbar ul li{margin-right:10px;}
	.topbar ul li:last-child{margin-right:0px;}
    /***** End Update Page *****/
}
@container main-wrpper (max-width:767px){
    .custom-row{
        flex-direction: column;
    }
    .custom-col-50{
        width: 100%;
    }
    .navbar-rw{
        height: calc(100% - 70px);
    }
    .logo-box img{
        height: 50px;
    }
    /*.banner{
        margin-top: 60px;
    }*/
    .banner-inner{
        width: 100%;
        padding: 0 15px;
    }
    .banner-inner h1{
        font-size: 1.5rem !important;
    }
    .content-data p{
        font-size: 0.9rem;
    }
    .btn-main{
        font-size: 0.9rem;
    }
    .updates-box li a{
        font-size: 0.9rem;
    }
    .content-data{
        width: 100%;
        padding: 25px;
    }
    .data-img{
        width: 100%;
    }
    .explorer-inner,
    .topics-inner,
    .agency-inner{
        flex-direction: column;
    }
    .content-data .btn-main{
        margin: 20px auto 0;
    }
    .updates{
        margin-top: 0;
    }
    .topics{
        margin-bottom: 0;
    }
    .agency-box{
        width: 100%;
        padding-left: 20px;
    }
    .portal-inner{
        flex-direction: column;
    }
    .portal-inner-box{
        width: 100%;
        padding: 5px 0;
    }
    .footer-inner-box{
        width: 50%;
		width:100%;
		margin-top:0px;
    }
    .footer-inner{
        flex-wrap: wrap;
		margin-top:20px;
    }
    .footer-contact{
        width: 100%;
        flex-direction: column;
    }
    .contact-form{
        width: 100%;
    }
    .social-media{
        width: 100%;
        margin-top: 15px;
    }
    .updates-box li span img{
        width: 36px;
    }
    .banner{
        padding: 60px 0;
    }
    /***** Marine Transportation Page *****/
    .overview-data{
        width: 100%;
    }
    .data-box{
        width: 100%;
        margin-top: 10px;
    }
    .overview-inner{
        flex-direction: column;
    }
    .subtopics-inner{
        flex-direction: column;
    }
    .subtopics-inner-data{
        width: 100%;
    }
    .subtopics-inner-img{
        width: 100%;
        margin-top: 15px;
    }
    .subtopics-link{
        margin: 15px 0;
    }
    .marine-page .updates{
        margin-top: 30px;
    }
    /***** End Marine Transportation Page *****/

    /***** Obtain Data Page *****/
    .obtain-box{
        width: 100%;
        margin-top: 10px;
    }
    .obtain-box-inner{
        width: 100%;
    }
    /***** End Obtain Data Page *****/

    /***** About Page *****/
    .about-fig,
    .about-fig-inner{
        width: 100%;
    }
    .about-fig-inner{
        margin: 10px 0 20px;
    }
    .comman-subtitle h2{
        font-size: 1rem;
    }
    .tab-container{
        width: 100%;
    }
    .tab-container .tab-menu ul li a{
        padding: 10px 15px;
        font-size: 0.9rem;
    }
    .tab-container .tab{
        padding: 20px;
        margin-top: 10px;
    }
    .tab-container .tab p{
        font-size: 0.9rem;
    }
    /***** End About Page *****/
}

@container main-wrpper (max-width:575px){
    .copyright .container{
        flex-direction: column;
        justify-content: center;
    }
    .leftlogo img{
        height: 45px;
        margin-bottom: 15px;
    }
    .footer-inner-box{
        width: 100%;
    }
    .agency-box li{
        flex-direction: column;
        align-items: flex-start;
    }
    .agency-box-img{
        margin: 0 0 5px 0;
    }
    .content-data .btn-main{
        padding: 10px;
    }
    .banner-inner h1{
        font-size: 1.1rem !important;
    }
    
    /***** Obtain Data Page *****/
    .obtain-icon-box{
        width: 100%;
    }
    /***** End Obtain Data Page *****/
}