@media(max-width: 1900px){
    .chrolonogy-graph {
        width: 89.8%;
    }
}
@media(max-width: 1860px){
    .chrolonogy-graph {
        width: 89.6%;
    }
}
@media(max-width: 1830px){
    .chrolonogy-graph {
        width: 89.3%;
    }
     .chrolonogy-graph {
        width: 89.3%;
    }
}
@media(max-width:1800px){
    h4.quote{
        font-size: 2.2rem;
    }
    .sub-container{
        width: 90%;
    }
    .gallerylist-grid .gallery-main-thumb{
        width: 100%;
    }
    .img-gallery-grid .header{
        font-size: 2rem;
    }
    .contact-container {
        width: 90%;
        margin: auto;
    }
    #top-image .gandhi-profile-photo{
        width:23%;
    }
    #top-image .gandhi-profile-photo img{
        width:100%;
    }
    .contact-grid{
        font-size: 14px;
    }
    
}
@media(max-width: 1780px){
    .chrolonogy-graph {
        width: 89%;
    }
}
@media(max-width: 1730px){
    .chrolonogy-graph {
        width: 88.6%;
    }
}
@media(max-width:1700px){
    
    .img-gallery-grid .header{
        font-size: 1rem;
    }
    .family-member:before{
        width: 70%;
    }
    .contact-container {
        width: 90%;
        margin: auto;
    }
    .contact-grid{
        font-size: 14px;
    }
}
@media(max-width: 1670px){
    .chrolonogy-graph{
        width: 88.5%;
    }
}
@media(max-width: 1656px){
    .chrolonogy-graph{
        width: 88.2%;
    }
}
@media(max-width: 1620px){
    .chrolonogy-graph{
        width: 88%;
    }
}
@media(max-width:1600px){
    
    .img-gallery-grid .header{
        font-size: 1rem;
    }
    
    .family-member::before {
    width: 77%;
}
}
@media(max-width: 1590px){
    .chrolonogy-graph{
        width: 87.8%;
    }
}
@media(max-width: 1577px){
    .chrolonogy-graph{
        width: 87.6%;
    }
}
@media(max-width: 1544px){
    .chrolonogy-graph{
        width: 87.3%;
    }
}
@media(max-width: 1510px){
    .chrolonogy-graph{
        width: 87%;
    }
}
@media(max-width:1500px){
    
    .img-gallery-grid .header{
        font-size: .9rem;
    }
    
    .philosophy-grid.gandhi-img-philosophy h1{
        font-size: 35px;
        line-height: 38px;
    }
    .philosophy-grid.gandhi-img-philosophy .bio h5 {
        font-family: 'Roboto-Light';
        padding: 0 28px;
        margin-bottom: 40px;
        font-size: 20px;
    }
    .philosophy-grid h4{
        font-size: 18px;
    }
    .phhilosophy-container{
        width: 75%;
    }

}
@media(max-width: 1474px){
    .chrolonogy-graph{
        width: 86.8%;
    }
}
@media(max-width: 1452px){
    .chrolonogy-graph{
        width: 86.6%;
    }
}
@media(max-width:1440px){
    .chrolonogy-graph{
        width: 86.3%;
    }
    .contact-grid{
        height: 192px;
    }
    .main-banner .intro-bio h1.mani-bio{
        font-size: 8rem;
        line-height: 80%;
    }
    .about-bio .gandhi-intro {
        font-size: 8rem;    
    }
    .events-container{
        width: 100%;
    }
    .img-gallery-grid .header{
        font-size: .8rem;
    }
    .profile-text{
        padding-right: 0;
    }
    #top-image .gandhi-profile-photo{
        width: 23%;
        left: 7%;
    }
    #top-image .gandhi-profile-photo img{
        width: 100%;
    }
    .gandhi-intro img {
        width: 90%;
        margin-top: 0;
    }
    .profile-text{
        margin-top: 1rem;
    }
    .biography-list .name {
        font-size: 24px;
    }
    .lens img {
        width: 122%;
    }
    .contact-grid{
        padding: 20px;
    }

}
@media(max-width: 1408px){
    .chrolonogy-graph{
        width: 86%;
    }
}
@media(max-width: 1400px){
    .chrolonogy-graph{
        width: 86%;
    }
}
@media(max-width: 1374px){
    .chrolonogy-graph{
        width: 85.8%;
    }
}

