/* common styles for all screen sizes */

html,body{
    height:100%;
}

#languageSelector{
    text-align: right;
    padding-right: 10px;
    padding-top: 10px
}

#languageSelector .title{
    font-family: "source_sans_probold_italic";
}

#languageSelector .languageList{
    /*float: right;*/
    ;
    font-family:"source_sans_proitalic";
}

.hindi-text{
    font-family:"kruti_dev_710normal";
}

.bold{
    font-family: "source_sans_probold_italic";
}

.desc{
    font-family: "red_hat_textregular";
}

.navbar.bg-light{
    background-color: rgba(255, 255, 255,1) !important;
}

.navbar-nav a{
    color: #000000;
    text-decoration: none;
}

.nav-link{
  font-family: 'electronica_display_solidRg';
  /* font-weight: bold; */
  color:#000 !important;
  font-size: 1.3em;
  letter-spacing: .03em;
  line-height: .9em;
  /* text-rendering : optimizeLegibility; */
  text-align: center;
  /* border:1px solid red; */
  padding-top: .6em;
  padding-bottom: .6em;
}

.navbar-nav a:hover .nav-link{
    background-color: #000;
    color: #fff !important;
}


#breadcrumblist{
    font-family: "source_sans_proitalic";
}

#breadcrumblist li{
    display: inline;
}

/*#breadcrumblist li a{
    color: #000;
}*/



.footer{
  background-color:#272727;
  color:#fff;
  font-family:'electronica_display_solidRg';
  font-size: .5em;
  letter-spacing:.1em;
  text-align:right;
  padding-right:2%;
  height:50px;
  line-height:50px;

  /* position:absolute;
  bottom:0px; */
  width:100%;
}

.sizeDisplay{
    position: fixed;
    right:0;
    top:0;
    display:none;    
}

.sizeDisplay div{
    display:none;
}

.sizeDisplay .XS{
    display:block;
}

.navbar-brand{
    /* border:1px solid red; */
    width:60%;
}

.navbar-brand img{
    width:80%;
}

.section-divider{
    margin-top:35px;
    margin-bottom:35px;
    text-align: center;
}

.section-divider img{

}

.thumb{
    float:left;
    width:46%;
    margin:2%;

    border-radius: 5px;
    border:3px solid #000;
    box-shadow: 5px 5px 5px #ddd3bd;   
}

.thumb img{
    width:100%;
    height:auto;
}


/* ------------------------------XS--animation--screen--1--------------------- */

#make_in_india{
    position: absolute;
    /* border:1px solid red; */
    width:70px;
    top:240px;
    left:12%;
    z-index: 10;
    opacity:1;
    visibility: hidden;
}

#make_in_india img
{
    width:100%;
    height:auto;
}

#inbac{
    position: absolute;
    /* border:1px solid red; */
    width:100px;
    top:220px;
    left:65%;
    z-index: 0;
    opacity:1;
    visibility: hidden;
}

#inbac img
{
    width:100%;
    height:auto;
}

#kathakali{
    position: absolute;
    /* border:1px solid red; */
    width:  100px;
    top:70%;
    left:10%;
    z-index: 10;
    opacity: .8;
    rotate:10deg;
    visibility: hidden;
}   

#kathakali img
{
    width:100%;
    height:auto;
}

#peacock{
    position: relative;
    /* border:1px solid red; */
    width:90px;
    top:-100px;
    left:2%;
    z-index: 10;
    opacity:.8;
    rotate:-10deg;
    visibility: hidden;
}

#peacock img
{
    width:100%;
    height:auto;
}

#elephant-head{
    position: relative;
    /* border:1px solid red; */
    width:80px;
    top:-30px;
    left:91%;
    z-index: 10;
    opacity:.7;
    visibility: hidden;
}

#elephant-head img
{
    width:100%;
    height:auto;
}

#homeIntro h1{
    font-size :1.3em;
}

#homeIntro h3{
    margin-top: 20px;
    font-size :1.1em;
    text-align: center;
}


.contentScreen{
    padding-left:8%;
    padding-right:8%;
    text-align:justify;
    /* border:1px solid red; */
    width:100%;
}

.contentScreen h1{
    font-size: 2.5em;
}

.contentScreen .linkDiv{
    text-align: center;
}

.contentScreen a{
    margin: auto;
}


#screen1{
    position: relative;
    overflow: hidden;
}

#screen1 #homeIntro .desc{
    padding-left:8%;
    padding-right:8%;
    text-align:justify;
    /* border:1px solid red; */
    width:100%;
}

#screen1 #advaita #advaita-english-text{
    font-family:"amaticbold";
}

#screen1 #advaita #non-dualism{
    font-family: "amatic_scregular";
}

#screen1 #everything-is-one{
    font-family: "electronica_display_solidRg"
}

#screen1 #silhouette{
    /* border:1px solid red; */
    height:200px;
    text-align:center;
    background-image: url(../images/buildings_hor.png);
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
}

/* #screen1 #silhouette img{
    height:400px;
} */

#screen1 #clouds{
    /* display:none; */
    display:block;
        /*position:absolute;*/
        /* overflow: hidden; */
        /*top:1250px;*/
        position: relative;
        float: left;
         /*border:1px solid green; */
        width:100%;
        z-index: -1;
        opacity: .5;
}

#screen1 #clouds div{
    position: absolute;
    overflow: hidden;
}

#screen1 #clouds div img{
    width:100%;
    height:auto;
}

#screen1 #cloud1{
    width:70px;
    top:50px;
    opacity:0;
    animation-name:cloud-travel-right-to-left;
    animation-duration: 40s;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

#screen1 #clouds #cloud2{
    width:50px;
    top:0px;
    /* left:35%; */
    opacity:0;
    animation-name:cloud-travel-right-to-left;
    animation-duration: 40s;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-delay: 7s;
}

#screen1 #clouds #cloud3{
    width:65px;
    top:65px;
    /* left:60%; */
    opacity:0;
    animation-name:cloud-travel-left-to-right;
    animation-duration: 40s;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

#screen1 #clouds #cloud4{
    width:85px;
    top:75px;
    /* left:20%; */
    opacity:0;
    animation-name:cloud-travel-right-to-left;
    animation-duration: 40s;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-delay: 4s;
}

#screen1 #centrepeice{
    /* border:1px solid red; */
    position:relative;
    height:650px;
    margin-top:30px;
}

#screen1 #advaita{
    /* border:1px solid red; */
    text-align: center;
    position:absolute;
    width:100%;
    top:30px;
}

#screen1 #advaita #advaita-hindi-text{
    font-size: 3.3em;
    /* border:1px solid green; */
}

#screen1 #advaita #advaita-english-text{
    font-size: 3.3em;
    /* border:1px solid blue; */
    margin-top:-40px;
}

#screen1 #advaita #non-dualism{
    font-size: 3.3em;
    /* border:1px solid yellow; */
    margin-top:-30px;
}

#screen1 #landscape{
    position: absolute;
    top:300px;
    width:10px;
    left:50%;
    transform: translate(-50%, 0);
    transition:width 2s;
    transition-delay: 1s;
    /* border:1px solid red; */
}

#screen1.active #landscape{
    width:200px;
    /* border:1px solid red; */
}

#screen1 #landscape img{
    width:100%;
}

#screen1 #tree{
    position: absolute;
    width:48px;
    opacity:0;
    left:50%;
    transform: translate(-150%, 0);
    top:298px;
    transition:opacity 1s;
    transition-delay:3s;
}

#screen1.active #tree{
    opacity:1;
}

#screen1 #tree img{
    width:100%;
}

#screen1 #head{
    position:absolute;
    width:160px;
    left:50%;
    transform: translate(-55%, 0);
    top:420px;
    opacity:0;
    transition:opacity 5s;
    /* margin-top:20px; */
}

#screen1.active #head{
    opacity:1;
}

#screen1 #head img{
    width:100%;
}

#screen1 #leaf1{
    position:absolute;
    width:45px;
    left:50%;
    transform: translate(-158%, 0);
    top:415px;
    opacity:0;
    transition:opacity 5s;
}

#screen1.active #leaf1{
    opacity:1;
}

#screen1 #leaf1 #inner{
    /* border:1px solid red; */
    transform-origin:bottom right;
    opacity:0;
}

#screen1.active #leaf1 #inner{
    /* animation-name:leaf-sway;
    animation-duration: 15s;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards; */
    /* animation-delay: 7s; */
}

#screen1 #leaf1 img{
    width:100%;
    height:auto;
}

#screen1 #leaf2{
    position:absolute;
    width:40px;
    left:50%;
    transform: translate(55%, 0);
    top:420px;
    opacity:0;
    transition:opacity 5s;
    /* border:1px solid red; */
}

#screen1.active #leaf2{
    opacity:1;
}

#screen1 #leaf2 #inner{
    /* border:1px solid red; */
    transform-origin:bottom right;
    opacity:0;
    /* transform:rotateZ(90deg); */
}

#screen1.active #leaf2 #inner{
    /* animation-name:leaf-sway;
    animation-duration: 15s;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-delay: 5s; */
}

#screen1 #leaf2 img{
    width:100%;
    height:auto;
}

#screen1 #plant{
    position:absolute;
    width:15px;
    left:50%;
    transform: translate(-1000%, 0);
    top:465px;
    opacity:0;
    transition:opacity .5s,top .5s;
    transition-delay: 3s;
}

#screen1.active #plant{
    opacity:1;
    top:435px;
}

#screen1 #plant img{
    width:100%;
}

#screen1 #cat{
    position:absolute;
    width:62px;
    left:50%;
    transform: translate(-280%, 0);
    top:380px;
    opacity:0;
    transition:opacity .5s,top .5s;
    transition-delay: 3.2s;
}

#screen1.active #cat{
    opacity:1;
    top:360px;
}

#screen1 #cat img{
    width:100%;
}

#screen1 #shooting-star{
    position:absolute;
    width:72px;
    left:50%;
    transform: translate(-200%, 0);
    top:280px;
    opacity:0;
    transition:opacity .5s,top .5s;
    transition-delay: 3.4s;
}

#screen1.active #shooting-star{
    opacity:1;
    top:260px;
}

#screen1 #shooting-star img{
    width:100%;
}

