@media (min-width:768px) /*In this CSS code,
    we are targeting screens with a minimum width of 768px.
    If the screen is more than or equal to 768px wide,
    the body code will run.*/
{

    /* START CODE IS FOR SIDE BY SIDE DIVS */
    /* code to adjust <div> margin START */



    #divmarginadjustabt {
        /*border:solid red 1px;*/
        width: 130%;
        margin-right: 5px;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }

    #divmarginadjust2abt {
        /*border:solid red 1px;*/

        width: 70%;
        margin-left: 30%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }

    #divmarginadjust3abt {
        /*border:solid red 1px;*/

        width: 70%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }

    #divmarginadjust4abt {
        /* border:solid red 1px;*/
        width: 130%;
        margin-left: -30%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }



    #divmarginadjust5abt {
        /*border:solid red 1px;*/

        width: 100%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }

    #divmarginadjust6abt {
        /* border:solid red 1px;*/
        width: 100%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }

    #divmarginadjust7abt {
        /*border:solid red 1px;*/

        width: 100%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }

    #divmarginadjust8abt {
        /*border:solid red 1px;*/
        width: 100%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }

    #divmarginadjust9abt {
        /*border:solid red 1px;*/

        width: 100%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }


    #divmarginadjust10abt {
        /*border:solid red 1px;*/

        width: 95%;
        margin-top: 20px;
        margin-right: 5%;
        /*border: 1px solid red;*/
    }

    #divmarginadjust11abt {
        /*border:solid red 1px;*/

        width: 95%;
        margin-top: 20px;
        margin-left: 5%;
        /*border: 1px solid red;*/
    }

    #divmarginadjust12abt {
        /*border:solid red 1px;*/
        width: 130%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }

    #divmarginadjust13abt {
        /*border:solid red 1px;*/

        width: 70%;
        margin-left: 30%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }





    /*Code to allign image control in the centre of Div. and needs to call this function in Image control as "class="center""  START*/
    .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
    }
    /*Code to allign image control in the centre of Div. and needs to call this function in Image control as "class="center"" END*/






    /*Code for multiple column layout (take multiple divs side by side) and needs to call this function in div as "class="responsive-two-column-grid"" START*/




    .responsive-two-column-grid-abt {
        display: block;
    }

        /* columns */
        .responsive-two-column-grid-abt > * {
            padding: 1rem;
        }

    #head1 {
        margin-left: 10px;
    }


    /* tablet breakpoint */



    .responsive-two-column-grid-abt {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }








    .responsive-six-column-grid-abt {
        display: block;
    }
        /* columns */
        .responsive-six-column-grid-abt > * {
            padding: 0.1rem;
        }






    /* tablet breakpoint */



    .responsive-six-column-grid-abt {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }




    .responsive-more-two-column-grid-abt {
        display: block;
    }
        /* columns */
        .responsive-more-two-column-grid-abt > * {
            padding: 0.1rem;
        }






    /* tablet breakpoint */



    .responsive-more-two-column-grid-abt {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* END END CODE IS FOR SIDE BY SIDE DIVS */



    .responsive-next-two-column-grid-abt {
        display: block;
    }
        /* columns */
        .responsive-next-two-column-grid-abt > * {
            padding: 0.1rem;
        }






    /* tablet breakpoint */



    .responsive-next-two-column-grid-abt {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    /* END END CODE IS FOR SIDE BY SIDE DIVS */




    /* START START CODE IS FOR ANIMATION PARAGRAPH TEXTS */
    .my-element1 {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

        /* Add a class to the element to trigger the animation */
        .my-element1.show1 {
            opacity: 1;
            transform: translateY(0);
            position: relative;
            animation: MyDiv1 0s 5s forwards;
            animation-duration: 0.5s;
            animation-iteration-count: 2;
            animation-timing-function: ease-in;
            animation-direction: alternate;
            float: right;
            animation-delay: 0.2s;
            visibility: hidden;
        }

    @keyframes MyDiv1 {


        0% {
            left: 0px;
            top: 0px;
            visibility: visible;
        }

        100% {
            left: 10px;
            top: 0px;
            visibility: visible;
        }

        to {
            visibility: visible;
        }
    }
    /* my-Element1 END END END END */

    /* Set initial styling for the element */
    .my-element2 {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

        /* Add a class to the element to trigger the animation */
        .my-element2.show2 {
            opacity: 1;
            transform: translateY(0);
            position: relative;
            animation: MyDiv2 0s 5s forwards;
            animation-duration: 0.5s;
            animation-iteration-count: 2;
            animation-timing-function: ease-in;
            animation-direction: alternate;
            float: right;
            animation-delay: 0.2s;
            visibility: hidden;
        }

    @keyframes MyDiv2 {


        0% {
            right: 0px;
            top: 0px;
            visibility: visible;
        }

        100% {
            right: 10px;
            top: 0px;
            visibility: visible;
        }

        to {
            visibility: visible;
        }
    }
    /* my-Element2 END END END END */


    /* my-Element3 START START START */


    .my-element101 {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

        /* Add a class to the element to trigger the animation */
        .my-element101.show101 {
            opacity: 1;
            transform: translateY(0);
            position: relative;
            animation: MyDiv101 0s 5s forwards;
            animation-duration: 0.5s;
            animation-iteration-count: 2;
            animation-timing-function: ease-in;
            animation-direction: alternate;
            float: right;
            animation-delay: 0.2s;
            visibility: hidden;
        }

    @keyframes MyDiv101 {


        0% {
            left: 0px;
            top: 0px;
            visibility: visible;
        }

        100% {
            left: 10px;
            top: 0px;
            visibility: visible;
        }

        to {
            visibility: visible;
        }
    }
    /* my-Element3 END END END END */



    /* my-Element4 START START START */


    .my-element102 {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

        /* Add a class to the element to trigger the animation */
        .my-element102.show102 {
            opacity: 1;
            transform: translateY(0);
            position: relative;
            animation: MyDiv102 0s 5s forwards;
            animation-duration: 0.5s;
            animation-iteration-count: 2;
            animation-timing-function: ease-in;
            animation-direction: alternate;
            float: right;
            animation-delay: 0.2s;
            visibility: hidden;
        }

    @keyframes MyDiv102 {


        0% {
            right: 0px;
            top: 0px;
            visibility: visible;
        }

        100% {
            right: 10px;
            top: 0px;
            visibility: visible;
        }

        to {
            visibility: visible;
        }
    }
    /* my-Element4 END END END END */

    /* my-Element 5 START START START */


    .my-element26 {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

        /* Add a class to the element to trigger the animation */
        .my-element26.show26 {
            opacity: 1;
            transform: translateY(0);
            position: relative;
            animation: MyDiv26 0s 5s forwards;
            animation-duration: 0.5s;
            animation-iteration-count: 2;
            animation-timing-function: ease-in;
            animation-direction: alternate;
            float: right;
            animation-delay: 0.2s;
            visibility: hidden;
        }

    @keyframes MyDiv26 {


        0% {
            left: 0px;
            top: 0px;
            visibility: visible;
        }

        100% {
            left: 10px;
            top: 0px;
            visibility: visible;
        }

        to {
            visibility: visible;
        }
    }
    /* my-Element5 END END END END */


    /* END END CODE IS FOR ANIMATION PARAGRAPH TEXTS */

    /* START CODE IS FOR FADE IN IMAGE TRANSITION */
    .fade-in-image {
        opacity: 0;
    }

        .fade-in-image.show {
            animation: fadeIn 3s forwards;
            -webkit-animation: fadeIn 3s forwards;
            -moz-animation: fadeIn 3s forwards;
            -o-animation: fadeIn 3s forwards;
            -ms-animation: fadeIn 3s forwards;
        }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-moz-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-o-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-ms-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }



    /* END CODE IS FOR FADE IN IMAGE TRANSITION */






    /* START CODE IS FOR 2nd FADE IN IMAGE TRANSITION */
    .fade-in-image2 {
        opacity: 0;
    }

        .fade-in-image2.show {
            animation: fadeIn 3s forwards;
            -webkit-animation: fadeIn 3s forwards;
            -moz-animation: fadeIn 3s forwards;
            -o-animation: fadeIn 3s forwards;
            -ms-animation: fadeIn 3s forwards;
        }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-moz-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-o-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-ms-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }



    /* END CODE IS FOR 2nd FADE IN IMAGE TRANSITION */

    /* START CODE IS FOR  3rd FADE IN IMAGE TRANSITION */
    .fade-in-image3 {
        opacity: 0;
    }

        .fade-in-image3.show {
            animation: fadeIn 3s forwards;
            -webkit-animation: fadeIn 3s forwards;
            -moz-animation: fadeIn 3s forwards;
            -o-animation: fadeIn 3s forwards;
            -ms-animation: fadeIn 3s forwards;
        }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-moz-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-o-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-ms-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }



    /* END CODE IS FOR 3rd FADE IN IMAGE TRANSITION */

    /* START CODE IS FOR  4 FADE IN IMAGE TRANSITION */
    .fade-in-image4 {
        opacity: 0;
    }

        .fade-in-image4.show {
            animation: fadeIn 3s forwards;
            -webkit-animation: fadeIn 3s forwards;
            -moz-animation: fadeIn 3s forwards;
            -o-animation: fadeIn 3s forwards;
            -ms-animation: fadeIn 3s forwards;
        }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-moz-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-o-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-ms-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }



    /* END CODE IS FOR 4 FADE IN IMAGE TRANSITION */

    /* START CODE IS FOR  5 FADE IN IMAGE TRANSITION */
    .fade-in-image5 {
        opacity: 0;
    }

        .fade-in-image5.show {
            animation: fadeIn 3s forwards;
            -webkit-animation: fadeIn 3s forwards;
            -moz-animation: fadeIn 3s forwards;
            -o-animation: fadeIn 3s forwards;
            -ms-animation: fadeIn 3s forwards;
        }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-moz-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-o-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-ms-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }



    /* END CODE IS FOR 5 FADE IN IMAGE TRANSITION */

    /* START CODE IS FOR  6 FADE IN IMAGE TRANSITION */
    .fade-in-image6 {
        opacity: 0;
    }

        .fade-in-image6.show {
            animation: fadeIn 3s forwards;
            -webkit-animation: fadeIn 3s forwards;
            -moz-animation: fadeIn 3s forwards;
            -o-animation: fadeIn 3s forwards;
            -ms-animation: fadeIn 3s forwards;
        }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-moz-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-o-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-ms-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }



    /* END CODE IS FOR 6 FADE IN IMAGE TRANSITION */

    /* START CODE IS FOR  7 FADE IN IMAGE TRANSITION */
    .fade-in-image7 {
        opacity: 0;
    }

        .fade-in-image7.show {
            animation: fadeIn 3s forwards;
            -webkit-animation: fadeIn 3s forwards;
            -moz-animation: fadeIn 3s forwards;
            -o-animation: fadeIn 3s forwards;
            -ms-animation: fadeIn 3s forwards;
        }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-moz-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-o-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-ms-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }



    /* END CODE IS FOR 7 FADE IN IMAGE TRANSITION */


    /* START CODE IS FOR ROLL FROM RIGHT IMAGE REVEAL ANIMATION 1 */

    .figure {
    }

        .figure.show3 {
            margin: 0;
            padding: 0;
            place-items: center;
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            animation: rollFromLeft 1s ease-in-out forwards;
        }

    @keyframes rollFromLeft {
        from {
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        }

        to {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }



    .pic {
        width: 100%;
        height: auto;
        object-fit: contain;
        transform: scale(1.5);
        animation: sacleDown 1s ease-in-out forwards;
    }

    @keyframes sacleDown {
        from {
            transform: scale(1.5);
        }

        to {
            transform: scale(1);
        }
    }

    figcaption {
        text-align: center;
        opacity: 0;
        display: inline;
        font-family: monospace;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        animation: rollFromRight 1s ease-in-out 0.7s forwards;
    }

    @keyframes rollFromRight {
        from {
            opacity: 1;
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        }

        to {
            opacity: 1;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }

    /* END CODE IS FOR ROLL FROM RIGHT IMAGE REVEAL ANIMATION 1 */




    /* START CODE IS FOR ROLL FROM RIGHT IMAGE REVEAL ANIMATION 1 */

    .figure {
    }

        .figure.show3 {
            margin: 0;
            padding: 0;
            place-items: center;
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            animation: rollFromLeft 1s ease-in-out forwards;
        }

    @keyframes rollFromLeft {
        from {
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        }

        to {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }



    .pic {
        width: 100%;
        height: auto;
        object-fit: contain;
        transform: scale(1.5);
        animation: sacleDown 1s ease-in-out forwards;
    }

    @keyframes sacleDown {
        from {
            transform: scale(1.5);
        }

        to {
            transform: scale(1);
        }
    }

    figcaption {
        text-align: center;
        opacity: 0;
        display: inline;
        font-family: monospace;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        animation: rollFromRight 1s ease-in-out 0.7s forwards;
    }

    @keyframes rollFromRight {
        from {
            opacity: 1;
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        }

        to {
            opacity: 1;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }

    /* END CODE IS FOR ROLL FROM RIGHT IMAGE REVEAL ANIMATION 1  */

    /* START CODE IS FOR ROLL FROM RIGHT IMAGE REVEAL ANIMATION 2 */

    .figure1 {
    }

        .figure1.show4 {
            margin: 0;
            padding: 0;
            place-items: center;
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            animation: rollFromLeft 1s ease-in-out forwards;
        }

    @keyframes rollFromLeft {
        from {
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        }

        to {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }



    .pic {
        width: 100%;
        height: auto;
        object-fit: contain;
        transform: scale(1.5);
        animation: sacleDown 1s ease-in-out forwards;
    }

    @keyframes sacleDown {
        from {
            transform: scale(1.5);
        }

        to {
            transform: scale(1);
        }
    }

    figcaption {
        text-align: center;
        opacity: 0;
        display: inline;
        font-family: monospace;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        animation: rollFromRight 1s ease-in-out 0.7s forwards;
    }

    @keyframes rollFromRight {
        from {
            opacity: 1;
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        }

        to {
            opacity: 1;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }

    /* END CODE IS FOR ROLL FROM RIGHT IMAGE REVEAL ANIMATION 2  */



    /* START CODE IS FOR ROLL FROM RIGHT IMAGE REVEAL ANIMATION 3 */

    .figure2 {
    }

        .figure2.show5 {
            margin: 0;
            padding: 0;
            place-items: center;
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            animation: rollFromLeft 1s ease-in-out forwards;
        }

    @keyframes rollFromLeft {
        from {
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        }

        to {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }



    .pic {
        width: 100%;
        height: auto;
        object-fit: contain;
        transform: scale(1.5);
        animation: sacleDown 1s ease-in-out forwards;
    }

    @keyframes sacleDown {
        from {
            transform: scale(1.5);
        }

        to {
            transform: scale(1);
        }
    }

    figcaption {
        text-align: center;
        opacity: 0;
        display: inline;
        font-family: monospace;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        animation: rollFromRight 1s ease-in-out 0.7s forwards;
    }

    @keyframes rollFromRight {
        from {
            opacity: 1;
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        }

        to {
            opacity: 1;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }

    /* END CODE IS FOR ROLL FROM RIGHT IMAGE REVEAL ANIMATION 3  */


    /* START CODE IS FOR ROLL FROM RIGHT IMAGE REVEAL ANIMATION 4 */

    .figure3 {
    }

        .figure3.show6 {
            margin: 0;
            padding: 0;
            place-items: center;
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            animation: rollFromLeft 1s ease-in-out forwards;
        }

    @keyframes rollFromLeft {
        from {
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        }

        to {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }



    .pic {
        width: 100%;
        height: auto;
        object-fit: contain;
        transform: scale(1.5);
        animation: sacleDown 1s ease-in-out forwards;
    }

    @keyframes sacleDown {
        from {
            transform: scale(1.5);
        }

        to {
            transform: scale(1);
        }
    }

    figcaption {
        text-align: center;
        opacity: 0;
        display: inline;
        font-family: monospace;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        animation: rollFromRight 1s ease-in-out 0.7s forwards;
    }

    @keyframes rollFromRight {
        from {
            opacity: 1;
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        }

        to {
            opacity: 1;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }

    /* END CODE IS FOR ROLL FROM RIGHT IMAGE REVEAL ANIMATION 4  */


    /* START CODE IS FOR ROLL FROM RIGHT IMAGE REVEAL ANIMATION 5 */

    .figure4 {
    }

        .figure4.show7 {
            margin: 0;
            padding: 0;
            place-items: center;
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            animation: rollFromLeft 1s ease-in-out forwards;
        }

    @keyframes rollFromLeft {
        from {
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        }

        to {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }



    .pic {
        width: 100%;
        height: auto;
        object-fit: contain;
        transform: scale(1.5);
        animation: sacleDown 1s ease-in-out forwards;
    }

    @keyframes sacleDown {
        from {
            transform: scale(1.5);
        }

        to {
            transform: scale(1);
        }
    }

    figcaption {
        text-align: center;
        opacity: 0;
        display: inline;
        font-family: monospace;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        animation: rollFromRight 1s ease-in-out 0.7s forwards;
    }

    @keyframes rollFromRight {
        from {
            opacity: 1;
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        }

        to {
            opacity: 1;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }

    /* END CODE IS FOR ROLL FROM RIGHT IMAGE REVEAL ANIMATION 5  */




}

@media (max-width: 768px) /*In this CSS code,
    we are targeting screens with a maximum width of 768px.
    If the screen is less than or equal to 768px wide,
    the body code will run.-------------------------
    ---------------------------------------------------------
    ---------------------------------------------------------------------------------------------------------------
       ---------------------------------------------------------------------------------------------------------------
       ---------------------------------------------------------------------------------------------------------------
       ---------------------------------------------------------------------------------------------------------------
       ---------------------------------------------------------------------------------------------------------------
       ---------------------------------------------------------------------------------------------------------------
       ---------------------------------------------------------------------------------------------------------------
       ---------------------------------------------------------------------------------------------------------------
       ---------------------------------------------------------------------------------------------------------------
*/
{

    .responsive-two-column-grid-abt {
        display: grid;
        grid-template-columns: 1fr;
    }

    .responsive-six-column-grid-abt {
        display: grid;
        grid-template-columns: 1fr;
    }


    .responsive-more-two-column-grid-abt {
        display: grid;
        grid-template-columns: 1fr;
    }


    .responsive-next-two-column-grid-abt {
        display: grid;
        grid-template-columns: 1fr;
    }


    /* code to adjust <div> margin START */



    #divmarginadjustabt {
        /*border:solid red 1px;*/
        width: 100%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }

    #divmarginadjust2abt {
        /*border:solid red 1px;*/

        width: 100%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }




    #divmarginadjust3abt {
        /*border:solid red 1px;*/
        width: 100%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }

    #divmarginadjust4abt {
        /*border:solid red 1px;*/

        width: 100%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }

    #divmarginadjust5abt {
        /*border:solid red 1px;*/

        width: 100%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }

    #divmarginadjust6abt {
        /*border:solid red 1px;*/
        width: 100%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }

    #divmarginadjust7abt {
        /*border:solid red 1px;*/

        width: 100%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }

    #divmarginadjust8abt {
        /*border:solid red 1px;*/
        width: 100%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }

    #divmarginadjust9abt {
        /*border:solid red 1px;*/

        width: 100%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }

    #divmarginadjust10abt {
        /*border:solid red 1px;*/

        width: 100%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }

    #divmarginadjust11abt {
        /*border:solid red 1px;*/

        width: 100%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }

    #divmarginadjust12abt {
        /*border:solid red 1px;*/
        width: 100%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }

    #divmarginadjust13abt {
        /*border:solid red 1px;*/

        width: 100%;
        margin-top: 20px;
        /*border: 1px solid red;*/
    }






    /* START START CODE IS FOR ANIMATION PARAGRAPH TEXTS */
    .my-element1 {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

        /* Add a class to the element to trigger the animation */
        .my-element1.show1 {
            opacity: 1;
            transform: translateY(0);
            position: relative;
            animation: MyDiv1 0s 5s forwards;
            animation-duration: 0.5s;
            animation-iteration-count: 2;
            animation-timing-function: ease-in;
            animation-direction: alternate;
            float: right;
            animation-delay: 0.2s;
            visibility: hidden;
        }

    @keyframes MyDiv1 {


        0% {
            left: 0px;
            top: 0px;
            visibility: visible;
        }

        100% {
            left: 10px;
            top: 0px;
            visibility: visible;
        }

        to {
            visibility: visible;
        }
    }
    /* my-Element1 END END END END */

    /* Set initial styling for the element */
    .my-element2 {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

        /* Add a class to the element to trigger the animation */
        .my-element2.show2 {
            opacity: 1;
            transform: translateY(0);
            position: relative;
            animation: MyDiv2 0s 5s forwards;
            animation-duration: 0.5s;
            animation-iteration-count: 2;
            animation-timing-function: ease-in;
            animation-direction: alternate;
            float: right;
            animation-delay: 0.2s;
            visibility: hidden;
        }

    @keyframes MyDiv2 {


        0% {
            right: 0px;
            top: 0px;
            visibility: visible;
        }

        100% {
            right: 10px;
            top: 0px;
            visibility: visible;
        }

        to {
            visibility: visible;
        }
    }
    /* my-Element2 END END END END */

    /* my-Element3 START START START */


    .my-element101 {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

        /* Add a class to the element to trigger the animation */
        .my-element101.show101 {
            opacity: 1;
            transform: translateY(0);
            position: relative;
            animation: MyDiv101 0s 5s forwards;
            animation-duration: 0.5s;
            animation-iteration-count: 2;
            animation-timing-function: ease-in;
            animation-direction: alternate;
            float: right;
            animation-delay: 0.2s;
            visibility: hidden;
        }

    @keyframes MyDiv101 {


        0% {
            left: 0px;
            top: 0px;
            visibility: visible;
        }

        100% {
            left: 10px;
            top: 0px;
            visibility: visible;
        }

        to {
            visibility: visible;
        }
    }
    /* my-Element3 END END END END */



    /* my-Element4 START START START */


    .my-element102 {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

        /* Add a class to the element to trigger the animation */
        .my-element102.show102 {
            opacity: 1;
            transform: translateY(0);
            position: relative;
            animation: MyDiv102 0s 5s forwards;
            animation-duration: 0.5s;
            animation-iteration-count: 2;
            animation-timing-function: ease-in;
            animation-direction: alternate;
            float: right;
            animation-delay: 0.2s;
            visibility: hidden;
        }

    @keyframes MyDiv102 {


        0% {
            right: 0px;
            top: 0px;
            visibility: visible;
        }

        100% {
            right: 10px;
            top: 0px;
            visibility: visible;
        }

        to {
            visibility: visible;
        }
    }
    /* my-Element4 END END END END */


    /* my-Element 5 START START START */


    .my-element26 {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

        /* Add a class to the element to trigger the animation */
        .my-element26.show26 {
            opacity: 1;
            transform: translateY(0);
            position: relative;
            animation: MyDiv26 0s 5s forwards;
            animation-duration: 0.5s;
            animation-iteration-count: 2;
            animation-timing-function: ease-in;
            animation-direction: alternate;
            float: right;
            animation-delay: 0.2s;
            visibility: hidden;
        }

    @keyframes MyDiv26 {


        0% {
            left: 0px;
            top: 0px;
            visibility: visible;
        }

        100% {
            left: 10px;
            top: 0px;
            visibility: visible;
        }

        to {
            visibility: visible;
        }
    }
    /* my-Element5 END END END END */


    /* END END CODE IS FOR ANIMATION PARAGRAPH TEXTS */
    /* START CODE IS FOR FADE IN IMAGE TRANSITION */
    .fade-in-image {
        opacity: 0;
    }

        .fade-in-image.show {
            animation: fadeIn 3s forwards;
            -webkit-animation: fadeIn 3s forwards;
            -moz-animation: fadeIn 3s forwards;
            -o-animation: fadeIn 3s forwards;
            -ms-animation: fadeIn 3s forwards;
        }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-moz-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-o-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-ms-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }



    /* END CODE IS FOR FADE IN IMAGE TRANSITION */






    /* START CODE IS FOR 2nd FADE IN IMAGE TRANSITION */
    .fade-in-image2 {
        opacity: 0;
    }

        .fade-in-image2.show {
            animation: fadeIn 3s forwards;
            -webkit-animation: fadeIn 3s forwards;
            -moz-animation: fadeIn 3s forwards;
            -o-animation: fadeIn 3s forwards;
            -ms-animation: fadeIn 3s forwards;
        }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-moz-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-o-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-ms-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }



    /* END CODE IS FOR 2nd FADE IN IMAGE TRANSITION */


    /* START CODE IS FOR  3rd FADE IN IMAGE TRANSITION */
    .fade-in-image3 {
        opacity: 0;
    }

        .fade-in-image3.show {
            animation: fadeIn 3s forwards;
            -webkit-animation: fadeIn 3s forwards;
            -moz-animation: fadeIn 3s forwards;
            -o-animation: fadeIn 3s forwards;
            -ms-animation: fadeIn 3s forwards;
        }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-moz-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-o-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-ms-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }



    /* END CODE IS FOR 3rd FADE IN IMAGE TRANSITION */
    /* START CODE IS FOR  4 FADE IN IMAGE TRANSITION */
    .fade-in-image4 {
        opacity: 0;
    }

        .fade-in-image4.show {
            animation: fadeIn 3s forwards;
            -webkit-animation: fadeIn 3s forwards;
            -moz-animation: fadeIn 3s forwards;
            -o-animation: fadeIn 3s forwards;
            -ms-animation: fadeIn 3s forwards;
        }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-moz-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-o-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-ms-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }



    /* END CODE IS FOR 4 FADE IN IMAGE TRANSITION */

    /* START CODE IS FOR  5 FADE IN IMAGE TRANSITION */
    .fade-in-image5 {
        opacity: 0;
    }

        .fade-in-image5.show {
            animation: fadeIn 3s forwards;
            -webkit-animation: fadeIn 3s forwards;
            -moz-animation: fadeIn 3s forwards;
            -o-animation: fadeIn 3s forwards;
            -ms-animation: fadeIn 3s forwards;
        }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-moz-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-o-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-ms-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }



    /* END CODE IS FOR 5 FADE IN IMAGE TRANSITION */

    /* START CODE IS FOR  6 FADE IN IMAGE TRANSITION */
    .fade-in-image6 {
        opacity: 0;
    }

        .fade-in-image6.show {
            animation: fadeIn 3s forwards;
            -webkit-animation: fadeIn 3s forwards;
            -moz-animation: fadeIn 3s forwards;
            -o-animation: fadeIn 3s forwards;
            -ms-animation: fadeIn 3s forwards;
        }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-moz-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-o-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-ms-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }



    /* END CODE IS FOR 6 FADE IN IMAGE TRANSITION */

    /* START CODE IS FOR  7 FADE IN IMAGE TRANSITION */
    .fade-in-image7 {
        opacity: 0;
    }

        .fade-in-image7.show {
            animation: fadeIn 3s forwards;
            -webkit-animation: fadeIn 3s forwards;
            -moz-animation: fadeIn 3s forwards;
            -o-animation: fadeIn 3s forwards;
            -ms-animation: fadeIn 3s forwards;
        }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-moz-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-o-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-ms-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }



    /* END CODE IS FOR 7 FADE IN IMAGE TRANSITION */


    /* START CODE IS FOR ROLL FROM RIGHT IMAGE REVEAL ANIMATION 1 */

    .figure {
    }

        .figure.show3 {
            margin: 0;
            padding: 0;
            place-items: center;
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            animation: rollFromLeft 1s ease-in-out forwards;
        }

    @keyframes rollFromLeft {
        from {
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        }

        to {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }



    .pic {
        width: 100%;
        height: auto;
        object-fit: contain;
        transform: scale(1.5);
        animation: sacleDown 1s ease-in-out forwards;
    }

    @keyframes sacleDown {
        from {
            transform: scale(1.5);
        }

        to {
            transform: scale(1);
        }
    }

    figcaption {
        text-align: center;
        opacity: 0;
        display: inline;
        font-family: monospace;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        animation: rollFromRight 1s ease-in-out 0.7s forwards;
    }

    @keyframes rollFromRight {
        from {
            opacity: 1;
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        }

        to {
            opacity: 1;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }

    /* END CODE IS FOR ROLL FROM RIGHT IMAGE REVEAL ANIMATION 1  */

    /* START CODE IS FOR ROLL FROM RIGHT IMAGE REVEAL ANIMATION 2 */

    .figure1 {
    }

        .figure1.show4 {
            margin: 0;
            padding: 0;
            place-items: center;
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            animation: rollFromLeft 1s ease-in-out forwards;
        }

    @keyframes rollFromLeft {
        from {
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        }

        to {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }



    .pic {
        width: 100%;
        height: auto;
        object-fit: contain;
        transform: scale(1.5);
        animation: sacleDown 1s ease-in-out forwards;
    }

    @keyframes sacleDown {
        from {
            transform: scale(1.5);
        }

        to {
            transform: scale(1);
        }
    }

    figcaption {
        text-align: center;
        opacity: 0;
        display: inline;
        font-family: monospace;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        animation: rollFromRight 1s ease-in-out 0.7s forwards;
    }

    @keyframes rollFromRight {
        from {
            opacity: 1;
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        }

        to {
            opacity: 1;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }

    /* END CODE IS FOR ROLL FROM RIGHT IMAGE REVEAL ANIMATION 2  */



    /* START CODE IS FOR ROLL FROM RIGHT IMAGE REVEAL ANIMATION 3 */

    .figure2 {
    }

        .figure2.show5 {
            margin: 0;
            padding: 0;
            place-items: center;
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            animation: rollFromLeft 1s ease-in-out forwards;
        }

    @keyframes rollFromLeft {
        from {
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        }

        to {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }



    .pic {
        width: 100%;
        height: auto;
        object-fit: contain;
        transform: scale(1.5);
        animation: sacleDown 1s ease-in-out forwards;
    }

    @keyframes sacleDown {
        from {
            transform: scale(1.5);
        }

        to {
            transform: scale(1);
        }
    }

    figcaption {
        text-align: center;
        opacity: 0;
        display: inline;
        font-family: monospace;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        animation: rollFromRight 1s ease-in-out 0.7s forwards;
    }

    @keyframes rollFromRight {
        from {
            opacity: 1;
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        }

        to {
            opacity: 1;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }

    /* END CODE IS FOR ROLL FROM RIGHT IMAGE REVEAL ANIMATION 3  */


    /* START CODE IS FOR ROLL FROM RIGHT IMAGE REVEAL ANIMATION 4 */

    .figure3 {
    }

        .figure3.show6 {
            margin: 0;
            padding: 0;
            place-items: center;
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            animation: rollFromLeft 1s ease-in-out forwards;
        }

    @keyframes rollFromLeft {
        from {
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        }

        to {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }



    .pic {
        width: 100%;
        height: auto;
        object-fit: contain;
        transform: scale(1.5);
        animation: sacleDown 1s ease-in-out forwards;
    }

    @keyframes sacleDown {
        from {
            transform: scale(1.5);
        }

        to {
            transform: scale(1);
        }
    }

    figcaption {
        text-align: center;
        opacity: 0;
        display: inline;
        font-family: monospace;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        animation: rollFromRight 1s ease-in-out 0.7s forwards;
    }

    @keyframes rollFromRight {
        from {
            opacity: 1;
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        }

        to {
            opacity: 1;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }

    /* END CODE IS FOR ROLL FROM RIGHT IMAGE REVEAL ANIMATION 4  */


    /* START CODE IS FOR ROLL FROM RIGHT IMAGE REVEAL ANIMATION 5 */

    .figure4 {
    }

        .figure4.show7 {
            margin: 0;
            padding: 0;
            place-items: center;
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
            animation: rollFromLeft 1s ease-in-out forwards;
        }

    @keyframes rollFromLeft {
        from {
            clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        }

        to {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }



    .pic {
        width: 100%;
        height: auto;
        object-fit: contain;
        transform: scale(1.5);
        animation: sacleDown 1s ease-in-out forwards;
    }

    @keyframes sacleDown {
        from {
            transform: scale(1.5);
        }

        to {
            transform: scale(1);
        }
    }

    figcaption {
        text-align: center;
        opacity: 0;
        display: inline;
        font-family: monospace;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        animation: rollFromRight 1s ease-in-out 0.7s forwards;
    }

    @keyframes rollFromRight {
        from {
            opacity: 1;
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        }

        to {
            opacity: 1;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }

    /* END CODE IS FOR ROLL FROM RIGHT IMAGE REVEAL ANIMATION 5  */



}








/*Code for TWO column layout (take multiple divs side by side) and needs to call this function in div as "class="responsive-two-column-grid"" START*/



/*Code to reduce space between navigation bar and image slider START*/
#navibar {
    margin-bottom: 0px;
}
/*Code to reduce space between navigation bar and image slider END*/