.menu-bar li {margin-top:-10px;margin-bottom:10px;}

.bg-red {background-color: #c43030!important;}
.text-red {color: #c43030!important;}
.bg-darkblue {background-color: #101d39!important;}
.text-darkblue {color: #101d39!important;}

.show{ display: block!important;}
.hide{ display: none!important;}

.flex-row {display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.flex-col, .flex-col-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.flex-col {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

.flex-col-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}


.close-a { display: none;}
.custom-navbar1 { margin-top: -1px;}
.AboutPG .custom-navbar1,
.AboutPG .nav123 {background-color: #fff; z-index: 1000;}

@media all and (min-width: 951px) {
    .nav123.sticky { background-color:#fff; z-index: 1000; }
    .nav123:hover:before{ content:""; position: absolute; top: 0px; left: 0px; background-color:#fff; height: 101px; width: 100%;}
    .nav123 { background-color: transparent; transition: 0.4s ease-out;}
    .mega-menu--multiLevel li:hover>[aria-haspopup="true"]~ul, 
    .menu-bar li:hover>[aria-haspopup="true"]~ul { background: #fff; z-index: 1;}


    .megamenu-list { position: relative; z-index: 100;}
    .mega-menu--multiLevel li>a{border-radius: 25px;}

    .custom-navbar1 ul.menu.menu-bar .main_logo {width: 100px; padding: 10px 0px;}
    .custom-navbar1 ul.menu.menu-bar li ul.mega-menu.mega-menu--multiLevel li ul.menu.menu-list1 li a { margin-right: 20px; font-size: 14px; padding-right: 36px; margin-left: 40px;}
    .custom-navbar1 ul.menu.menu-bar li ul.mega-menu.mega-menu--multiLevel li ul.menu.menu-list1 li .menu-list1 p,
    .custom-navbar1 ul.menu.menu-bar li ul.mega-menu.mega-menu--multiLevel li ul.menu.menu-list1 li .menu-list1 h4{  margin-left: 40px;}
    .custom-navbar1 ul.menu.menu-bar li ul.mega-menu.mega-menu--multiLevel li ul.menu.menu-list1 li > a:hover:before { content:""; 
        background-image: url(../images/icon/red-right-arrow.png);
        background-size: 15px; background-repeat: no-repeat; width: 15px; height: 15px; font-size: 12px; position: absolute; right: 20px;
        top: 60%; transform: translateY(-50%);}
    .custom-navbar1 ul.menu.menu-bar{ padding-left: 0px; flex-wrap: nowrap;  justify-content: space-between;}

    .custom-navbar1 ul.menu.menu-bar li { margin-left: 0px;}    
    .custom-navbar1 ul.menu.menu-bar li .mega_product8 { padding-top: 10px;}
    .custom-navbar1 ul.menu.menu-bar li .mega_product7 { padding-top: 44px;}
    .custom-navbar1 ul.menu.menu-bar li ul.mega-menu.mega-menu--multiLevel:before {content:""; background: #fff; width: calc(100vw + 100%); height: 103%; left: -100%; top: -10px; position: absolute; z-index: -1; box-shadow: 0 150px 1px 150px rgb(0 0 0 / 50%);}
    .custom-navbar1 ul.menu.menu-bar li ul.mega-menu.mega-menu--multiLevel .mega_menu_p { margin-left: 184px;}
    .custom-navbar1 ul.menu.menu-bar li ul.mega-menu.mega-menu--multiLevel .mega_menu_p,
    .custom-navbar1 ul.menu.menu-bar li ul.mega-menu.mega-menu--multiLevel .mega_menu_p2,
    .custom-navbar1 ul.menu.menu-bar li ul.mega-menu.mega-menu--multiLevel .mega_menu_p1 { font-size: 14px;}
    .custom-navbar1 ul.menu.menu-bar li ul.mega-menu.mega-menu--multiLevel .mega_menu_p2 { margin-left: 54px;}
    .custom-navbar1 ul.menu.menu-bar li ul.mega-menu.mega-menu--multiLevel li a.menu-link1.mega-menu-link,
    .custom-navbar1 ul.menu.menu-bar li ul.mega-menu.mega-menu--multiLevel li a.menu-link1-1.mega-menu-link,
    .custom-navbar1 ul.menu.menu-bar li ul.mega-menu.mega-menu--multiLevel li a.menu-link2.mega-menu-link { margin-left: 170px; margin-top: 0px; font-size: 14px;}
    
    .custom-navbar1 ul.menu.menu-bar li ul.megamenu-list li .mega_menu_footer { padding: 5px 14px;}
    .custom-navbar1 ul.menu.menu-bar li ul.megamenu-list li .mega_menu_footer .follow-us { margin-left: 172px;}
    
    
    .custom-navbar1 ul.menu.menu-bar li ul.mega-menu.mega-menu--multiLevel li ul .mega_product3 { width: 250px; height: 250px; margin: 0 auto; display: flex; align-items: center;}
    .custom-navbar1 ul.menu.menu-bar li ul.mega-menu.mega-menu--multiLevel li ul .mega_product3 a:hover { background: none;}
    .custom-navbar1 ul.menu.menu-bar li ul.mega-menu.mega-menu--multiLevel li ul .mega_product3 a img { float: none; margin: 0 auto; display: block;}
	
}

@media all and (max-width: 950px) {
	.menu.menu-bar.left { left: 100%;}
    .menu-bar>li>[aria-haspopup="true"]~ul { height: calc(100vh + -60px);}
    .custom-navbar1 .mobile-menu-back-item a { margin-top: 0px; pointer-events: inherit; padding: 20px; padding-left: 48px; margin-left: 0px;}
    .custom-navbar1 ul.menu.menu-bar li ul.mega-menu.mega-menu--multiLevel li a.menu-link2.mega-menu-link {margin-top: -20px;}
    
	/* Mobile  view */
	.logo_nav1 .main_logo { width: 110px; padding-top: 0px;padding-bottom:0px;}	
	.logo_nav1 a.logo-a {width: 100px; float: left;margin-top:10px;}
	.logo_nav1 a.close-a {width: 40px; font-size: 40px; margin-top: 0px; text-align: right; display: block; float: right;color: #333;}
	
    .nav123 { padding: 0px; position: fixed; z-index: 1000; width: 100%;}
    .nav123.sticky { height: inherit;}
        
    .menu-bar>li>[aria-haspopup="true"]~ul.left { left: 100%;}
    .menu-bar>li>[aria-haspopup="true"]~ul { margin-top: calc(1.4em + 80px);}
    
    .megamenu-list { display: none;}
    p.mega_menu_p2 { display: none;}

}




/* MENU ACTIVE STATE*/
.WhyWriteBestPG #li-WhyWritebest > a,
.ProductPG #li-Product > a,
.InnovationPG #li-Innovation > a,
.AboutPG #li-AboutUs > a,
.ContactPG #li-Contacts > a {color: #000; border-bottom: 3px solid #c43030;;}
.LocationsPG #li-locations > a {color: #000; border-bottom: 3px solid #c43030;}


/* MOBILER VERSION */

@media (max-width: 767px) {
    .WhyWriteBestPG #li-WhyWritebest > a,
    .ProductPG #li-Product > a,
    .InnovationPG #li-Innovation > a,
    .AboutPG #li-AboutUs > a,
    .ContactPG #li-Contacts > a{color: #c43030; border-bottom: 0px solid #c43030;}
	
	.AboutPG .wrap { overflow: hidden;}
    .captioncompany_text { padding-bottom: 20px;}
	.menu-bar li {margin-top:0px;margin-bottom:0px;}
	.menu li {margin-top:0px;margin-bottom:0px;}
}





/* WHY WRITEBEST */
.WhyWriteBestPG .cd-main-content section.cd-section { padding: 0px; }

.blog_card_icon.blog_card_icon_highlight { background-color: transparent; height: inherit; border-radius: inherit;}
.blog_card_icon img.blog_card_img { border: 6px solid transparent; border-radius: 70px; margin-left: inherit; margin-right: inherit; padding-top: inherit; width: 70px;}
.blog_card_icon.blog_card_icon_highlight img.blog_card_img { border: 3px solid #ce3232; background-color: #ce3232; }


.blog-card123 {
    background-color: white;
    border-radius: 1px;
    height: 250px;
    max-width: 600px;
    overflow: hidden;
    margin-bottom: 0px;
    margin-top: 40px;
}

.blog-card123-mobile{
    display: none;
}

.industry_leader_div { height: auto; display: flex; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center;overflow: hidden;   margin-bottom: 20px;}
.industry_leader_h3 {margin: 0; padding-top: 0; padding-left: 20px;}

.sidenav_right {margin-top: 0px;}
.sidenav_right a:focus { color: white;}


@media(max-width: 900px){
    .blog_card_icon {
        width: 50px;
        height: inherit;
        margin-right: 20px;
        margin-bottom: 0px;
        float: none; display: inline-block;
        cursor: pointer;
    }

    .blog-card123 {
        height: 250px;
        max-width: 600px;
        overflow: hidden;
        margin-bottom: 0px;
        margin-top: 20px;
    }

    .blog_card_img_text{
        font-size: 10px;
        margin-left: 0px;
    }
	.LocationsPG #li-locations > a {color: #000; border-bottom: none;}
	.AboutPG #li-About > a {border-bottom:none;}
	

}



<!-- MOBILE VERSION -->

@media(max-width: 530px){
    .blog-card123-mobile{
        display: block;
    }

    .blogcard_title{
        text-align: left;
    }
    .blogcard_p{
        text-align: left;
    }
	
	.LocationsPG #li-locations > a {color: #000; border-bottom: none;}
	.mega-menu-link {padding-top:25px; padding-bottom:25px;}
	
	.mega-menu--multiLevel {margin-bottom:100px;}
	
	
	.menu-bar li {margin-top:-10px;margin-bottom:-10px;}
	.menu-link1-2 {padding-top:20px;}
	
	
	
}

<!-- MOBILE VERSION -->
@media (max-width: 767px) {
    .WhyWriteBestPG .main_right {margin-right:0px;}
	.LocationsPG #li-locations > a {color: #000; border-bottom: none;}
	.captioncompany_text {margin-top:50px;}
	.menu-bar li {margin-top:0px;margin-bottom:0px;}
	
	

}

@media only screen and (max-width: 900px) {
    .WhyWriteBestPG #li-WhyWritebest > a,
	.ProductPG #li-Product > a,
	.InnovationPG #li-Innovation > a,
	.AboutPG #li-AboutUs > a,
	.ContactPG #li-Contacts > a {color: #c43030; border-bottom: 0px solid #c43030;;}
	.LocationsPG #li-locations > a {color: #c43030; border-bottom: 0px solid #c43030;}		
}


/* ABOUT US */
.AboutPG .cd-main-content section.cd-section {padding: 100px 0;}
.masthead-about{ background-color: #ce3232; margin-top: -120px; display: block; padding: 0px; padding-top: 130px; margin-bottom: 70px;}
.masthead-image { width:100%;  margin-bottom:-50px; margin-top:0px;}
.captioncompany_text {font-size: 46px; color: #fff; font-family: 'Geomanist', sans-serif; line-height: 1.1em; padding: 0px 0px; padding-bottom: 50px;} 
.masthead-about-nav { display: block; position:relative; z-index:10; top:99px; z-index:10; margin-top: 80px;}
.masthead-about-nav .company_ul1 { display: none;}

.text-block-company4 { padding-top: 35px;}

#whoweare .row { padding-left: 0px;}
#vision_mission .RedBox {border-radius: 25px; width:100%; margin-bottom:0px;}

#core_values {margin-top:0px;}
#core_values .core_values_div1 {height: auto;}
#core_values .card_company {height: auto;}

.card_leadership { height: auto;}

#timeline h2.year {color: #000; font-size: 36px; font-family: 'Geomanist', sans-serif; text-align: right; white-space: nowrap;}
#timeline .fa-circle { font-size: 24px; color: #000; padding-top: 9px;}
#timeline .v-line { width: 1px; height: 98%; position: absolute;  border-left: 2px solid #e2e2e2; right: -26px; top: 20px; margin-top:128px;}
#timeline .info {margin-bottom:200px; display: block; padding-right: 30px;}
#timeline .info p {color: #363636;}
#timeline .info.box {border-radius: 25px; padding: 35px 40px; background-color: #101d39; margin-bottom:100px; display: block;}
#timeline .info.box p {color: #fff;}
#timeline .info.box h3.title {color: #c43030; font-size: 30px; font-weight: 500; font-family: 'Geomanist', sans-serif;}
#timeline .push-btm-100 {margin-bottom:100px}

#timeline .timeline-img-panel { position: sticky; top: 200px;}
#timeline .timeline-img-panel ul.img-nav { display: block; position: relative; margin-left: -50px;}
#timeline .timeline-img-panel ul.img-nav li { display: block;/* position: absolute;*/}
#timeline .timeline-img-panel ul.img-nav li img { display: none;}
#timeline .timeline-img-panel ul.img-nav li.active img { display: block;}



@media(min-width: 950px){
    .masthead-about-nav { display: block;  z-index:10; position: sticky; top:99px; z-index:10; margin-top: 170px;}
    .masthead-about-nav .company_ul1 { width: 100%; max-width:1140px; margin:0 auto; padding-left: 0px;  text-align: center; display: flex;
        flex-wrap: wrap; justify-content: space-evenly;}
    .masthead-about-nav .company_ul1 li { display: inline-block; float: none; padding: 0px;}    
    .masthead-about-nav .company_ul1 li a.sidenav_span123_highlight{ color: #c43030; }    
    .masthead-image { width:calc(50vw + 100px);  margin-bottom: -70px; margin-top: -30px;}
    .captioncompany_text {font-size: 46px; color: #fff; font-family: 'Geomanist', sans-serif; line-height: 1.1em; padding: 80px 0px;} 

    #vision_mission .RedBox { width: calc(100% + 90px); margin-bottom: -70px;}
}

@media only screen and (max-width: 900px) {
    #vision_mission {
        max-width: 100%;
        height: 100%;
        margin-bottom: 0px;
    }
	
	
}

@media (max-width: 991px) {
    #timeline .v-line { left: 24px; right: inherit;  }
    #timeline h2.year {text-align: left;}
    #timeline .info {margin-left: 50px; margin-bottom: 100px;}
    .AboutPG .cd-main-content section.cd-section.mobile-padding-reset { padding: 20px 0;}
}