@media(max-width: 1366px){
    
    .top-banner h1{
        font-size: 4.6rem;
    }
    
    .top-banner{
        padding: 2.6rem 0;
    }
    .events-container{
        width: 100%;
    }

    section.gandhi-pedia:before{
        width: 34%;
    }
    .home .navbar-light .navbar-nav .nav-link {
        font-size: .8rem;
        margin-right: 20px;
    }
    .about-mani-bhavan .bio{
        padding:0;
    }
    .main-title{
        font-size: 8rem;
    }
    .activity{
        padding: 1rem 0;
    }
    .contact-grid{
        padding: 14px;
    }
    .archives h5{
        font-size: 14px;
    }
    .chrolonogy-graph {
    width: 85.6%;
    }

}
@media(max-width:1348px){
    
    .phhilosophy-container{
        width: 90%;
    }
    .lens img {
        width: 122%;
    }
    .img-gallery {
        margin-top: 0.5rem;
    }
}
@media(max-width: 1328px){
    .contact-grid li .dsgn{
        width: 37%;
    }
    .chrolonogy-graph {
        width: 85.30%;
    }
}
@media(max-width: 1300px){
    .about-profile{
        padding: 32vh 0 61vh;
    }

}
@media(max-width:1294px){
    .chrolonogy-graph{
        width: 85%;
    }
}
@media(max-width:1280px){
    
    .events-container{
        width: 100%;
    }
    .phhilosophy-container{
        width: 80%;
    }
    .lens img {
        width: 122%;
    }
    .main-title {
        font-size: 8rem;
    }

}
@media(max-width: 1250px){
    .family-member::before {
        width: 77.7%;
    }
    .contact-grid li .dsgn{
        width: 100%;
        margin-bottom: 20px;
    }
    .chrolonogy-graph {
        width: 84.3%;
    }
}
@media (max-width: 1214px){
    .chrolonogy-graph {
        width: 84%;
    }
}
@media (max-width: 1202px){
    .chrolonogy-graph {
        width: 83.5%;
    }
}
@media(max-width: 1170px){
    .home .navbar-light .navbar-nav .nav-link {
        font-size: .8rem;
        margin-right: 24px;
    }
    .about-bio .gandhi-intro{
        font-size: 6rem;
    }
}
@media (max-width: 1168px){
    .chrolonogy-graph {
        width: 83%;
    }
}
@media(max-width: 1145px){
    .about-profile{
        padding: 32vh 0 61vh;
    }
}
@media (max-width: 1130px){
    .chrolonogy-graph {
        width: 82.3%;
    }
}

@media(max-width: 1118px){
    .family-profile h4{
        font-size: 15px;
    }
}
@media(max-width: 1096px){
    .main-title{
        font-size: 7rem;
    }
    
    
}

@media(max-width: 1084px){
    .video-grid h4{
        min-height: 80px;
    }
    
}

@media(max-width: 1080px){
    .phhilosophy-container{
        width: 90%;
    }
    .info-menu.megamenu{
        width: 96%;
        margin:auto;
        left:0;
        right:0;
    }
    
    .about-bio .gandhi-intro{
        font-size:4rem;
    }
    .biography-listing{
        margin-top:0;
    }
    .biography-list .name{
        font-size: 18px;
    }
    .biography-list .icon img {
        height: 54px;
    }
    .gandhi-pedia-list li{
        font-family: 'Roboto-Bold';
    }
    .gandhi-pedia-list {
        padding-top: 1.875rem;
    }
    .lens img {
        width: 100%;
    }
    .about-profile {
        padding: 146px 0;
        background-position: center top !important;
    }
}



@media(max-width: 1068px){
    
    .chrolonogy-graph h4{
        font-size: 23px;
    }
    .chrolonogy-graph h4 a span::before{
        font-size: 22px;
    }
}
@media (max-width: 1060px){
    .chrolonogy-graph {
        width: 81.3%;
    }
}

@media (max-width: 1054px){
    .gandhi-pedia-list li{
        font-size: 18px;
    }
    .phhilosophy-container{
        width: 90%;
    }
    .contact-grid li span{
        width: 100%;
        display: inline-block;
    }
    .contact-grid li .details{
        padding-left: 0px;
    }
}
@media(max-width: 1046px){
    .family-profile h4{
        font-size: 14px;
    }
}

@media (max-width: 1060px){
    .chrolonogy-graph {
        width: 81%;
    }
}