#screen1 #moon{
    position:absolute;
    width:22px;
    left:58%;
    transform: translate(-200%, 0);
    top:240px;
    opacity:0;
    transition:opacity .5s,top .5s;
    transition-delay: 3.6s;
}

#screen1.active #moon{
    opacity:1;
    top:220px;
}

#screen1 #moon img{
    width:100%;
}

#screen1 #sun{
    position:absolute;
    width:30px;
    left:55%;
    /* transform: translate(80%, 0); */
    top:240px;
    /* border:1px solid red; */
    animation-name:sun-animation-loop;
    animation-duration: 10s;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;

    opacity:0;
    transition:opacity .5s,top .5s;
    transition-delay: 3.8s;
}

#screen1.active #sun{
    opacity:1;
    top:220px;
}

#screen1 #sun img{
    width:100%;
    height:auto;
}

#screen1 #saturn{
    position:absolute;
    width:40px;
    left:50%;
    transform: translate(220%, 0);
    top:290px;
    opacity:0;
    transition:opacity .5s,top .5s;
    transition-delay: 4.0s;
}

#screen1.active #saturn{
    opacity:1;
    top:270px;
}

#screen1 #saturn img{
    width:100%;
}

#screen1 #dog{
    position:absolute;
    width:60px;
    left:50%;
    transform: translate(190%, 0);
    top:350px;
    opacity:0;
    transition:opacity .5s,top .5s;
    transition-delay: 4.2s;
}

#screen1.active #dog{
    opacity:1;
    top:330px;
}

#screen1 #dog img{
    width:100%;
}

#screen1 #thinking-man{
    position:absolute;
    width:53px;
    left:50%;
    transform: translate(180%, 0);
    top:430px;
    opacity:0;
    transition:opacity .5s,top .5s;
    transition-delay: 4.4s;
}

#screen1.active #thinking-man{
    opacity:1;
    top:410px;
}

#screen1 #thinking-man img{
    width:100%;
}

#screen1 #fish{
    position: absolute;
    width:42px;
    left:50%;
    top:365px;

    /* animation-name:fish-animation-loop;
    animation-duration: 10s;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards; */

    opacity:0;
    transition:opacity .5s;
    transition-delay: 4.6s;
}

#screen1.active #fish{
    opacity:0;
}

#screen1 #fish img{
    width:100%;
    height:auto;
}

#screen1 #bird1{
    position: absolute;
    width:25px;
    height:25px;
    left:90%;
    /* transform: translate(-450%, 0); */
    top:300px;
    /* border:1px solid red; */

    animation-name:bird-fly-right-to-left;
    animation-duration:30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    opacity:0;
    transition:opacity .5s;
    transition-delay: 4.8s;
}

#screen1.active #bird1{
    opacity:1;
}

#screen1 .bird-flap{
    width:100%;
    height:100%;
    background-image : url(../images/home-anim-screen-1/flying-bird-sprite.png);
    background-size: 300% 100%;
    background-position-x: 300%;
    animation-name:bird-flap-loop;
    animation-duration:.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* animation-duration: 1s;
    animation-s
    animation-timing-function:linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards; */
}

#screen1 #bird2{
    position: absolute;
    width:33px;
    height:33px;
    /* left:50%;
    transform: translate(-20%, 0); */
    top:255px;

    animation-name:bird-fly-right-to-left;
    animation-duration:25s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    opacity:0;
    transition:opacity .5s;
    transition-delay: 5s;
}

#screen1.active #bird2{
    opacity:1;
}

#screen1 #bird2 img{
    width:100%;
}

#screen1 #waves{
    display:none;
}

#screen1 #waves img{
    width:100%;
}

#screen1 #wind{
    display:none;
    position: absolute;
    width:30px;
    left:0px;
    /* left:50%;
    transform: translate(100%, 0); */
    top:10px;
}

#screen1 #wind img{
    width:100%;
}

#screen1 #butterfly1{
    display:none;
    position: absolute;
    width:60px;
    /* left:0px; */
    left:50%;
    transform: translate(-170%, 0);
    top:10px;
}

#screen1 #butterfly1 img{
    width:100%;
}

#screen1 #everything-is-one{
    position:absolute;
    font-size: 1.7em;
    width:100%;
    text-align: center;
    top:580px;
}

#screen1 #screen1-desc{
    padding-top:90px;
    padding-left:8%;
    padding-right:8%;
    text-align:justify;
    /* border:1px solid red; */
    width:100%;
}

/* ------------------------------XS--animation--screen--2--------------------- */



#screen2{
    position: relative;
    border:1px solid #fff;
    overflow-x: hidden;
}

#screen2 #kite-lantern{
    /* border:1px solid red; */
    position: absolute;
    width:100%;
    height:200px;
}

#screen2 .kite{
    position: absolute;
    width:35px;
    top:90%;
    opacity:0;
    
    animation-name: kite-go-to-top;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

#screen2 .kite .inner{
    transform:rotateZ(-27deg);
    /* border:1px solid red; */
}   

#screen2 .kite img{
    width:100%;
    height: auto;
}

#screen2 #kite1{
    left:1%;
    display:none;
}

#screen2 #kite2{
    left:22.5%;
    animation-delay: 2s;
    /* display:none; */
}

#screen2 #kite3{
    left:45%;
    animation-delay: 6s;
}

#screen2 #kite4{
    left:67.5%;
    animation-delay: 12s;
    /* display:none; */
}

#screen2 #kite5{
    left:90%;
    animation-delay: 10s;
    display:none;
}



#screen2 .lantern{
    position: absolute;
    width:30px;
    top:90%;
    opacity:0;
    
    animation-name: lantern-go-to-top;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

#screen2 .lantern img{
    width:100%;
    height: auto;
}

#screen2 #lantern1{
    left:10%;
    animation-delay: 10s;
}

#screen2 #lantern2{
    left:33%;
    animation-delay: 12s;
    display:none;
    /* display:none; */
}

#screen2 #lantern3{
    left:56%;
    animation-delay: 5s;
    display:none;
}

#screen2 #lantern4{
    left:78%;
    animation-delay: 5s;
    /* display:none; */
}

#screen2 #jeevanmukti{
    /* border:1px solid red; */
    text-align: center;
    position:absolute;
    width:100%;
    top:0px;
}

#screen2 #jeevanmukti #jeevanmukti-hindi-text{
    font-size: 3.2em;
    /* border:1px solid green; */
}

#screen2 #jeevanmukti #jeevanmukti-english-text{
    font-family:"amaticbold";
    font-size: 3.2em;
    /* border:1px solid blue; */
    margin-top:-30px;
}

#screen2 #jeevanmukti #liberation-text{
    font-family: "amatic_scregular";
    font-size: 3.2em;
    /* border:1px solid yellow; */
    margin-top:-20px;
}

#screen2 #vishnu{
    display:none;
}

#screen2 #cage{
    position:absolute;
    width:180px;
    top:250px;
    left:-80px;
}

#screen2 #cage img{
    width:100%;
    height:auto;
}

#screen2 #bird1{
    position:absolute;
    width:8%;
    top:350px;
    left:80px;

    animation-name: xs-bird1-fly;
    animation-duration: 6s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    display:none;
}

#screen2 #bird1 img{
    width:100%;
    height:auto;
}

#screen2 #bird2{
    position:absolute;
    width:12%;
    top:300px;
    left:50%;
    transform:translate(-140%,0);

    animation-name: xs-bird2-fly;
    animation-duration: 6s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    display:none;
}

#screen2 #bird2 img{
    width:100%;
    height:auto;
}

#screen2 #bird3{
    position:absolute;
    width:20%;
    top:260px;
    left:50%;
    transform:translate(0%,0);

    animation-name: xs-bird3-fly;
    animation-duration: 6s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    display:none;
}

#screen2 #bird3 img{
    width:100%;
    height:auto;
}

#screen2 #bird4{
    position:absolute;
    width:20%;
    top:200px;
    right:15px;

    animation-name: xs-bird4-fly;
    animation-duration: 6s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    display:none;
}

#screen2 #bird4 img{
    width:100%;
    height:auto;
}

#screen2 #sun{
    position: absolute;
    width:120px;
    top:280px;
    left:50%;
    transform:translate(-50%,0);
    opacity:.7;
}

#screen2 #sun img{
    width:100%;
    height:auto;
}


#screen2 .flying-swan{
    position:absolute;
    width:120px;
    top:350px;
    left:30px;
    opacity:0;

    /* border:1px solid red; */
}

#screen2 .flying-swan #inner{
    width:100%;
}

#screen2 .flying-swan img{
    width:100%;
    height:auto;
}



#screen2 #flying-swan-1{
    animation-name: xs-swan1-fly;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count:infinite;
}

#screen2 #flying-swan-1 #inner{
    /* border:1px solid red; */
    animation-name: xs-swan1-inner;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count:infinite;
}

#screen2 #flying-swan-2{
    animation-name: xs-swan2-fly;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count:infinite;
    animation-delay: 1s;
}

#screen2 #flying-swan-2 #inner{
    animation-name: xs-swan2-inner;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count:infinite;
    animation-delay: 1s;
}

#screen2 #flying-swan-3{
    animation-name: xs-swan3-fly;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count:infinite;
    animation-delay: 2s;
}

#screen2 #flying-swan-3 #inner{
    animation-name: xs-swan3-inner;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count:infinite;
    animation-delay: 2s;
}




#screen2 #swan{
    width:100px;
    position: absolute;
    top:200px;
    left:68%;

    animation-name: xs-static-swan-appear;
    animation-duration: 20s;
    animation-timing-function: ease-out;
    animation-iteration-count:infinite;
    display:none;
}

#screen2 #swan img{
    width:100%;
    height:auto;
}

#screen2 #left-chain{
    position:absolute;
    display:none;
}

#screen2 #right-chain{
    position:absolute;
    width:120px;
    top:440px;
    left:60px;
}

#screen2 #avidya{
    position: absolute;
    top:470px;
    left:90px;
    font-size: 1.9em;
    transform:rotateZ(-7deg);
}

#screen2 #ignorance{
    font-family:"amaticbold";
    font-size: 1.6em;
    position: absolute;
    top:495px;
    left:94px;
    transform:rotateZ(-7deg);
}

#screen2 #right-chain img{
    width:100%;
    height:auto;
}

