@font-face {
  font-family: 'BalooThambi2-Bold';
  src: url('../fonts/BalooThambi2-Bold.eot');
  src: url('../fonts/BalooThambi2-Bold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/BalooThambi2-Bold.svg#BalooThambi2-Bold') format('svg'),
       url('../fonts/BalooThambi2-Bold.ttf') format('truetype'),
       url('../fonts/BalooThambi2-Bold.woff') format('woff'),
       url('../fonts/BalooThambi2-Bold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
.img-left{
    position: absolute;
    top: 215%;
    width: 30%;
    left: -10%;
}
.img1{
    position: absolute;
    top: 200%;
    right: 7%;
    width: 30%;
}
.img2{
    position: absolute;
    top: 235%;
    right: -15%;
    width: 34%;
}
.img3{
    position: absolute;
    top: 309%;
    left: -7%;
    width: 25%;
}
.img4{
    position: absolute;
    top: 319%;
    right: -9%;
    width: 20%;
}
.section1-content{
    padding: 0;
}
.section-content {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.section-content-head{
    font-family: 'BalooThambi2-Bold', sans-serif;
    font-size: 38px;
    margin-top: 2rem;
    font-weight: 600;
    color: #705236;
}
.section-content-body{
    font-size: 16px;
    color: #000;
}
.information-section{
    margin-top: 10px;
}

.animatable {

  /* initially hide animatable objects */
  visibility: hidden;
  
  /* initially pause animatable objects their animations */
  -webkit-animation-play-state: paused;   
  -moz-animation-play-state: paused;     
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;   
  animation-play-state: paused; 
}

/* show objects being animated */
.animated {
  visibility: visible;
  
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}

/* CSS Animations (extracted from http://glifo.uiparade.com/) */
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        }   100% {
            opacity: 1;
            -webkit-transform: translateY(0);
        }
    }

    @-moz-keyframes fadeInDown {
        0% {
            opacity: 0;
            -moz-transform: translateY(-20px);
        }

        100% {
            opacity: 1;
            -moz-transform: translateY(0);
        }
    }

    @-o-keyframes fadeInDown {
        0% {
            opacity: 0;
            -o-transform: translateY(-20px);
        }

        100% {
            opacity: 1;
            -o-transform: translateY(0);
        }
    }

    @keyframes fadeInDown {
        0% {
            opacity: 0;
            transform: translateY(-20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }



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

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

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

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }
        60% {
            opacity: 0;
        }
        20% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @-webkit-keyframes bounceInLeft {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-2000px);
        }
        60% {
            -webkit-transform: translateX(20px);
        }

        80% {
            -webkit-transform: translateX(-5px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateX(0);
        }
    }

    @-moz-keyframes bounceInLeft {
        0% {
            opacity: 0;
            -moz-transform: translateX(-2000px);
        }

        60% {
            -moz-transform: translateX(20px);
        }

        80% {
            -moz-transform: translateX(-5px);
        }

        100% {
            opacity: 1;
            -moz-transform: translateX(0);
        }
    }

    @-o-keyframes bounceInLeft {
        0% {
            opacity: 0;
            -o-transform: translateX(-2000px);
        }

        60% {
            opacity: 1;
            -o-transform: translateX(20px);
        }

        80% {
            -o-transform: translateX(-5px);
        }

        100% {
            opacity: 1;
            -o-transform: translateX(0);
        }
    }

    @keyframes bounceInLeft {
        0% {
            opacity: 0;
            transform: translateX(-2000px);
        }

        60% {
            transform: translateX(20px);
        }

        80% {
            transform: translateX(-5px);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }
    @-webkit-keyframes bounceInRight {
        0% {
            opacity: 0;
            -webkit-transform: translateX(2000px);
        }

        60% {
            -webkit-transform: translateX(-20px);
        }

        80% {
            -webkit-transform: translateX(5px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateX(0);
        }
    }

    @-moz-keyframes bounceInRight {
        0% {
            opacity: 0;
            -moz-transform: translateX(2000px);
        }

        60% {
            -moz-transform: translateX(-20px);
        }

        80% {
            -moz-transform: translateX(5px);
        }

        100% {
            opacity: 1;
            -moz-transform: translateX(0);
        }
    }

    @-o-keyframes bounceInRight {
        0% {
            opacity: 0;
            -o-transform: translateX(2000px);
        }

        60% {
            -o-transform: translateX(-20px);
        }

        80% {
            -o-transform: translateX(5px);
        }

        100% {
            opacity: 1;
            -o-transform: translateX(0);
        }
    }

    @keyframes bounceInRight {
        0% {
            opacity: 0;
            transform: translateX(2000px);
        }

        60% {
            transform: translateX(-20px);
        }

        80% {
            transform: translateX(5px);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }
    @-webkit-keyframes fadeInUp {
        0% {
            opacity: 0;
            -webkit-transform: translateY(20px);
            }   100% {
                opacity: 1;
                -webkit-transform: translateY(0);
            }
        }

        @-moz-keyframes fadeInUp {
            0% {
                opacity: 0;
                -moz-transform: translateY(20px);
            }

            100% {
                opacity: 1;
                -moz-transform: translateY(0);
            }
        }

        @-o-keyframes fadeInUp {
            0% {
                opacity: 0;
                -o-transform: translateY(20px);
            }

            100% {
                opacity: 1;
                -o-transform: translateY(0);
            }
        }

        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        @-webkit-keyframes bounceIn {
            0% {
                opacity: 0;
                -webkit-transform: scale(.3);
            }
            50% {
                -webkit-transform: scale(1.05);
            }

            70% {
                -webkit-transform: scale(.9);
            }

            100% {
                opacity: 1;
                -webkit-transform: scale(1);
            }
        }

        @-moz-keyframes bounceIn {
            0% {
                opacity: 0;
                -moz-transform: scale(.3);
            }

            50% {
                -moz-transform: scale(1.05);
            }

            70% {
                -moz-transform: scale(.9);
            }

            100% {
                opacity: 1;
                -moz-transform: scale(1);
            }
        }

        @-o-keyframes bounceIn {
            0% {
                opacity: 0;
                -o-transform: scale(.3);
            }

            50% {
                -o-transform: scale(1.05);
            }

            70% {
                -o-transform: scale(.9);
            }

            100% {
                opacity: 1;
                -o-transform: scale(1);
            }
        }

        @keyframes bounceIn {
            0% {
                opacity: 0;
                transform: scale(.3);
            }

            50% {
                transform: scale(1.05);
            }

            70% {
                transform: scale(.9);
            }

            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
        @-webkit-keyframes moveUp {
            0% {
                opacity: 1;
                -webkit-transform: translateY(40px);
                }   100% {
                    opacity: 1;
                    -webkit-transform: translateY(0);
                }
            }

            @-moz-keyframes moveUp {
                0% {
                    opacity: 1;
                    -moz-transform: translateY(40px);
                }

                100% {
                    opacity: 1;
                    -moz-transform: translateY(0);
                }
            }

            @-o-keyframes moveUp {
                0% {
                    opacity: 1;
                    -o-transform: translateY(40px);
                }

                100% {
                    opacity: 1;
                    -o-transform: translateY(0);
                }
            }

            @keyframes moveUp {
                0% {
                    opacity: 1;
                    transform: translateY(40px);
                }

                100% {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            @-webkit-keyframes fadeBgColor {
                0%{
                    background:none;
                }
                70%{
                    background:none;
                }
                100%{
                    background:#464646;
                }
            }
            @-o-keyframes fadeBgColor {
                0%{
                    background:none;
                }
                70%{
                    background:none;
                }
                100%{
                    background:#464646;
                }
            }
            @keyframes fadeBgColor {
                0%{
                    background:none;
                }
                70%{
                    background:none;
                }
                100%{
                    background:#464646;
                }
            }

            .animated.animationDelay{
                animation-delay:.4s;
                -webkit-animation-delay:.4s;
            }
            .animated.animationDelayMed{
                animation-delay:1.2s;
                -webkit-animation-delay:1.2s;
            }
            .animated.animationDelayLong{
                animation-delay:1.6s;
                -webkit-animation-delay:1.6s;
            }
            .animated.fadeBgColor {
                -webkit-animation-name: fadeBgColor;
                -moz-animation-name: fadeBgColor;
                -o-animation-name: fadeBgColor;
                animation-name: fadeBgColor;
            }
            .animated.bounceIn {
                -webkit-animation-name: bounceIn;
                -moz-animation-name: bounceIn;
                -o-animation-name: bounceIn;
                animation-name: bounceIn;
            }
            .animated.bounceInRight {
                -webkit-animation-name: bounceInRight;
                -moz-animation-name: bounceInRight;
                -o-animation-name: bounceInRight;
                animation-name: bounceInRight;
            }
            .animated.bounceInLeft {
                -webkit-animation-name: bounceInLeft;
                -moz-animation-name: bounceInLeft;
                -o-animation-name: bounceInLeft;
                animation-name: bounceInLeft;
            }
            .animated.fadeIn {
                -webkit-animation-name: fadeIn;
                -moz-animation-name: fadeIn;
                -o-animation-name: fadeIn;
                animation-name: fadeIn;
            }
            .animated.fadeInDown {
                -webkit-animation-name: fadeInDown;
                -moz-animation-name: fadeInDown;
                -o-animation-name: fadeInDown;
                animation-name: fadeInDown;
            }
            .animated.fadeInUp {
                -webkit-animation-name: fadeInUp;
                -moz-animation-name: fadeInUp;
                -o-animation-name: fadeInUp;
                animation-name: fadeInUp;
            }
            .animated.moveUp {
                -webkit-animation-name: moveUp;
                -moz-animation-name: moveUp;
                -o-animation-name: moveUp;
                animation-name: moveUp;
            }
            .common-text{
                font-size: 16px;
                font-weight: 700;
                padding-top: 1rem;
            }
            .icons{
                border-radius: 50%;
                width: 90%;
                box-shadow: -10px -4px 20px -17px #000;
            }
            .padtop{
                padding-top: 100px 0px;
            }
            @media (max-width: 319px){
                .img-left{
                    top: 11%;
                    width: 40%;
                    left: -14%;
                }
                .img1{
                    top: 25%;
                    right: -9%;
                    width: 55%;
                }
                .img2{
                    top: 46%;
                    right: -22%;
                    width: 54%;
                }
                .img3{
                    top: 49%;
                    left: -10%;
                    width: 35%;
                }
                .img4{
                    top: 63%;
                    right: -10%;
                    width: 28%;
                }
                .section1 {
                    margin-bottom: 6rem !important;
                    background-size: 410px;
                    background-position: -52px 10px;
                }
                .content-bg{
                    padding: 20px;
                    background: rgba(255,255,255,.8);
                }
                .section1-content {
                    padding: 0;
                }
                .padtop{
                    padding-top: 50px 0px;
                }
                .section-content-head {
                    font-size: 28px;
                }
                .common-text {
                    font-size: 14px;
                    font-weight: 600;
                }
            }
            @media (min-width: 320px) and (max-width: 480px){
                .img-left{
                    top: 11%;
                    width: 40%;
                    left: -14%;
                }
                .img1{
                    top: 24%;
                    right: -9%;
                    width: 55%;
                }
                .img2{
                    top: 41%;
                    right: -22%;
                    width: 54%;
                }
                .img3{
                    top: 43%;
                    left: -10%;
                    width: 35%;
                }
                .img4{
                    top: 59%;
                    right: -10%;
                    width: 28%;
                }
                .section1 {
                    margin-bottom: 6rem !important;
                    background-size: 410px;
                    background-position: -52px 10px;
                }
                .content-bg{
                    padding: 20px;
                    background: rgba(255,255,255,.8);
                }
                .section1-content {
                    padding: 0;
                }
                .padtop{
                    padding-top: 50px 0px;
                }
                .section-content-head {
                    font-size: 28px;
                }
                .common-text {
                    font-size: 14px;
                    font-weight: 600;
                }
            }
            @media (min-width: 481px) and (max-width: 768px){
                .img-left{
                    top: 20%;
                    width: 35%;
                    left: -12%;
                }
                .img1{
                    top: 30%;
                    right: -4%;
                    width: 41%;
                }
                .img2{
                    top: 50%;
                    right: -17%;
                    width: 43%;
                }
                .img3{
                    top: 56%;
                    left: -7%;
                    width: 25%;
                }
                .img4{
                    top: 69%;
                    right: -9%;
                    width: 22%;
                }
                .padtop{
                    padding-top: 50px 0px;
                }
                .section1 {
                    margin-bottom: 6rem !important;
                    background-size: 445px;
                }
                .content-bg{
                    padding: 20px;
                    background: rgba(255,255,255,.8);
                }
                .section1-content {
                    padding: 0;
                }            
            }
            @media (min-width: 769px) and (max-width: 1024px){
                .img-left{
                    top: 14%;
                    width: 28%;
                    left: -9%;
                }
                .img1{
                    top: 20%;
                    right: -3%;
                    width: 32%;
                }
                .img2{
                    top: 56%;
                    right: -15%;
                    width: 36%;
                }
                .img3{
                    top: 67%;
                    left: -6%;
                    width: 23%;
                }
                .img4{
                    top: 85%;
                    right: -8%;
                    width: 18%;
                }
                .padtop{
                    padding-top: 50px 0px;
                }
                .section1 {
                    margin-bottom: 2rem !important;
                    background-size: 445px;
                }
                .content-bg{
                    padding: 20px;
                    background: rgba(255,255,255,.8);
                }
                .section1-content {
                    padding: 0;
                }    
            }
            @media (min-width: 1025px) and (max-width: 1200px){
                .img-left{
                    top: 15%;
                    width: 27%;
                    left: -10%;
                }
                .img1{
                    top: 20%;
                    right: 0%;
                    width: 30%;
                }
                .img2{
                    top: 52%;
                    right: -14%;
                    width: 35%;
                }
                .img3{
                    top: 62%;
                    left: -6%;
                    width: 23%;
                }
                .img4{
                    top: 81%;
                    right: -8%;
                    width: 18%;
                }
                .padtop{
                    padding-top: 50px 0px;
                }
                .section1 {
                    margin-bottom: 3rem !important;
                    background-size: 475px;
                }
                .content-bg{
                    padding: 20px;
                    background: rgba(255,255,255,.8);
                }
                .section1-content {
                    padding: 0;
                }  
            }
            @media (min-width: 1201px) {
                .img-left{
                    top: 10%;
                    width: 24%;
                    left: -8%;
                }
                .img1{
                    top: 16%;
                    right: 6%;
                    width: 25%;
                }
                .img2{
                    top: 45%;
                    right: -15%;
                    width: 35%;
                }
                .img3{
                    top: 58%;
                    left: -5%;
                    width: 21%;
                }
                .img4{
                    top: 79%;
                    right: -7%;
                    width: 17%;
                }
                .padtop{
                    padding-top: 50px 0px;
                }
                .section1 {
                    margin-bottom: 2rem !important;
                    background-size: 475px;
                }
                .content-bg{
                    padding: 20px;
                    background: rgba(255,255,255,.8);
                }
                .section1-content {
                    padding: 0;
                } 
            }
            .img-left, .img1, .img2, .img3, .img4{
                z-index: -1;
            }
            .cat-section{
                height: 200px;
            }
            .category-title{
                color: #20409A;
            }
            .card-container {
              cursor: pointer;
              height: 100%;
              -webkit-perspective: 600;
              perspective: 600;
              position: relative;
              width: 100%;
          }
          .card {
            border: none;
            height: 200px;
            position: absolute;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            transition: all 1s ease-in-out;
            width: 100%;
            background-color: transparent;
        }
        .card:hover {
          -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
      }
      .card .side {
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          /*border-radius: 6px;*/
          height: 100%;
          position: absolute;
          overflow: hidden;
          text-align: center;
          width: 100%;
      }
      .card .back {
        font-size: 15px;
        padding: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #000856;
        text-align: center;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    .iconmargin{
        margin-top: 10px;
        margin-bottom: 10px;
    }
    #page{

        background: url(../images/section2-bg.png) repeat-y;
        background-size: 100%;
        background-position: right 500px;
    }