@media(max-width:1024px){
    .main-banner .intro-bio h1.mani-bio{
        font-size: 6rem;
    }
    .main-banner{
        background-position: 72% -150px;
        position: relative;
        z-index: 0;
    }
    h4.quote{
        bottom:100px;
    }
    .main-banner::after {
    background: #f4ece1;
    height: 200px;
    content: "";
    width: 100%;
    z-index: -1;
    bottom: 0;
    position: absolute;
}
    .main-banner .intro-bio .gandhi-tagline{
        font-size: 2.4em;
    }
    .sub-container{
        width: 90%;
    }
    #top-image .gandhi-profile-photo img{
        width: 286px;
    }
    .gallerylist-grid .gallery-main-thumb{
        width: 100%;
    }
    .gallerylist-grid .gallery-main-thumb{
        padding: 0;
    }
    
    #top-image .about-bio h4 {
        font-size: 1rem;
    }
    .profile-text {
        margin-top: 2.4rem;
    }
    .gandhi-pedia .col-md-7{
        max-width: 100%;
        flex: 0 0 100%;
    }
    
    .img-gallery-grid figure{
        height: auto;
    }
    .img-gallery-grid .header {
        font-size: 1rem;
    }
    .phhilosophy-container{
        width: 90%;
    }
    
}
@media(max-width: 1016px){
    
    .row.infographics-grid:nth-child(2n) .date {
    padding-left: 20px;
}
.row.infographics-grid:nth-child(2n) h4{
    padding-left: 20px;
}
    h4.quote{
        bottom:20px;
    }
    
}

@media(max-width: 1010px){
    .family-profile h4{
        font-size: 13px;
    }
    .chrolonogy-graph {
        width: 80.6%;
    }
}

@media(max-width: 998px){
    .info-menu.dropdown-menu li a{
        font-size: 14px;
    }
    .main-title {
        font-size: 6rem;
    }
}
@media(max-width: 996px){
    #indian-leader figure img{
        width: 100%;
    }
    
    .chrolonogy-graph {
        width: 80%;
    }
    .chrolonogy-graph h4{
        font-size: 18px;
    }
    .chrolonogy-graph h4 a span::before{
        font-size: 18px;
    }
    .row.infographics-grid:nth-child(2n) .date {
        padding-left: 16px;
    }
    .row.infographics-grid:nth-child(2n) h4{
        padding-left: 16px;
    }
    .row.infographics-grid:nth-child(2n) .chrolonogy-graph{
        padding-top: 36px;
    }
    .row.infographics-grid:nth-child(2n) .number::before {
        right: -81px;
        top: -78px;
        background-size: 35%;
    }
    .chrolonogy-graph h4 a span::before {
        font-size: 17px;
    }
}
@media screen and (max-width: 992px) and (orientation: landscape) {
    .main-banner::after{
        display: none;
    }
    .main-banner{
        background-position: 72% 0;
        height: 500px;
    }
    .clock-frame {
       height: 134px;
    width: 84px;
    padding-top: 52px;
    
    }
   .analog-clock {
    background-size: 80%;
    width: 70px;
    height: 70px;
}
    .main-banner .intro-bio h1.mani-bio{
        font-size: 5rem;
        text-align: left;
    }

    .main-banner .intro-bio .gandhi-tagline{
        font-size: 2rem;
        text-align: left;
    }

}
@media(max-width: 991px){
    #indian-leader figure img{
        width: 100%;
    }
    .books-by-gandhi li{
        width: 100%;
    }
    
    .contact-grid li span{
        display: table-cell;
        width: auto;
        padding-right: 0;
    }
    .contact-grid{
        overflow: hidden;
        min-height: auto;
        padding: 20px;
    }
    .quiz-answer-list li{
        width: 40%;
        margin: 20px 1.75rem;
    }
}

/*@media(max-width: 980px){
    .infographics-grid .number {
        float: right;
        background: #ebebeb;
        width: 46px;
        height: 46px;
        line-height: 46px;
        text-align: center;
        border-radius: 50%;
        font-size: 23px;
        font-family: 'Roboto-light';
        color: #ef907c;
        top: 54px;
        position: relative;
    } 
}*/
@media(max-width: 978px){
    .chrolonogy-graph {
        width: 79.8%;
    }
}
@media(max-width: 973px){
    .family-profile h4{
        font-size: 12px;
    }
}
@media(max-width:972px){
    .gandhi-pedia-list li {
        font-size: 13px;
    }
    .chrolonogy-graph {
        width: 79%;
    }
    .gandhi-pedia .col-md-7{
        max-width: 100%;
        flex: 0 0 100%;
    }
    
}
@media(max-width: 967px){

    .family-member::before {
        width: 78%;
    }

}
@media(max-width: 957px){
    .chrolonogy-graph{
        width: 79%;
    }
}