#screen2 #lust{
    position:absolute;
    width:35px;
    top:445px;
    left:304px;
}

#screen2 #lust img{
    width:100%;
    height:auto;
}

#screen2 #money{
    position: absolute;
    width:35px;
    top:442px;
    left:260px;
}

#screen2 #money img{
    width:100%;
    height:auto;
}

#screen2 #crown{
    position: absolute;
    width:35px;
    top:440px;
    left:215px;
}

#screen2 #crown img{
    width:100%;
    height:auto;
}

#screen2 #angry-man{
    position: absolute;
    width:35px;
    top:410px;
    left:175px;
}

#screen2 #angry-man img{
    width:100%;
    height:auto;
}

#screen2 #screen2-desc{
    /* position:relative; */
    margin-top:550px;
    padding-left:8%;
    padding-right:8%;
    text-align:justify;
    /* border:1px solid red; */
    width:100%;
}

/* ------------------------------XS--animation--screen--3--------------------- */
#screen3{
    position: relative;
    /* height:3000px; */
    border:1px solid #fff;
}

#screen3 #chakra{
    position:absolute;
    top:120px;
    left:50%;
    transform:translate(-50%,0);
    width:150px;
    /* border:1px solid red; */
}

#screen3 #chakra #inner{
    width:100%;
    height:100%;
    /* border:1px solid green; */

    animation-name: chakra-rotate;
    animation-duration: 25s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

#screen3 #chakra img{
    width:100%;
    height:auto;
}

#screen3 #medi-man{
    width:180px;
    position: absolute;
    left:50%;
    transform:translate(-50%,0);
    top:300px;    
}

#screen3 #medi-man img{
    width:100%;
    height:auto;
}

#screen3 #heart{
    width:30px;
    position: absolute;
    left:50%;
    transform:translate(-50%,0);
    top:422px;

}

#screen3 #heart #inner{
    width:100%;
    height:100%;
    animation-name: heart-beat;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
}

#screen3 #heart img{
    width:100%;
    height:auto;
}

#screen3 #heart-outline-1{
    width:30px;
    position: absolute;
    left:50%;
    transform:translate(-50%,0);
    top:422px;

}

#screen3 #heart-outline-1 #inner{
    width:100%;
    height:100%;
    opacity:0;
    animation-name: heart-outline-1;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

#screen3 #heart-outline-1 img{
    width:100%;
    height:auto;
}

#screen3 #heart-outline-2{
    width:30px;
    position: absolute;
    left:50%;
    transform:translate(-50%,0);
    top:422px;

}

#screen3 #heart-outline-2 #inner{
    width:100%;
    height:100%;
    opacity:0;
    animation-name: heart-outline-2;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

#screen3 #heart-outline-2 img{
    width:100%;
    height:auto;
}

#screen3 #heart-outline-3{
    width:30px;
    position: absolute;
    left:50%;
    transform:translate(-50%,0);
    top:422px;

}

#screen3 #heart-outline-3 #inner{
    width:100%;
    height:100%;
    opacity:0;
    animation-name: heart-outline-3;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

#screen3 #heart-outline-3 img{
    width:100%;
    height:auto;
}

#screen3 #decorator{
    position: absolute;
    width:150px;
    left:50%;
    transform:translate(-50%,0);
    top:580px;
}

#screen3 #decorator img{
    width:100%;
    height:auto;
}

#screen3 #doodles{
    /* display:none; */
}

#screen3 .desc-header{
    font-size: 2.3em;
    width:100%;
    margin-top:660px;
    padding:0px;
    text-align: center;
    /* border:1px solid red; */
}

#screen3 #desc-header-english{
    font-family: "amaticbold";
    font-size: 2.3em;
    text-align: center;
    /* border: 1px solid green; */
    padding:0px;
    margin-top:-20px;
}

#screen3 #desc-header-english-trans{
    font-family: "electronica_display_solidRg";
    width:80%;
    text-align: center;
    font-size: 1.8em;
    line-height: 33px;
    margin:auto;
    margin-top:0px;
    margin-bottom: 20px;
}

#screen3 #screen3-desc{
    /* border:1px solid red; */
    width:100%;
    /* margin-top:630px; */
    padding:40px;
    padding-top:0px;
    text-align: justify;
}

#screen3 .quality{
    margin:auto;
    margin-top:30px;
    position: relative;
    border:1px solid #fff;
    width:85%;
}

#screen3 .quality .finger{
    position: absolute;
    height:55px;
    left:20px;
}

#screen3 .quality .finger img{
    height:100%;
    width:auto;
}

#screen3 .quality .heading{
    font-size: 1.6em;
    /*position: absolute;*/
    margin-left:65px;
     /*border:1px solid green;   */
}

#screen3 #q4 .heading{
    margin-left:75px;
}

#screen3 .quality .heading.hindi-text{
    letter-spacing:0.00001em;
    line-height:25px;
}

#screen3 .quality .heading.english-text{
    font-size: 1.1em;
    line-height:30px;
    font-family: "electronica_display_solidRg";
    top:40px;
}

#screen3 .quality .para{
    margin-top:0px;
    padding:20px;
    text-align: justify;
    /*border:1px solid red;*/
}

#screen3 .quality .sub-heading{
    margin-top:10px;
    margin-left:25px;
    margin-bottom:20px;
    /* width:100%; */
    font-family:"source_sans_proSBdIt";
}

#screen3 #q2 .para{
    margin-top:10px;
}

#screen3 #q3 .para{
    margin-top:0px;
    padding-top:30px;
    /* padding-bottom: 5px; */
}

/* ===screen3-doodle styles=== */
#screen3 #doodles div{
    position: absolute;
}

#screen3 #doodles img{
    width:100%;
    height:auto;
}

#screen3 #whale1{
    width:90px;
    top:20px;
    left:50%;
    transform:translate(-50%,0);
}

#screen3 #tree1_1{
    width:75px;
    top:40px;
    left:50%;
    transform:translate(-180%,0);
}

#screen3 #saturn1{
    width:85px;
    height:85px;
    top:50px;
    left:50%;
    transform:translate(70%,0);
}

#screen3 #flowers_1{
    width:65px;
    top:100px;
    left:50%;
    transform:translate(-170%,0);
}

#screen3 #bird1_1{
    width:35px;
    top:130px;
    left:50%;
    transform:translate(200%,0);
}

#screen3 #mars_1{
    width:65px;
    height:65px;
    top:120px;
    left:50%;
    transform:translate(-270%,0);
}

#screen3 #tree3_1{
    width:55px;
    top:140px;
    left:50%;
    transform:translate(220%,0);
}

#screen3 #crab_1{
    width:55px;
    height:55px;
    top:190px;
    left:50%;
    transform:translate(-300%,0);
}

#screen3 #star1_1{
    width:25px;
    top:200px;
    left:50%;
    transform:translate(340%,0);
}

#screen3 #starfish1{
    width:50px;
    height:50px;
    top:210px;
    left:50%;
    transform:translate(220%,0);
}

#screen3 #star2_1{
    width:35px;
    top:255px;
    left:50%;
    transform:translate(-290%,0);
}

#screen3 #bird4_1{
    width:38px;
    top:265px;
    left:50%;
    transform:translate(130%,0);
}

#screen3 #earth1{
    width:65px;
    height:65px;
    top:275px;
    left:50%;
    transform:translate(140%,0);
}

#screen3 #turtle1{
    width:65px;
    height:65px;
    top:270px;
    left:50%;
    transform:translate(-260%,0);
}

#screen3 #shell3_1{
    width:45px;
    height:45px;
    top:360px;
    left:50%;
    transform:translate(-360%,0);
}

#screen3 #cactus1{
    width:60px;
    top:325px;
    left:50%;
    transform:translate(-190%,0);
}

#screen3 #fish1_1{
    width:70px;
    top:355px;
    left:50%;
    transform:translate(120%,0);
}

#screen3 #shell1_1{
    width:50px;
    height:50px;
    top:415px;
    left:50%;
    transform:translate(-280%,0);
}

#screen3 #star2_2{
    width:30px;
    top:400px;
    left:50%;
    transform:translate(-280%,0);
}

#screen3 #flowers_2{
    width:60px;
    top:425px;
    left:50%;
    transform:translate(180%,0);
}

#screen3 #jelly_1{
    width:70px;
    top:435px;
    left:50%;
    transform:translate(70%,0);
}

#screen3 #jupiter_1{
    width:50px;
    height:50px;
    top:500px;
    left:50%;
    transform:translate(240%,0);
}

#screen3 #dog1_1{
    width:80px;
    top:480px;
    left:50%;
    transform:translate(-220%,0);
}

#screen3 #tree2_1{
    width:70px;
    top:570px;
    left:50%;
    transform:translate(-240%,0);
}

#screen3 #plant1{
    width:70px;
    top:570px;
    left:50%;
    transform:translate(150%,0);
}


/* ===doodle animation=== */
.turtle{
    /* border:1px solid green; */
}

.turtle .inner{
    /* border:1px solid red; */
    width:100%;
    height:100%;

    animation-name: rotate-clockwise-break;
    animation-duration: 15s;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
}

.mars .inner{
    /* border:1px solid red; */
    width:100%;
    height:100%;

    animation-name: rotate-anticlockwise-break;
    animation-duration: 15s;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
    animation-delay:5s;
}


.earth .inner{
    /* border:1px solid red; */
    width:100%;
    height:100%;

    animation-name: rotate-clockwise-break;
    animation-duration: 15s;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
}

.starfish .inner{
    /* border:1px solid red; */
    width:100%;
    height:100%;

    animation-name: rotate-anticlockwise-break;
    animation-duration: 15s;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
    animation-delay:2s;
}

.jupiter .inner{
    /* border:1px solid red; */
    width:100%;
    height:100%;

    animation-name: rotate-anticlockwise-break;
    animation-duration: 15s;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
    /* animation-delay:2s; */
}

.shell3 .inner{
    /* border:1px solid red; */
    width:100%;
    height:100%;

    animation-name: rotate-anticlockwise-break;
    animation-duration: 15s;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
    /* animation-delay:2s; */
}

.saturn .inner{
    /* border:1px solid red; */
    width:100%;
    height:100%;

    animation-name: osscilate;
    animation-duration: 25s;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
    animation-delay:5s;
}

.crab .inner{
    /* border:1px solid red; */
    width:100%;
    height:100%;

    animation-name: osscilate;
    animation-duration: 25s;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
    animation-delay:1s;
}

.star{
    animation-name: twinkle;
    animation-duration: 5s;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
    /* animation-delay:1s; */
}

#star2_1{
    animation-delay: 3s;
}

#star2_2{
    animation-delay: 12s;
}

/* --------------SM---------------------- */
/* --------------SM------------------- */
/* small devices (576px and up) */
/* --------------SM--------------------- */
/* --------------SM------------------------ */
@media (min-width: 576px) {
    .sizeDisplay .SM{
        display:block;
    }

    .navbar-brand{
        /* border:1px solid red; */
        width:40%;
    }

    .thumb{
        width:30%;
    margin:1%;
    }

    /* ------------------------------SM--animation--screen--2--------------------- */

    #screen2 #cage{   
        width:210px;
        top:225px;
        left:-85px;
    }

    #screen2 #bird1{
        position:absolute;
        width:8%;
        top:350px;
        left:105px;

        animation-name: sm-bird1-fly;
        animation-duration: 6s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
    }

    #screen2 #bird2{
        
        /* width:12%; */
        top:275px;
        /* left:50%;
        transform:translate(-140%,0); */

        animation-name: sm-bird2-fly;
        animation-duration: 6s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
    }

    #screen2 #bird3{
        /* position:absolute;
        width:20%; */
        top:240px;
        /* left:50%;
        transform:translate(0%,0); */

        animation-name: sm-bird3-fly;
        animation-duration: 6s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
    }

    #screen2 #bird4{
        /* position:absolute; */
        /* width:20%; */
        top:180px;
        /* right:15px */

        animation-name: sm-bird4-fly;
        animation-duration: 6s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
    }

    
    #screen2 #sun{
        width:140px;
        top:280px;
    }
    
    
    #screen2 .flying-swan{
        width:170px;
        /* border:1px solid red; */
    }
    
    
    #screen2 #flying-swan-1{
        animation-name: sm-swan1-fly;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
    }
    
    #screen2 #flying-swan-1 #inner{
        /* border:1px solid red; */
        animation-name: sm-swan1-inner;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
    }
    
    #screen2 #flying-swan-2{
        animation-name: sm-swan2-fly;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
        animation-delay: 1.7s;
    }
    
    #screen2 #flying-swan-2 #inner{
        animation-name: sm-swan2-inner;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
        animation-delay: 1.7s;
    }
    
    #screen2 #flying-swan-3{
        animation-name: sm-swan3-fly;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
        animation-delay: 3.14s;
    }
    
    #screen2 #flying-swan-3 #inner{
        animation-name: sm-swan3-inner;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
        animation-delay: 3.14s;
    }





    #screen2 #right-chain{
        width:160px;
        top:440px;
        left:80px;
    }

    #screen2 #avidya{
        top:480px;
        left:110px;
        font-size: 2.8em;
        transform:rotateZ(-7deg);
    }

    #screen2 #ignorance{
        font-size: 2.1em;
        position: absolute;
        top:515px;
        left:123px;
        transform:rotateZ(-7deg);
    }

    #screen2 #angry-man{
        width:45px;
        top:400px;
        left:250px;
    }

    #screen2 #crown{
        width:45px;
        top:440px;
        left:310px;
    }

    #screen2 #money{
        width:45px;
        top:440px;
        left:370px;
    }

    #screen2 #lust{
        width:50px;
        top:445px;
        left:440px;
    }

    #screen2 #screen2-desc{
        margin-top:580px;
    }

    

    /*#screen3 .quality .para,#screen3 #q2 .para{
    margin-top:40px;
    }*/
}

/* --------------MD---------------------- */
/* --------------MD------------------- */
/* Medium devices (tablets, 768px and up) */
/* --------------MD------------------- */
/* --------------MD---------------------- */
@media (min-width: 768px) {
    .sizeDisplay .MD{
        display:block;
    }

    .navbar-brand{
        width:30%;
    }

    .thumb{
        width:23%;
    margin:1%;
    }

    /* ------------------------------MD--animation--screen--1--------------------- */

    #screen1 #clouds #cloud1{
        width:100px;
        animation-duration: 70s;
    }

    #screen1 #clouds #cloud2{
        width:80px;
        animation-duration: 70s;
    }

    #screen1 #clouds #cloud3{
        width:100px;
        animation-duration: 70s;
    }

    #screen1 #clouds #cloud4{
        width:100px;
        animation-duration: 70s;
    }


/* ----------------------------------MD--animation--screen--2----------------------- */

#screen2 .kite{
    width:40px;
}

#screen2 .lantern{
    width:35px;
}

    #screen2 #cage{   
        width:300px;
        top:300px;
        left:-125px;
    }


    #screen2 #bird1{
        /* position:absolute;
        width:8%; */
        top:460px;
        left:155px;

        animation-name: md-bird1-fly;
        animation-duration: 8s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
    }

    #screen2 #bird2{
        
        /* width:12%; */
        top:350px;
        /* left:50%;
        transform:translate(-140%,0); */

        animation-name: md-bird2-fly;
        animation-duration: 8s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
    }

    #screen2 #bird3{
        /* position:absolute;
        width:20%; */
        top:280px;
        /* left:50%;
        transform:translate(0%,0); */

        animation-name: md-bird3-fly;
        animation-duration: 8s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
    }

    #screen2 #bird4{
        animation-name: md-bird4-fly;
        animation-duration: 8s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
    }


    #screen2 #sun{
        width:140px;
        top:330px;
    }

    #screen2 #flying-swan-1{
        animation-name: md-swan1-fly;
        animation-duration: 7s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
    }
    
    #screen2 #flying-swan-1 #inner{
        /* border:1px solid red; */
        animation-name: md-swan1-inner;
        animation-duration: 7s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
    }
    
    #screen2 #flying-swan-2{
        animation-name: md-swan2-fly;
        animation-duration: 7s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
        animation-delay: 1.7s;
    }
    
    #screen2 #flying-swan-2 #inner{
        animation-name: md-swan2-inner;
        animation-duration: 7s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
        animation-delay: 1.7s;
    }
    
    #screen2 #flying-swan-3{
        animation-name: md-swan3-fly;
        animation-duration: 7s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
        animation-delay: 3.14s;
    }
    
    #screen2 #flying-swan-3 #inner{
        animation-name: md-swan3-inner;
        animation-duration: 7s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
        animation-delay: 3.14s;
    }
    

    #screen2 #right-chain{
        width:200px;
        top:600px;
        left:120px;
    }

    #screen2 #avidya{
        top:646px;
        left:165px;
        font-size: 3em;
        transform:rotateZ(-6deg);
    }

    #screen2 #ignorance{
        font-size: 2.5em;
        top:686px;
        left:173px;
        transform:rotateZ(-7deg);
    }

    #screen2 #angry-man{
        width:65px;
        top:550px;
        left:330px;
    }

    #screen2 #crown{
        width:65px;
        top:590px;
        left:400px;
    }

    #screen2 #money{
        width:65px;
        top:590px;
        left:480px;
    }

    #screen2 #lust{
        width:65px;
        top:600px;
        left:570px;
    }

    #screen2 #screen2-desc{
        margin-top:770px;
    }
}