@media(max-width: 938px){
    .family-profile h4{
        font-size: 11px;
    }
}
@media(max-width:932px){
    .navbar-light .navbar-nav .nav-link{
        margin-left: 22px;
    }
    .chrolonogy-graph{
        width: 78.8%;
    }
}
@media(max-width: 923px){
    .chrolonogy-graph {
        width: 78.4%;
    }
}
@media(max-width: 920px){
    .chrolonogy-graph{
        width: 79%;
    }
    .number::before{
   
top: -76px;
right: -24px;
    }
}
@media(max-width:912px){
    .gallerylist-grid .more-details h5{
        font-size: 1rem;
    }
    .events-container{
        width: 100%;
    }
    .chrolonogy-graph {
        width: 78.2%;
    }
}
@media(max-width: 902px){
    .family-profile h4 {
        font-size: 13px;
        
    }
    .family-profile h4 a{
        padding: 8px 22px;
    }
    .chrolonogy-graph{
        width: 78%;
    }
    
    .dropdown-menu .header{
        font-size: 15px;
    }
}
@media(max-width: 890px){
    .family-profile h4 a{
        padding: 8px 16px;
    }
    .chrolonogy-graph{
        width: 77.6%;
    }
}
@media(max-width: 876px){
    
    .chrolonogy-graph{
        width: 77.2%;
    }
}
@media(max-width:856px){
    .navbar-light .navbar-nav .nav-link{
        margin-left: 18px;
    }
    .chrolonogy-graph{
        width: 76.6%;
    }
}
@media(max-width: 842px){
    .chrolonogy-graph{
        width: 76.4%;
    }
}

@media(max-width:838px){
    .navbar-light .navbar-nav .nav-link{
        margin-left: 10px;
    }
    
    .img-gallery-grid .header{
        font-size: .9rem;
    }
}
@media(max-width:832px){
    .gallerylist-grid .more-details h5{
        font-size: 0.9rem;
    }
    .gallerylist-grid .more-details h5 span{
        font-size: 11px;
        padding-top: 2px;
    }
    .events-container{
        width: 100%;
    }
    .navbar-light .navbar-nav .nav-link {
        margin-left: 14px;
        font-size: 14px;
    }
    .chrolonogy-graph{
        width: 76.0%;
    }
    
}

@media(max-width: 828px){
    .family-profile h4 a{
        padding: 8px 14px;
    }
}
@media(max-width: 824px){
    .gallerylist-grid .more-details h5{
        font-size: .8rem;
    }
    .main-title {
        font-size: 5rem;
    }
    .chrolonogy-graph .date{
        padding-right: 14px;
    }
}

@media(max-width: 808px){
    .family-profile h4 a{
        padding: 8px 8px;
    }
    .row.infographics-grid:nth-of-type(2n+1) .chrolonogy-graph{
        width: 75.4%;
    }
}
@media(max-width: 800px){
    .row.infographics-grid:nth-of-type(2n+1) .chrolonogy-graph{
        width: 75.2%;
    }
}
@media(max-width: 786px){
    .chrolonogy-graph .date {
    padding-right: 8px;
}
.row.infographics-grid:nth-of-type(2n+1) .chrolonogy-graph{
        width: 74.5%;
    }
}
@media(max-width: 784px){
    .about-profile {
        padding: 20vh 0 30vh;
    }
    .family-profile h5{
        font-size: 16px;
    }
}
@media(max-width: 775px){
     .chrolonogy-graph .date {
    padding-right: 4px;
}
}
@media(max-width: 774px){
    .biography-list {
        max-width: 76%;
    }
}