/* ---------------LG--------------------- */
/* ---------------LG------------------ */
/* Large devices (desktops, 992px and up) */
/* ---------------LG------------------ */
/* ---------------LG--------------------- */
@media (min-width: 992px) {
    .sizeDisplay .LG{
        display:block;
    }

    /*.navbar{
        height : 20%;
        min-height:100px;
    }

    

    .navbar-brand{
        width:23%;
        margin-top:1%;
    }

    .navbar-nav{
        margin-left:1.5%;
        width:100%;        
    }

    .nav-link{
        font-size: 1.4em;
        text-align: center;
        line-height:.9em;
        
    }

    .nav-link a{
        display:block;
        
    }

    .nav-link a:hover{
        color:orangered;
        text-shadow: .5px .5px #666;
        
    }*/

    .pageBody{
        /* height:71%; */
        /* min-height:520px; */
    }

    .footer{
        height: 9%;
        min-height:50px;
        font-size: .9em;
    }

    .section-divider{
        /* display:none; */
        margin-top:50px;
        margin-bottom: 50px;
    }

    .thumb{
        width:18%;
    margin:1%;
    }

    #make_in_india{
        position: absolute;
        /* border:1px solid red; */
        width:140px;
        top:20px;
        left:35%;
        z-index: 10;
        opacity:1;
    }

    #make_in_india img
    {
        width:100%;
        height:auto;
    }


    #inbac{
        position: absolute;
        /* border:1px solid red; */
        width:140px;
        top:20px;
        left:65%;
        z-index: 10;
        opacity:1;
    }

    #inbac img
    {
        width:100%;
        height:auto;
    }

    #elephant-head{
        position: relative;
        /* border:1px solid red; */
        width:80px;
        top:-30px;
        left:91%;
        z-index: 10;
        opacity:.7;
        visibility: visible;
    }

    #elephant-head img
    {
        width:100%;
        height:auto;
    }


    #peacock{
        position: relative;
        /* border:1px solid red; */
        width:90px;
        top:-100px;
        left:2%;
        z-index: 10;
        opacity:.8;
        rotate:-10deg;
        visibility: visible;
    }

    #peacock img
    {
        width:100%;
        height:auto;
    }


    #kathakali{
        position: absolute;
        /* border:1px solid red; */
        width:  100px;
        top:40%;
        left:90%;
        z-index: 10;
        opacity: .8;
        rotate:10deg;
        visibility: visible;
    }   

    #kathakali img
    {
        width:100%;
        height:auto;
    }
    

    /* ------------------------------LG--animation--screen--1--------------------- */

    #screen1{
        /* height:100%; */
        /* border:1px solid red; */
        min-height: 1100px;
    }

    #screen1.active{
        display:block;
    }

    #screen1 #centrepeice{
        height:100%;
    }

    #screen1 #clouds{
        top:0px;
        opacity:.2;
        position: absolute;
    }


    #screen1 #clouds #cloud1{
        width:95px;
        animation-duration: 70s;
    }

    #screen1 #clouds #cloud2{
        width:75px;
        animation-duration: 70s;
    }

    #screen1 #clouds #cloud3{
        width:95px;
        animation-duration: 70s;
    }

    #screen1 #clouds #cloud4{
        width:95px;
        animation-duration: 70s;
    }

    #screen1 #silhouette{
        /* border:1px solid red; */
        width:22%;
        height:380px;
        float:left;
        margin-left:2%;
        margin-top: 8%;
        background-image: url(../images/buildings.png);
        background-size: contain;
        background-repeat: no-repeat;
        /* z-index:1; */
    }

    #screen1 #silhouette img{
        /* border:1px solid yellow; */
        width:100%;
        height:auto;
        /* max-height:300px; */
    }

    #screen1 #homeIntro h1, #screen1 #homeIntro .desc{
        width: 80%;
        margin-left: 18%;
        /* border:1px solid red; */
    }

    #screen1 #homeIntro h3{
        width:80%;
        margin-top:20px;
        margin-bottom:10px;
        margin-left:18%;
        color:darkgreen;
        /* font-family: 'electronica_display_inlineRg'; */
        /* font-weight: 300; */
        text-align: center;
        font-size: 1em;
        /* border:1px solid red; */
        /* margin-top:35px; */
    }

    #screen1 #homeIntro .desc{
        padding-right:0px;
    }

    #screen1 #centrepeice{
        float:left;
        width:60%;
         /* border:1px solid green; */
        margin:0px;
    }

    #screen1.active #landscape{
        width:320px;
        top:90px;
    }

    #screen1.active #tree{
        opacity:1;
        width:60px;
        top:105px;
        /* left:230px; */
    }

    #screen1 #head{
        width:200px;
        top:200px;
        transform:translate(-50%,0);
    }

    #screen1 #leaf1{
        width:50px;
        top:240px;
        transform:translate(-140%,0);
    }

    #screen1 #leaf2{
        width:45px;
        top:245px;
        transform: translate(60%, 0);
    }

    #screen1 #advaita{
        /* border:1px solid red; */
        text-align: center;
        position:absolute;
        width:150px;
        top:350px;
        
        left:50%;
        transform: translate(-130%, 0);
    }

    #screen1 #advaita #advaita-hindi-text{
        font-size: 2.2em;
    }

    #screen1 #advaita #advaita-english-text{
        font-size: 2.3em;
        margin-top:-25px;
    }

    #screen1 #advaita #non-dualism{
        font-size: 2.3em;
        margin-top:-20px;
    }

    #screen1 #everything-is-one{
        /* border:1px solid red; */
        width:500px;
        top:420px;

        left:5%;
        transform: translate(7%, 0);

        font-size: 1.5em;
        line-height: .9em;
        text-align: center;
    }

    #screen1 #plant{
        width:60px;
        top:270px;
        transform: translate(-380%, 0);
    }

    #screen1.active #plant{
        opacity:1;
        top:250px;
    }

    #screen1 #cat{
        width:70px;
        top:190px;
        transform: translate(-340%, 0);
    }

    #screen1.active #cat{
        opacity:1;
        top:170px;
    }

    #screen1 #shooting-star{
        width:80px;
        top:95px;
        transform: translate(-250%, 0);
    }

    #screen1.active #shooting-star{
        opacity:1;
        top:75px;
    }

    #screen1 #moon{
        width:70px;
        top:35px;
        /* transform: translate(-250%, 0); */
    }

    #screen1.active #moon{
        opacity:1;
        top:5px;
    }

    #screen1 #sun{
        width:45px;
        top:35px;
        /* transform: translate(-250%, 0); */
    }

    #screen1.active #sun{
        opacity:1;
        top:25px;
    }

    #screen1 #saturn{
        width:70px;
        top:95px;
        transform: translate(170%, 0);
    }

    #screen1.active #saturn{
        opacity:1;
        top:45px;
    }

    #screen1 #dog{
        width:75px;
        top:145px;
        transform: translate(220%, 0);
    }

    #screen1.active #dog{
        opacity:1;
        top:125px;
    }

    #screen1 #thinking-man{
        width:75px;
        top:220px;
        transform: translate(240%, 0);
    }

    #screen1.active #thinking-man{
        opacity:1;
        top:250px;
    }

    #screen1 #bird1{
        width:30px;
        height:30px;
        top:130px;
        /* transform: translate(-650%, 0); */
    }

    #screen1 #bird2{
        width:40px;
        height:40px;
        top:60px;
        /* transform: translate(-350%, 0); */
    }

    #screen1 #fish{
        width:55px;
        top:180px;
        /* transform: translate(-350%, 0); */
    }

    #screen1 #screen1-desc{
        float:right;
        width:40%;
        /* border:1px solid blue; */
        padding:0px;
        margin-right:2%;
        margin-top:110px;
    }

    #screen1 #waves{
        display: none;
        /*position: absolute;*/
    width:70px;
    right:0px;
    /* left:50%;
    transform: translate(100%, 0); */
    top:780px;
        
        width:100px;
        top:400px;
    }

    /* ------------------------------LG--animation--screen--2--------------------- */

    #screen2{
        overflow:visible;
    }

    #screen2 #kite-lantern{
        /* border:1px solid red; */
        top:-75px;
    }

    #screen2 .kite{
        width:45px;
    }
    
    #screen2 .lantern{
        width:40px;
    }

    #screen2{
        /* height:100%; */
        min-height:550px;
        display:none;
        /* border:1px solid red; */
    }

    #screen2.active{
        display:block;
    }

    #screen2 #cage{
        left:230px;
        width:220px;
        top:170px;
    }

    #screen2 #jeevanmukti{
        /* border:1px solid red; */
        text-align: center;
        position:absolute;
        width:290px;
        top:50px;
    }
    
    #screen2 #jeevanmukti #jeevanmukti-hindi-text{
        font-size: 2.4em;
        /* border:1px solid green; */
    }
    
    #screen2 #jeevanmukti #jeevanmukti-english-text{
        font-family:"amaticbold";
        font-size: 2.4em;
        /* border:1px solid blue; */
        margin-top:-30px;
    }
    
    #screen2 #jeevanmukti #liberation-text{
        font-family: "amatic_scregular";
        font-size: 2.4em;
        /* border:1px solid yellow; */
        margin-top:-20px;
    }

    #screen2 #bird1{   
        width:6%;
        top:280px;
        left:430px;

        animation-name: lg-bird1-fly;
        animation-duration: 8s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
    }

    #screen2 #bird2{
        
        width:8%;
        top:200px;
        left:50%;
        transform:translate(20%,0);

        animation-name: lg-bird2-fly;
        animation-duration: 8s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
    }

    #screen2 #bird3{ 
        width:15%;
        top:125px;
        left:50%;
        transform:translate(80%,0);
        
        animation-name: lg-bird3-fly;
        animation-duration: 8s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
    }

    #screen2 #bird4{
        top:30px;
        width:15%;
        right:50px;

        animation-name: lg-bird4-fly;
        animation-duration: 8s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
    }



    #screen2 #sun{
        width:90px;
        top:150px;
        /* transform:translate(400%,0); */
        left:auto !important;
        right:90px !important;
    }

    #screen2 #flying-swan-1{
        animation-name: lg-swan1-fly;
        animation-duration: 4s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
    }
    
    #screen2 #flying-swan-1 #inner{
        /* border:1px solid red; */
        animation-name: lg-swan1-inner;
        animation-duration: 4s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
    }
    
    #screen2 #flying-swan-2{
        animation-name: lg-swan2-fly;
        animation-duration: 4s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
        animation-delay: 1.2s;
    }
    
    #screen2 #flying-swan-2 #inner{
        animation-name: lg-swan2-inner;
        animation-duration: 4s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
        animation-delay: 1.2s;
    }
    
    #screen2 #flying-swan-3{
        animation-name: lg-swan3-fly;
        animation-duration: 4s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
        animation-delay: 2.4s;
        /* border:1px solid red; */
    }
    
    #screen2 #flying-swan-3 #inner{
        animation-name: lg-swan3-inner;
        animation-duration: 4s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
        animation-delay: 2.4s;
    }




    #screen2 #left-chain{
        display:block;
        width:160px;
        top:390px;
        left:110px;
    }

    #screen2 #left-chain img{
        width:100%;
        height:auto;
    }

    #screen2 #right-chain{
        width:160px;
        top:390px;
        left:410px;
    }

    #screen2 #avidya{
        top:425px;
        left:125px;
        font-size: 2.8em;
        transform:rotateZ(5deg);
    }

    #screen2 #ignorance{
        font-size: 2.2em;
        top:429px;
        left:443px;
        transform:rotateZ(-5deg);
    }

    #screen2 #angry-man{
        width:45px;
        top:300px;
        left:90px;
    }

    #screen2 #crown{
        width:45px;
        top:360px;
        left:40px;
    }

    #screen2 #money{
        width:45px;
        top:410px;
        left:40px;
    }

    #screen2 #lust{
        width:45px;
        top:460px;
        left:80px;
    }

    #screen2 #screen2-desc{
        /* border:1px solid red; */
        padding:0;
        margin:0px;
        position: absolute;
        width:320px;
        top:250px;
        right:20px;
        background-image: url(../images/home-anim-screen-2/elephant.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }


    /* ------------------------------LG--animation--screen--3--------------------- */

    #screen3{
        /* border:1px solid red; */
        /* overflow-x: hidden;
        overflow-y: visible; */
    }

    #screen3 #doodles{
        /* display:none; */
        /* border:1px solid red; */
    }

    #screen3 #medi-man{
        width:140px;
        top:285px;
    }

    #screen3 #chakra{
        width:120px;
        top:120px;   
    }

    #screen3 #heart{
        width:25px;
        top:375px;
    }

    #screen3 #heart-outline-1{
        width:25px;
        top:375px;
    }
    
    #screen3 #heart-outline-2{
        width:25px;
        top:375px;
    }
    
    
    #screen3 #heart-outline-3{
        width:25px;
        top:375px;
    }
    

    #screen3 #decorator{
        width:120px;
        top:500px;
    }

    #screen3 .desc-header{
        margin-top:570px;
    }

    #screen3 #desc-header-english{
        font-family: "amaticbold";
    }

    #screen3 #screen3-desc{
        width:40%;
        margin:auto;
        margin-top:0px;
    }

    #screen3 .quality{
        position: absolute;
    }

    #screen3 #q1{
        top:-40px;
        left:20px;
        width:32%;
    }

    #screen3 #q2{
        top:200px;
        left:20px;
        width:32%;
    }

    #screen3 #q3{
        width:35%;
        top:-40px;
        right:10px;
        /* border:1px solid red; */
    }

    #screen3 #q3 .para{
        width:100%;
        /* border:1px solid red; */
        float:left;
        margin-left:1%;
        line-height:1.5;
        height:70px;
        /* font-size: .9em; */
    }

    #screen3 #q4{
        width:35%;
        right:10px;
        top:200px;
        /* border:1px solid red; */
    }

    #screen3 #whale1{
        width:80px;
        top:0px;
    }

    #screen3 #tree1_1{
        width:65px;
        top:40px;
        transform:translate(-200%,0);
    }

    #screen3 #saturn1{
        width:75px;
        height:75px;
        top:50px;
        left:50%;
        transform:translate(70%,0);
    }

    #screen3 #flowers_1{
        width:55px;
        top:100px;
        left:50%;
        transform:translate(-170%,0);
    }

    #screen3 #bird1_1{
        width:25px;
        top:130px;
        left:50%;
        transform:translate(200%,0);
    }

    #screen3 #mars_1{
        width:55px;
        height:55px;
        top:120px;
        left:50%;
        transform:translate(-270%,0);
    }

    #screen3 #tree3_1{
        width:45px;
        top:140px;
        left:50%;
        transform:translate(220%,0);
    }

    #screen3 #crab_1{
        width:45px;
        height:55px;
        top:190px;
        left:50%;
        transform:translate(-300%,0);
    }

    #screen3 #star1_1{
        width:15px;
        top:200px;
        left:50%;
        transform:translate(380%,0);
    }

    #screen3 #starfish1{
        width:40px;
        height:40px;
        top:210px;
        left:50%;
        transform:translate(250%,0);
    }

    #screen3 #star2_1{
        width:25px;
        top:230px;
        left:50%;
        transform:translate(-290%,0);
    }

    #screen3 #bird4_1{
        width:28px;
        top:255px;
        left:50%;
        transform:translate(130%,0);
    }

    #screen3 #earth1{
        width:55px;
        height:65px;
        top:275px;
        left:50%;
        transform:translate(170%,0);
    }

    #screen3 #turtle1{
        width:55px;
        height:55px;
        top:250px;
        left:50%;
        transform:translate(-260%,0);
    }

    #screen3 #shell3_1{
        width:35px;
        height:35px;
        top:360px;
        left:50%;
        transform:translate(-360%,0);
    }

    #screen3 #cactus1{
        width:50px;
        top:305px;
        left:50%;
        transform:translate(-190%,0);
    }

    #screen3 #fish1_1{
        width:60px;
        top:375px;
        left:50%;
        transform:translate(120%,0);
    }

    #screen3 #shell1_1{
        width:40px;
        height:40px;
        top:415px;
        left:50%;
        transform:translate(-280%,0);
    }

    #screen3 #star2_2{
        width:25px;
        top:400px;
        left:50%;
        transform:translate(-280%,0);
    }

    #screen3 #flowers_2{
        width:50px;
        top:425px;
        left:50%;
        transform:translate(180%,0);
    }

    #screen3 #jelly_1{
        width:60px;
        top:315px;
        left:50%;
        transform:translate(70%,0);
    }

    #screen3 #jupiter_1{
        width:40px;
        height:50px;
        top:500px;
        left:50%;
        transform:translate(240%,0);
    }

    #screen3 #dog1_1{
        width:70px;
        top:480px;
        left:50%;
        transform:translate(-220%,0);
    }

    #screen3 #tree2_1{
        display:none;
    }

    #screen3 #plant1{
        display:none;
    }
}

/* -------------------XL---------------------- */
/* -------------------XL---------------- */
/* Extra large devices (large desktops, 1200px and up) */
/* -------------------XL----------------- */
/* -------------------XL---------------------- */
@media (min-width: 1200px) {
    .sizeDisplay .XL{
        display:block;
    }


    .navbar-brand{
        /* border:1px solid red; */
        width:20%;
        margin-top:2%;
    }

    .navbar-brand img {
        width: 95%;
    }

    .navbar-nav{
        margin-left:5%;
        /* border:1px solid red; */
        width:100%;        
    }

    .nav-link{
        font-size: 1.5em;
        /* border:1px solid red; */
        /* margin-left:1%;
        margin-right:1%; */
      }

    .thumb{
        width:14%;
        margin:1%;
    }

    #make_in_india{
        /* position: absolute; */
        /* border:1px solid red; */
    }

    /* #make_in_india img
    {
        width:100px;
        height:auto;
    } */

    /* ---------------------------XL--animation--screen--1--------------------- */

    #screen1{
        min-height: 1000px;
    }

    #screen1 #silhouette{
        width:11%;
        margin-top:0px;
        margin-left:10%;
        /* max-width: 250px; */
        /* border:1px solid red; */
    }

    #screen1 #homeIntro h1, #screen1 #homeIntro .desc{
        width: 65%;
    }

    #screen1 #centrepeice{
        /* border:1px solid green; */
        float:left;
        width:60%;
         /* border:1px solid green; */
        margin:0px;
    }

    #screen1.active #landscape{
        width:370px;
        top:90px;
    }

    #screen1.active #tree{
        width:70px;
        top:105px;
        transform: translate(-170%, 0);
        /* left:230px; */
    }

    #screen1 #head{
        width:170px;
        top:200px;
        transform:translate(-60%,0);
    }

    #screen1 #leaf1{
        top:243px;
        transform:translate(-175%,0);
    }

    #screen1 #leaf2{
        top:250px;
        transform: translate(27%, 0);
    }

    #screen1 #advaita{
        /* border:1px solid red; */
        text-align: center;
        position:absolute;
        width:150px;
        top:370px;
        
        left:50%;
        transform: translate(-150%, 0);
    }

    #screen1 #advaita #advaita-hindi-text{
        font-size: 2.3em;
    }

    #screen1 #advaita #advaita-english-text{
        font-size: 2.4em;
        margin-top:-25px;
    }

    #screen1 #advaita #non-dualism{
        font-size: 2.4em;
        margin-top:-20px;
    }

    #screen1 #everything-is-one{
        /* border:1px solid red; */
        width:75%;
        top:420px;

        left:5%;
        transform: translate(7%, 0);

        font-size: 1.5em;
        line-height: .9em;
        text-align: center;
    }

    #screen1 #plant{
        width:60px;
        top:270px;
        transform: translate(-380%, 0);
    }

    #screen1.active #plant{
        opacity:1;
        top:250px;
    }

    #screen1 #cat{
        width:90px;
        top:190px;
        transform: translate(-370%, 0);
    }

    #screen1.active #cat{
        top:130px;
        opacity:1;
    }

    #screen1 #shooting-star{
        width:80px;
        top:95px;
        transform: translate(-300%, 0);
    }

    #screen1.active #shooting-star{
        opacity:1;
        top:55px;
    }

    #screen1 #moon{
        width:70px;
        top:35px;
        /* transform: translate(-250%, 0); */
    }

    #screen1.active #moon{
        opacity:1;
        top:5px;
        width:80px;
        top:-10px;
    }

    #screen1 #plant {
        width: 70px;
        top: 270px;
        transform: translate(-480%, 0);
    }


    #screen1 #sun{
        width:55px;
        top:25px;
        /* transform: translate(-250%, 0); */
    }

    #screen1.active #sun{
        opacity:1;
        top:15px;
    }

    #screen1 #saturn{
        width:60px;
        top:95px;
        transform: translate(240%, 0);
    }

    #screen1.active #saturn{
        opacity:1;
        top:75px;
    }

    #screen1 #dog{
        width:75px;
        top:145px;
        transform: translate(270%, 0);
    }

    #screen1.active #dog{
        opacity:1;
        top:125px;
    }

    #screen1 #thinking-man{
        width:65px;
        top:260px;
        transform: translate(350%, 0);
    }

    #screen1.active #thinking-man{
        top:240px;
        opacity:1;
    }

    #screen1 #bird1{
        width:35px;
        top:130px;
        transform: translate(-650%, 0);
    }

    #screen1 #bird2{
        width:40px;
        top:60px;
        transform: translate(-350%, 0);
    }

    #screen1 #fish{
        width:70px;
        top:200px;
        /* transform: translate(-350%, 0); */
    }

    #screen1 #screen1-desc{
        float:right;
        width:40%;
        /* border:1px solid blue; */
        padding:0px;
        margin-right:2%;
        margin-top:110px;
        /* text-align:center; */
    }


    /* ---------------------------XL--animation--screen--2--------------------- */

   #screen2{
       margin-top:80px;
   }

    #screen2 #vishnu{
        display:block;
        font-family: "amaticbold";
        font-size: 1.2em;
        text-align: center;
        padding:70px;
        line-height: 25px;
        letter-spacing: .05em;

        position: absolute;
        /* border:1px solid red; */
        top:-40px;
        left:50%;
        transform:translate(-50%,0);

        background-image: url(../images/home-anim-screen-2/vishnu.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    #screen2 #cage{
        left:270px;
        width:250px;
        top:150px;
    }

    #screen2 #bird1{   
        width:6%;
        top:280px;
        left:490px;

        animation-name: xl-bird1-fly;
        animation-duration: 8s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
    }

    #screen2 #bird2{
        
        width:6%;
        top:210px;
        left:50%;
        transform:translate(-50%,0);

        animation-name: xl-bird2-fly;
        animation-duration: 8s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
    }

    #screen2 #bird3{ 
        width:15%;
        top:130px;
        left:50%;
        transform:translate(40%,0);

        animation-name: xl-bird3-fly;
        animation-duration: 8s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
    }

    #screen2 #bird4{
        top:10px;
        width:15%;
        right:150px;

        animation-name: xl-bird4-fly;
        animation-duration: 8s;
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
    }


    #screen2 #sun{
        width:120px;
        top:120px;
        left:auto !important;
        right:60px !important;
    }

    #screen2 #flying-swan-1{
        animation-name: xl-swan1-fly;
        animation-duration: 8s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
    }
    
    #screen2 #flying-swan-1 #inner{
        /* border:1px solid red; */
        animation-name: xl-swan1-inner;
        animation-duration: 8s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
    }
    
    #screen2 #flying-swan-2{
        animation-name: xl-swan2-fly;
        animation-duration: 8s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
        animation-delay: 2.7s;
    }
    
    #screen2 #flying-swan-2 #inner{
        animation-name: xl-swan2-inner;
        animation-duration: 8s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
        animation-delay: 2.7s;
    }
    
    #screen2 #flying-swan-3{
        animation-name: xl-swan3-fly;
        animation-duration: 8s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
        animation-delay: 5.14s;
        /* border:1px solid red; */
    }
    
    #screen2 #flying-swan-3 #inner{
        animation-name: xl-swan3-inner;
        animation-duration: 8s;
        animation-timing-function: linear;
        animation-iteration-count:infinite;
        animation-delay: 5.14s;
    }

    #screen2 #left-chain{
        top:400px;
        left:160px;
    }

    #screen2 #right-chain{
        top:410px;
        left:470px;
    }

    #screen2 #avidya{
        top:435px;
        left:175px;
    }

    #screen2 #ignorance{
        font-size: 2.2em;
        top:450px;
        left:510px;
        transform:rotateZ(-5deg);
    }

    #screen2 #angry-man{
        width:40px;
        top:320px;
        left:140px;
    }

    #screen2 #crown{
        width:40px;
        top:375px;
        left:90px;
    }

    #screen2 #money{
        width:40px;
        top:425px;
        left:90px;
    }

    #screen2 #lust{
        width:40px;
        top:475px;
        left:130px;
    }

    /* ---------------------------XL--animation--screen--3--------------------- */

    #screen3 #q3{
        width:32%;
        top:-40px;
        right:10px;
        /* border:1px solid red; */
    }

    #screen3 #q3 .para{
        /* width:49%; */
        /* border:1px solid red; */
        float:left;
        margin-left:1%;
        line-height:1.5;
        height:70px;
        /* font-size: .9em; */
    }

    #screen3 #q4{
        width:32%;
        right:10px;
        top:200px;
    }

    #screen3 #tree1_1{
        width:65px;
        top:40px;
        transform:translate(-250%,0);
    }

    #screen3 #saturn1{
        width:75px;
        height:75px;
        top:50px;
        left:50%;
        transform:translate(120%,0);
    }

    #screen3 #flowers_1{
        width:65px;
        top:100px;
        left:50%;
        transform:translate(-170%,0);
    }

    #screen3 #bird1_1{
        width:35px;
        top:130px;
        left:50%;
        transform:translate(200%,0);
    }

    #screen3 #mars_1{
        width:55px;
        height:55px;
        top:120px;
        left:50%;
        transform:translate(-360%,0);
    }

    #screen3 #tree3_1{
        width:45px;
        top:140px;
        left:50%;
        transform:translate(380%,0);
    }

    #screen3 #crab_1{
        width:45px;
        height:55px;
        top:190px;
        left:50%;
        transform:translate(-420%,0);
    }

    #screen3 #star1_1{
        width:25px;
        top:200px;
        left:50%;
        transform:translate(380%,0);
    }

    #screen3 #starfish1{
        width:40px;
        height:40px;
        top:210px;
        left:50%;
        transform:translate(380%,0);
    }

    #screen3 #star2_1{
        width:35px;
        top:230px;
        left:50%;
        transform:translate(-290%,0);
    }

    #screen3 #bird4_1{
        width:38px;
        top:255px;
        left:50%;
        transform:translate(130%,0);
    }

    #screen3 #earth1{
        width:55px;
        height:65px;
        top:275px;
        left:50%;
        transform:translate(250%,0);
    }

    #screen3 #turtle1{
        width:55px;
        height:55px;
        top:250px;
        left:50%;
        transform:translate(-350%,0);
    }

    #screen3 #shell3_1{
        width:35px;
        height:35px;
        top:360px;
        left:50%;
        transform:translate(-520%,0);
    }

    #screen3 #jelly_1{
        width:70px;
        top:315px;
        left:50%;
        transform:translate(70%,0);
    }

    #screen3 #star2_2{
        width:35px;
        top:400px;
        left:50%;
        transform:translate(-280%,0);
    }

    #screen3 #cactus1{
        width:60px;
        top:305px;
        left:50%;
        transform:translate(-190%,0);
    }

    #screen3 #fish1_1{
        width:60px;
        top:375px;
        left:50%;
        transform:translate(220%,0);
    }

    #screen3 #shell1_1{
        width:40px;
        height:40px;
        top:415px;
        left:50%;
        transform:translate(-470%,0);
    }

    #screen3 #flowers_2{
        width:55px;
        top:425px;
        left:50%;
        transform:translate(180%,0);
    }

    #screen3 #jupiter_1{
        width:40px;
        height:50px;
        top:500px;
        left:50%;
        transform:translate(380%,0);
    }

    #screen3 #dog1_1{
        width:70px;
        top:480px;
        left:50%;
        transform:translate(-290%,0);
    }
}