@media (min-width: 769px) and (max-width: 992px){
    .philosophy-data {
        padding: 0 12px;
        max-width: 50%;
        flex: 0 0 50%;
    }
    .sub-container{
        width: 90%;
    }
    .events-container{
        width: 100%;
    }
    .nav-tabs .nav-link{
        font-size: 25px;
    }
    .phhilosophy-container{
        width: 90%;
    }
}
@media only screen and (max-width: 768px){
    .about-mani-bhavan .bio{
        font-size: 16px;
    }
   
    .contact-grid{
        margin-bottom: 30px;
        display: block;
        height: auto;
        font-size: 15px;
        overflow: hidden;
        padding: 15px;
    }
    .top-banner h1 {
        font-size: 2.6rem;
    }
    .gallerylist-grid .gallery-main-thumb{
        width: 100%;
        margin-bottom: 46px;
        padding: 0 15px;
    }
    .events-container{
        width: 100%;
    }
    .sub-container{
        width: 90%;
    }
    .gallerylist-grid .more-details h5{
        font-size: .9rem;
    }
    .gallerylist-grid .more-details h5 span{
        font-size: 12px;
    }
    
    .events-grid{
        margin-bottom: 40px;
    }
    
    .event-listing ul li span{
        font-size: 14px;
        width: 100%;
        text-align: right;
        margin-top: 8px;
    }
    .event-listing ul li{
        float: left;
        width: 100%;
        padding-left:15px;
    }
    .event-listing ul li:before{
        left:0px;
    }
    .phhilosophy-container{
        width: 100%;
        overflow-x: hidden;
        padding: 0 15px;
    }
    .philosophy-grid{
        margin-bottom: 30px;
    }
    .philosophy-data{
        padding: 0 15px;
    }
    #top-image .gandhi-profile-photo{
        width: 90%;
    }
    .biography-list{
        max-width: 100%;
    }
    .family-member{
        width: 100%;
    }
   
    
    section.activity ul li{
        font-size: 16px;
        width: 100%;
    }
   

}
@media screen and (max-device-width: 767px) and (orientation: landscape) {
    .main-banner .intro-bio{
        top:54% !important;
        text-align: left;
    }
    #top-image .gandhi-profile-photo img{
        width:32%;
    }
    h4.quote{
        font-size: 34px;
       padding: 0 40px;
    }
    .main-banner{
        background-position: 54% 0;
        background-size: cover;
    }

}
@media screen and (max-device-width:767px) and (orientation: portrait){
    .main-banner {
        background: url(../images/mobile-main-banner.jpg);
        background-position: 89% 40px;
        background-size: cover;
    }
    h4.quote{
        font-size: 22px;
        width: 90%;
    }
}
@media (max-width: 767px){
    .container {
        max-width: 90%;
        margin: auto;
        display: block;
    }
    .gandhi-pedia-list li:before{
        bottom: 2px;
    }
    .main-banner::after{
        display: none;
    }
    .clock-frame {
       height: 106px;
    width: 70px;
    padding-top: 37px;
    top: 42px;
    right: 16%;
    }
   .analog-clock {
    background-size: 79%;
    width: 60px;
    height: 60px;
}
    .main-banner .intro-bio h1.mani-bio {
    font-size: 3.5rem;
    line-height: 54px;
        margin-bottom: 0;
}
    .Kasturba-profile img{
        margin-bottom: 20px;
    }
    footer h4.sub-header{
        font-size:26px;
    }
    section.about-mani-bhavan:before{
        height: 190px;
        top: 0;
    }
    .video-grid h4{
        min-height: auto;
        padding-left:0;
    }
    .navbar{
        padding-left: 10px;
    }
    .biography-listing {
    margin-top: 70px;
    clear: both;
}
    .inner-wrapper{
        overflow-x: hidden;
        padding: 40px 0;
    }
     div#collapsibleNavbar.show-nav {
    right: 0;
}
    li.nav-item.dropdown .nav-link{
        position: relative;
    }
    li.nav-item.dropdown.rotate-arrow .nav-link:before {
    transform: rotate(-180deg);
        transition: 0.3s ease-in-out;
}
    li.nav-item.dropdown .nav-link:before {
    position: absolute;
    content: '\f078';
         transition: 0.3s ease-in-out;
    right: 10px;
    font-family: fontawesome;

}
    .home .navbar-light .navbar-nav .nav-link{
            border-bottom: 1px dashed #f08801;
        font-size: 15px;
    }
    div#collapsibleNavbar {
        display: block;
    position: fixed;
    top: 0;
    padding-top: 54px;
    right: -100%;
    background: #fff;
    height: 100vh;
    overflow-y: auto;
    box-shadow: 0px 8px 8px #1d1d1d;
    width: 90%;
       transition: 0.3s ease-in-out;
}
   
    .philosophy-grid{
        padding: 1.875rem 15px;
    }
    .desktop-menu{
        display: block;
    }
    header .mobile-menu {
        display: block;
    }
    
    .gallery-bio li figure img{
        width:100%;
    }
    .gandhi-pedia-list{
        padding-top: 20px;
    }
    .overlay-bg {
    position: fixed;
    background: rgba(0, 0, 0, 0.68);
    height: 100%;
    width: 100%;
    left: 0;
    z-index: 99;
}
    .philosophy-grid h4{
        margin-bottom: 20px;
    }
    .home nav{
        padding: 22px 0;
    }
    
    .home #nav-icon4{
        top:11px;
    }
    .gandhi-pedia .gandhi-pedia-list-bio{
        padding-top: 30px;
    }
    .info-menu.megamenu{
        left: 0;
        width: 100%;
    }
    .navbar-nav>li>.dropdown-menu{
        display: none;
        opacity: 1;
        visibility: visible;
        width: 100%;
        transform: translateY(0);
        transition: display 0.3s ease-in-out;
        border: none;
    }
    .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: #f08801;
}
    header{
        margin-bottom: 54px;
    }
    li.nav-item.dropdown .nav-link{
        font-size: 14px;
    color: #f08801;
    padding: .8rem 0;
            border-bottom: 1px dashed #f08801;
    }
    .inner-wrapper .bio figure {
    float: none;
    padding-right: 0;
}
    .navbar-brand img {
    width: 63px;
}
    #nav-icon4{
        position: fixed;
        right: 14px;
        top:16px;
    }
    .gandhi-pedia .carousel-inner{
        margin: auto;
    }
    .quiz-answer-list{
        overflow: hidden;
    }
    .quiz-answer-list li{
        margin-left: 15px;
        width: 100%;
    }

    ul.philosophy-swadeshi-list li{
        margin-left: 0;
    }
    .event-listing ul li span{
        font-size: 14px;
        width: 100%;
        text-align: left;
        margin-top: 8px;
    }
    #indian-leader figure img{
        width: auto;
        margin-bottom: 20px;
        float: left;
    }
    a.moreless-button{
        padding: 5px 9px;
    }
    .gandhi-pedia-list li{
        font-family: 'Roboto-Regular';
    }
    .event-listing .event-header{
        width: 100%;
    }
    section.about-mani-bhavan h1{
        margin: 240px 0 40px;
        font-size: 65px;
    }
    section.about-mani-bhavan h1 span{
        float:none;
        width:auto;
    }
    footer h4{
        font-size: 18px;
    font-family: 'Roboto-Bold';

    }
    .global-leader-bio h3 .arrow:after{
        width: 30px;
        height: 30px;
        line-height: 28px;
        right: 0;
        bottom: 0px;
    }
    .global-leader-bio h3{
        font-size: 15px;
        padding-left: 0;
        padding-right: 30px;
    }
     .row.infographics-grid:nth-of-type(2n+1) .chrolonogy-graph{
        width: 80%;
    }
    .infographics-grid .number:before{
        position: absolute;
        content: "";
        background: red;
        height:72px;
        width:72px;
        left: 0;
        top: -8px;
        display: block !important;
        background: transparent !important;
        border-right: 2px solid #9c1010;
        border-radius: 50%;
    }
    .row.infographics-grid:nth-child(2n) .number::before{
        top:-6px;
    }
    .img-gallery-grid {
        margin: 0 0 46px;
    }
    
    .navbar .container{
        max-width: 100%;
    }
    .number::before{
        display: none;
    }
    .row.infographics-grid:nth-child(2n) .chrolonogy-graph{
        left: 0;
        padding-top: 0;
    }
    .row.infographics-grid:nth-of-type(2n+1) .chrolonogy-graph{
        left: 0;
    }
    .chrolonogy-graph{
        width:80%;
        float: right;
    }
    .row.infographics-grid:nth-child(2n) .number{
        float: left;
    }
    .row.infographics-grid:last-child .number::after{
        display: none;
    }
    .infographics-grid .number{
        float: left;
    }
    .infographics-grid .number{
        top:42px;
    }
    .row.infographics-grid:nth-child(2n) .date, .row.infographics-grid:nth-child(2n) h4{
        padding-left: 0;
    }
    .row.infographics-grid:nth-child(2n) .date::after{
        left: 0;
    }
    .main-title{
        font-size:48px;
        text-align: center;
    }
    .nav-tabs .nav-link{
        font-size: 1.4rem;
    }
    .all-rights{
        padding-bottom: 20px;
        padding-left: 0;
        text-align: left;
    }
    .global-leader-dott figure img {
    width: 38%;
    margin-bottom: 20px;
        float: left;
}
    .activity{
        font-family: 'Roboto-Regular';
    }
    
    
    .main-banner .intro-bio{
        bottom: 100px;
    width: 100%;
    left: 0;
    text-align: center;
        top: auto;
    }
    .aboutMobile {
    
        width: 90%;
        margin: auto;
    margin-bottom: 34px;
}
    .main-banner .intro-bio h1.mani-bio span{
        float:none;
        width:auto;
    }
    .main-banner .intro-bio .gandhi-tagline {
    font-size: 2rem;
        line-height: 21px;
}
.info-menu.megamenu{
    position: static !important;
}
    h4.quote span.name{
            width: 100%;
    margin-left: 0;
    display: inline-block;
    }
    .about-profile{
        background-size: cover;
        padding:0 0 154px;
    }
    .about-bio .gandhi-intro{
        text-align: center;
        margin-top: 40px;
    font-size: 65px;
    width: 100%;
    float: left;
   
        
    }
    .aboutMobile h4 {
    font-size: 16px;
    color: #333;
    line-height: 23px;
    padding: 15px 15px 0;
}
    .profile-text .read-more{
        font-size: 1.125rem;
    }
    #top-image .gandhi-profile-photo{
       
        left: 0;
        top:40px;
        position: relative;
        width: 100%;
    }
    #top-image .gandhi-profile-photo img{
        width: 236px;
        margin:auto;
        display: block;
    }
    
    h4.quote br{
        display: none;
    }
    .about-mani-bhavan .bio{
        margin-top: 40px;
    }
    section.gandhi-pedia{
        padding: 3.75rem 0 0;
    }
    .biography-list{
        margin-top: 60px;
        margin-bottom: 60px;
    }
    .main-banner .intro-bio h1.mani-bio{
        font-size: 50px;
    }
    .main-banner .intro-bio .gandhi-tagline{
        font-size: 30px;
    }
}
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { 
         .main-banner {
             height:76vh;
}
}
@media(max-width: 748px){
    .family-member::before {
        width: 78%;
    }
}
@media(max-width: 746px){
    .family-profile h4 a{
        padding: 8px 8px;
        font-size: 12px;
    }
}