/* ********************
********************
teachings page styles
********************
******************** */


h1{
    font-family: 'electronica_display_inlineRg';
    font-weight: bold;
    text-align: center;
    font-size: 1.8em;
    margin-top:35px;
}

h2{
    font-family: "source_sans_proitalic";
    font-size: 1em;
    margin:auto;
    text-align: justify;
    width:300px;
    margin-bottom: 50px;
}


.teaching{
    /* margin-top:20px; */
    /* border:1px solid red; */
}


.teaching .teaching-icon{
    /* border:1px solid red; */
    margin:auto;
    width: 100px;
    height:auto;
}

.teaching .teaching-icon img{
    width:100%;
    height:auto;
}

.teaching p {
    quotes: "“" "”" "‘" "’";
    font-family: "source_sans_proSBdIt";
    font-size: 1.2em;
    padding-left:40px;
    padding-right:40px;
    text-align: center;
    line-height: 25px;
    /* border:1px solid red; */

}

.teaching .hindi-text{
    font-family:"kruti_dev_710normal";
}

.teaching-divider{
    /* display:none; */
    margin-top:30px;
    margin-bottom:30px;
    /* border:1px solid red; */
}

.bottom-skyline{
    background-image: url(../images/bottom-skyline.png);
    width:100%;
    height:50px;
    /* border:1px solid red; */
    background-size: auto 100%;
    margin-top:30px;
}

@media (min-width: 576px) {
    .teaching p{
        padding-left:20%;
        padding-right: 20%;
    }
}

@media (min-width: 992px) {

    h2{
        width:50%;
    }

    .teaching{
        margin-top:0px;
        /* border:1px solid green; */
        width:50%;
        margin:auto;
        margin-top:30px;
        position: relative;
        border:2px solid rgba(0,0,0,0.2);
        border-radius : 15px;
        padding:10px;
        height:150px;
    }

    .teaching.left{
        margin-left:5%;
        /* border:1px solid red; */
    }

    .teaching.right{
        margin-left:45%;
        /* border:1px solid red; */
    }

    .teaching .teaching-icon{
        position: absolute;
        top:50%;
        left:3%;
        transform:translate(0,-50%);
        width:16%;
        /* border:1px solid yellow; */
    }

    .teaching p{
        /* border:1px solid red; */
        position: absolute;
        text-align: left;
        padding:0;
        top:50%;
        left:22%;
        transform:translate(0,-50%);
        width:75%;
    }

    .teaching:after{
        content:"";
        display:block;
        clear:both;
        /* border:1px solid #000; */
        width:100%;
    }

    .teaching-divider{
        display:none;
        margin-top:10px;
        margin-bottom:10px;
        /* border:1px solid red; */
    }

    .bottom-skyline{
        margin-top:100px;
    }
}

/* *********************
CONTENT PAGE STYLES - 
why vital,
vital for homes,
***********************/

#bio .para{
    font-family: "red_hat_textregular";
    font-size: 1em;
    margin:auto;
    text-align: justify;
    width:80%;
    margin-top: 80px;
}

#bio .paracentre{
    font-family: "red_hat_textregular";
    font-size: 1em;
    margin:auto;
    text-align: justify;
    width:80%;
    margin-top: 40px;
}

#bio .para .para-icon{
    /* margin:auto;
    width:130px; */
    height:180px;
    position: relative;
    margin-bottom: 25px;
}

#bio .paracentre .para-icon{
    /* margin:auto;
    width:130px; */
    position: relative;
    margin-bottom: 35px;
}

#bio .para .para-icon img{
    width:180px;
    height:auto;
    position: absolute;
    left:50%;
    transform:translate(-50%,0);
}

#bio .paracentre .para-icon img{
    width:100%;
    height:auto;
}

@media (min-width: 992px) {

    #bio .para{
        /* border:1px solid blue; */
        width:97%;
        margin-top: 100px;
        margin-bottom: 100px;
        position: relative;
    }

    #bio .paracentre{
        /* border:1px solid blue; */
        width:60%;
        margin-top: 60px;
        margin-bottom: 100px;
        position: relative;
    }

    #bio .para .para-icon{
        /* border:1px solid red; */
        width:40%;

        position: absolute;
        left:5%;
        top:0px;
        bottom:0px;
    }



    #bio .para.right .para-icon{
        left:auto;
        right:5%;
    }

    

    #bio .para .para-icon img{
        top:50%;
        transform:translate(-50%,-50%);
        width:280px;
    }



    #bio .para.left p{
        /* border:1px solid green; */
        float:right;
        width:40%;
        margin-right:5%;
    }

    #bio .para.right p{
        float:left;
        width:40%;
        margin-left:5%;
        margin-right: auto;
    }

    #bio .para ul{
        width:40%;
    }

    #bio .para.left ul{
        float:right;
        margin-right:5%;
    }
}

/* *******************
anecdote page style
******************* */
.card{
    margin-bottom: 40px;
}

.card-title{
    font-family: "source_sans_proSBdIt";
    font-size: 1em;
}

.card-text{
    font-family: "source_sans_proitalic";
}

.card a{
    float:right;
    font-family: "source_sans_proitalic";
}

.modal-title{
    font-family: 'amaticbold';
    font-size: 2em;
}

.modal-body{
    font-family: "source_sans_proitalic";
    text-align: justify;
}