@media(min-width: 596px) and (max-width: 705px){
    .profile-text {
        margin-top: -0.6rem;
        font-size: 13px;
    }
}
@media(max-width: 710px){
     .family-profile h4 a{
        font-size: 10px
    }
    .family-member::before {
        width: 79%;
    }
}
@media(max-width: 640px){
    .bio-header h3{
        font-size: 20px;
    }
    
    .biography-listing a{
        font-size: 20px;
    }
    
    .inner-wrapper .bio figure img{
        width: 100%;
        margin-bottom: 24px;
    }
    
    
    .top-banner h1 span{
        font-size: 1.2rem;
    }
    .gallery-bio li{
        margin: .8rem .8rem;
    }
    footer h5{
        padding-left: 26px;
        margin-bottom: 4px;    
    }

    footer ul.links li{
        padding-left: 26px;
        padding-bottom: 0;
    }
    .gandhi-sec-bio h4{
        letter-spacing: 18px;
    }
    
    .row.chronology-grid-details-list .number{
        width: 100%;
        float: left;
        text-align: left;
        font-size: 28px;
        padding-left: 0;
    }
    .row.chronology-grid-details-list .number::before {
        position: absolute;
        height: 2px;
        background: #ccc;
        top: 40px;
        content: "";
        width: 60px;
        left: 0;
    }
    .row.chronology-grid-details-list{
        margin-right: 0;
        padding-left: 15px;
    }
    .row.chronology-grid-details-list p{
        width: 100%;
        display: block;
    }
   
    .event-listing{
        margin:90px 0;
    }
    .event-listing li{
        float: left;
    }
    .inner-wrapper{
        float: left;
        width: 100%;
    }
    
    
    .contact-grid li .dsgn {
        float: right;
        width: 100%;
        text-align: left;
        margin-bottom: 12px;
    }
}
@media(max-width: 595px){
    .profile-text{
        margin-top: 0;
    }
}
@media(min-width: 550px) and (max-width: 631px){
    #top-image .about-bio h4 {
        font-size: 14px;
    }
}
@media(max-width: 578px){
   
    .family-member::before {
    width: 77%;
}
.gallerylist-grid figure{
    height: auto;
    overflow: visible;
}
.gallerylist-grid .gallery-main-thumb{
    width: 100%;
}
}