#anecdoteModal .modalImage{
    width:250px;
    height:250px;
    margin:auto;
    border:4px solid #eee;
    border-radius: 50%;
    margin-bottom:30px;
}

/* ***************************
trailanga swami and baba keenaram page styles
*************************** */
#knr #keenaram_pic{
    background-image: url(../images/baba-keenaram.jpg);
    background-size: cover;
    background-position: center;
    width:250px;
    height:250px;
    margin:auto;
    margin-top:20px;
    margin-bottom: 20px;
    border-radius: 5%;
    border:5px solid #d8cece;
}

#knr p{
    font-family: "source_sans_proitalic";
}

/* ***************************
trailanga swami and ramkrishna paramahansa page styles
*************************** */

#adv #ramkrishna_pic{
    background-image: url(../images/trailanga-swami-and-ramkrishna-paramahansa.jpeg);
    background-size: cover;
    background-position: center;
    width:250px;
    height:250px;
    margin:auto;
    margin-top:20px;
    margin-bottom: 20px;
    border-radius: 5%;
    border:5px solid #d8cece;
}

#adv .shortDesc{
    margin-top:65px;
    width:90%;
    font-family: "source_sans_proSBdIt";
}

#adv p{
    font-family: "source_sans_proitalic";
}

#adv li{
    font-family: "source_sans_proitalic";
}

#adv .card{
    margin-bottom:0px;
}

#adv .card h2{
    width:auto;
    font-size: 1.7em;
}

#adv .card h2{
    font-family: "source_sans_proSBdIt";
}

#adv .accordion{
    margin-bottom: 80px;
}




/* ***************************
advaita vedanta page styles
*************************** */

#adv #shankaracharya_pic{
    background-image: url(../images/shankaracharya.jpg);
    background-size: contain;
    background-position: center;
    width:250px;
    height:250px;
    margin:auto;
    margin-top:20px;
    margin-bottom: 20px;
    border-radius: 50%;
    border:5px solid #d8cece;
}

#adv .shortDesc{
    margin-top:65px;
    width:90%;
    font-family: "source_sans_proSBdIt";
}

#adv p{
    font-family: "source_sans_proitalic";
}

#adv li{
    font-family: "source_sans_proitalic";
}

#adv .card{
    margin-bottom:0px;
}

#adv .card h2{
    width:auto;
    font-size: 1.7em;
}

#adv .card h2{
    font-family: "source_sans_proSBdIt";
}

#adv .accordion{
    margin-bottom: 80px;
}

/* *****************************
shankari mai jiew page styles
*******************************/

#smj #shankari_mai_pic{
    background-image: url(../images/smj.jpg);
    background-size: contain;
    background-position: center;
    width:250px;
    height:250px;
    margin:auto;
    margin-top:20px;
    margin-bottom: 20px;
    border-radius: 50%;
    border:5px solid #d8cece;
}

#smj #shankari_mai_pic2{
    background-image: url(../images/smj2.jpg);
    background-size: contain;
    background-position: center;
    width:250px;
    height:250px;
    margin:auto;
    margin-top:20px;
    margin-bottom: 20px;
    border-radius: 50%;
    border:5px solid #d8cece;
}

#smj #shankari_mai_pic3{
    background-image: url(../images/smj3.jpg);
    background-size: contain;
    background-position: center;
    width:250px;
    height:250px;
    margin:auto;
    margin-top:20px;
    margin-bottom: 20px;
    border-radius: 50%;
    border:5px solid #d8cece;
}

#smj .shortDesc{
    margin-top:65px;
    width:90%;
    font-family: "source_sans_proSBdIt";
}

#smj p{
    font-family: "source_sans_proitalic";
}

#smj .card{
    margin-bottom:0px;
}

#smj .card h2{
    width:auto;
    font-size: 1.7em;
}

#smj .card h2{
    font-family: "source_sans_proSBdIt";
}

#smj .accordion{
    margin-bottom: 80px;
}

@media (min-width: 576px) {
    #smj #shankari_mai_pic{
        width:400px;
        height:400px;
    }

    #smj #shankari_mai_pic2{
        width:400px;
        height:400px;
    }

    #smj #shankari_mai_pic3{
        width:400px;
        height:400px;
    }
}

@media (min-width: 992px) {

    #smj #shankari_mai_pic{
        width:30%;
        height:400px;
        float:left;
        margin-left: 2.5%;
    }

    #smj #shankari_mai_pic2{
        width:30%;
        height:400px;
        float:left;
        margin-left: 2.5%;
        margin-right: 2.5%;
    }

    #smj #shankari_mai_pic3{
        width:30%;
        height:400px;
        float:left;
        margin-right: 2.5%;
    }
}

/* ***********************
resources page styles
************************/
#resources .card{
    border-radius:15px;
    font-family:"source_sans_proitalic";
}

#resources .cardHeader{
    height:70px;
    background-color:#333;
    color:#fff;
    line-height:70px;
    text-align:center;
    border-top-left-radius:15px;
    border-top-right-radius:15px;
    font-family : "amaticbold";
    font-size:2em;
    letter-spacing:.1em;
}

#resources .card a{
    display:block;
    float:none;
    margin-bottom:15px;
    text-transform:uppercase;
    font-size:1.05em;
}

#resources .divider{
    width:80px;
    margin:auto;
    margin-top:20px;
    margin-bottom:20px;
}

#resources .divider img{
    width:100%;
    height:auto;
}

/* *******************
contact page styles
******************* */
#contact h3{
    font-family: "source_sans_proitalic";
    font-size: 1em;
    padding-left:5%;
    padding-right:5%;
    text-align: justify;
}

#contact #form-body{
    width:90%;
    margin:auto;
    margin-top:40px;
}

#contact label{
    font-family: "source_sans_proSBdIt";
}

#contact .btn{
    width:100%;
}

#contact #spinner{
    text-align: center;
    font-size: 2.2em;
    display:none;
}

.form-control.error{
    border-color: red;
}

#contact .errorSpan{
    color:red;
    font-family: "source_sans_proSBdIt";
    padding-left: 10px;
}

.postSubmitMessage{
    width:90%;
    max-width:600px;
    margin:auto;
    text-align: justify;
    margin-top: 15%;
    border:1px solid #999;
    border-radius: 15px;
    padding:30px;
}

.postSubmitMessage .messageHeader{
    font-family: "amaticbold";
    font-size: 2.6em;
    text-align: center;
}

.postSubmitMessage .messageText{
    font-family: "source_sans_proSBdIt";
    font-size: 1em;
    text-align: center;
}

#contactForm.submitAnim{
    animation: contact_form_anim_half 1s 1;
    animation-fill-mode: forwards;
}

/* **********************************************
ashtakam page styles
*************************************************/

.ashtakam{
    /* border:1px solid red; */
    margin-top:50px;
}

.ashtakam-num{
    /* border:1px solid red; */
    margin:auto;
    width: 80px;
    height:80px;
    line-height:80px;
    border-radius: 50%;
    font-family: "source_sans_probold_italic";
    font-size: 2.1em;
    text-align: center;
    border: 5px solid #d8cece;
    background-color: #272727;
    color:#fff;
    margin-bottom : 20px;
}

.ashtakam .teaching-icon img{
    width:100%;
    height:auto;
}

.ashtakam p {
    quotes: "“" "”" "‘" "’";
    font-family: "source_sans_proSBdIt";
    font-size: 1em;
    padding-left:8px;
    padding-right:8px;
    text-align: center;
    line-height: 25px;
    /* border:1px solid red; */
}

.ashtakam .hindi-text{
    margin-bottom:20px;
    font-family:"kruti_dev_714normal";
    font-size: 1.6em;
    line-height:1.2em;

}

.ashtakam-divider{
    /* display:none; */
    margin-top:30px;
    margin-bottom:30px;
    /* border:1px solid red; */
}


@media (min-width: 576px) {
    .ashtakam p{
        padding-left:20%;
        padding-right: 20%;
    }
}

@media (min-width: 992px) {

    

    .bottom-skyline{
        margin-top:100px;
    }
}

/* *****************************
acknowledgements page styles
*******************************/

#ack .bio{
    /* border:1px solid red; */
    font-family: "source_sans_proSBdIt";
    text-align: center;
}

#ack h2{
    /* border:1px solid red; */
    width:70%;
    text-align: center;
}

#ack .bio .ack_name{
    font-size: 1.2em;
}

#ack .bio .ack_title{
    font-size: .9em;
}

#ack .bio .ack_org{
    font-size: .9em;
}

#ack #swami_shubhrananda_pic{
    background-image: url(../images/swami_shubhrananda.jpeg);
    background-size: contain;
    background-position: center;
    width:250px;
    height:250px;
    margin:auto;
    margin-top:20px;
    margin-bottom: 20px;
    border-radius: 50%;
    border:5px solid #d8cece;
}

#ack #db_rai_pic{
    background-image: url(../images/db_rai.jpeg);
    background-size: contain;
    background-position: center;
    width:250px;
    height:250px;
    margin:auto;
    margin-top:20px;
    margin-bottom: 20px;
    border-radius: 50%;
    border:5px solid #d8cece;
}

#ack #ajit_shrivastava_pic{
    background-image: url(../images/ajit_shrivastava.jpeg);
    background-size: contain;
    background-position: center;
    width:250px;
    height:250px;
    margin:auto;
    margin-top:20px;
    margin-bottom: 20px;
    border-radius: 50%;
    border:5px solid #d8cece;
}


#ack .shortDesc{
    margin-top:65px;
    width:90%;
    font-family: "source_sans_proSBdIt";
}

#ack p{
    font-family: "source_sans_proitalic";
}



@media (min-width: 576px) {

    #ack .bio{
        
    }

    #ack #swami_shubhrananda_pic{
        width:400px;
        height:400px;
    }

    #ack #db_rai_pic{
        width:400px;
        height:400px;
    }

    #ack #ajit_shrivastava_pic{
        width:400px;
        height:400px;
    }
}

@media (min-width: 992px) {

    #ack .bio{
        float:left;
        margin-left: 1%;
        margin-right: 1%;
        width : 31%;
    }

    #ack #swami_shubhrananda_pic{
        width:95%;
        height:400px;
    }

    #ack #db_rai_pic{
        width:95%;
        height:400px;
        
    }

    #ack #ajit_shrivastava_pic{
        width:95%;
        height:400px;
    }
}