@media(max-width: 575px){
    #top-image .about-bio h4{
        margin-top: 10rem;
        color: #333;
    }
    .container{
        max-width: 100%;
    }
    .top-banner h1{
        font-size: 1.6rem;
        padding: 15px;
    }
    
    .aboutMobile h4{
        padding:0;
    }
    .family-profile::before {
    position: absolute;
    content: "";
    background: #ccc;
    width: 60px;
    height: 1px;
    top: 50%;
    left: 57px;
    right:auto;
    transform: translateY(-50%);

}
    .contact-container {
    width: 100%;
}
ul.sub-link li{
    width: 100%;
}

.family-profile:after{
    position: absolute;
content: "";
border-left: 9px solid
black;
border-top: 6px solid
transparent;
border-bottom: 6px solid
transparent;
top: 47%;
left: 117px;
right: 0;
margin: initial;
width: 11px;
}
.family-member::after {

    position: absolute;
    content: "";
    background: 

    #ccc;
    width: 1px;
    height: 108%;
    left: 57px;
    padding: 0;
    border: none;
    float: left;
    margin: inherit;
    top:-43px;
    border:none;

}
.family-profile{
    padding-top: 0;
}
.family-profile h4 a{
    font-size: 13px;
    padding: 8px 17px;
}
.chrolonogy-graph .date{
    font-size: 26px;
}
.chrolonogy-graph h4{
    font-size: 19px;
    height: 1.2em;
}
.infographics-grid .number{
    width: 46px;
    height: 46px;
    line-height: 46px;
    font-size: 21px;
}
.chrolonogy-graph h4 a span::before{
    font-size: 18px;
}
.chrolonogy-graph .date::before, .row.infographics-grid:nth-child(2n) .date::after{
    top: 2rem;
}
.row.infographics-grid:nth-child(2n) .number::before {
    top: -6px;
    width: 58px;
    height: 58px;
}
.infographics-grid .number::before{
    top: -6px;
    width: 58px;
    height: 58px;
}
.row.infographics-grid:nth-child(2n) {
    margin-bottom: 30px;
}

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

    .img-gallery-grid .header{
        font-size: .9rem;
    }
    
    

}
@media (max-width: 566px){
    
.family-member::before {

    width: 76%;

}
}
@media (max-width: 534px){
    
.family-member::before {

    width: 75%;

}
}
@media only screen and (max-width: 520px){
    .gandhi-sec-bio h4{
        letter-spacing: 8px;
        text-transform: uppercase;
        
        color: #211921;
        margin-top: 54px;
        padding-left: 20px;
        font-size: 19px;
    }
    .nav-tabs .nav-link{
        font-size: 18px;
    }
    
    .nav-tabs .nav-item{
        width: 50%;
    }
    
    footer h4{
        font-size: 16px;
    font-family: 'Roboto-Bold';

    }
    .gallery-grid .header {
        font-size: 1rem;
    }
    .main-title img {
        width: 17rem;
    }
    .about-mani-bhavan .bio{
        padding: 0 0;
        margin-top: 0;
    }
    section.about-mani-bhavan{
        min-height: auto;
    }
    .img-gallery-grid .header{
        font-size: 1rem;
    }
    
    section.gandhi-pedia {
        padding: 0 0;
    }
    section.gandhi-pedia::before{
        top: 40px;
    }
    .biography-list{
        max-width: 100%;
    }
    .governing-body table td{
        font-size: 11px;
    }
    
    .biography-listing {
        margin-top: 0;
    }
    
    
    
}
@media (max-width: 512px){
    
.family-member::before {

    width: 74%;

}
}
@media (max-width: 492px){
    
.family-member::before {

    width: 72%;

}
}
@media(max-width: 484px){
    #top-image .about-bio h4 {
        margin-top: 7rem;
    }
}
@media(max-width: 480px){
    
    .sub-container{
        overflow: hidden;
        width: 100%;
    }
    .gallerylist-grid .more-details h5{
        font-size: 1rem;
    }
    footer ul.links li{
        padding-left: 26px;
    }

    
    .home .navbar-brand{
        bottom: -92px;
    }
    .home .navbar-brand img {
        width: 60%;
    }
    
    button.btn-1.more-view{
        padding: 5px 22px;
        font-size: 18px;
    }

    .contact-grid li span{
        width: 100%;
        display: inline-block;
    }
    .contact-grid li .details{
        display: inline-block;
        margin-bottom: 10px;
        padding-left: 0px;
    }

}
@media(max-width: 472px){
    .family-member::before {
    width: 74%;
}
}
@media(max-width: 430px){
    #top-image .about-bio h4 {
    margin-top: 5rem;
}
@media (max-width: 423px){
    .family-profile::before {
        width: 36px;
    }
    .family-profile::after{
        left: 88px;
    }
}

@media(max-width: 410px){
    .tree-diagram .main-name::before{
        top: 5.8rem;
    }
    

.chrolonogy-graph .date {
    font-size: 23px;
}
.infographics-grid .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
}
.infographics-grid .number::before {
    top: -4px;
    width: 48px;
    height: 48px;
}
.row.infographics-grid:nth-child(2n) .number::before {
    top: -4px;
    width: 48px;
    height: 48px;
}
.chrolonogy-graph .date::before, .row.infographics-grid:nth-child(2n) .date::after{
    top: 32px;
width: 8px;
height: 8px;
}
.infographics-grid .number{
    top:34px;
}
.row.infographics-grid:nth-child(2n) .number{
    top:54px;
}
}
@media(max-width: 394px){

    .philosophy-grid h4{
        font-size: 20px;
    }
    
    .philosophy-grid.gandhi-img-philosophy .bio h5 {
        font-family: 'Roboto-Light';
        padding: 0 22px;
        margin-bottom: 40px;
        font-size: 20px;
    }
    
}

@media(max-width: 348px){
    .philosophy-grid h4{
        font-size: 16px;
    }
    
    .bio figure img {
        width: 100%;
    }

    .family-profile::before {
        width: 36px;
    }
    .family-profile::after{
        left: 88px;
    }
}
@media(max-width: 325px){
    .gallerylist-grid .more-details h5{
        font-size: 0.8rem;
    }

    footer ul.links li{
        padding-left: 0;
    }
    .family-profile::before {
        width: 26px;
    }
    .family-profile::after {
        left: 80px;
    }
}