index.html

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- ========== Meta Tags ========== -->
    
    <meta name="description" content="Tedx MITAOE official Website">
    <meta name="keywords" content="TEDx,TEDxMITAOE,TEDxMITAOe,TEDx,TEDxMITAOE ,MITAOETEDX">
    <meta name="author" content="Web Team  TEDxMITAOE">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- ========== Title ========== -->
    <title>TEDxMITAOE</title>
    <link rel="shortcut icon" href="assets/img/transp logo white below.png" type="image/x-icon">
    <!-- ========== Favicon Ico ========== -->
    <!--<link rel="icon" href="fav.ico">-->
    <!-- ========== STYLESHEETS ========== -->
    <!-- Bootstrap CSS -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Fonts Icon CSS -->
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/et-line.css" rel="stylesheet">
    <link href="assets/css/ionicons.min.css" rel="stylesheet">
    <!-- Carousel CSS -->
    <link href="assets/css/owl.carousel.min.css" rel="stylesheet">
    <link href="assets/css/owl.theme.default.min.css" rel="stylesheet">
    <!-- Animate CSS -->
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <!-- Custom styles for this template -->
    <link href="assets/css/main.css" rel="stylesheet">
    <script async>(function(w, d) { w.CollectId = "5dfbadbed66bd24b6228f872"; var h = d.head || d.getElementsByTagName("head")[0]; var s = d.createElement("script"); s.setAttribute("type", "text/javascript"); s.setAttribute("src", "https://collectcdn.com/launcher.js"); h.appendChild(s); })(window, document);</script>

  <!-- Animation  -->
  <link rel="stylesheet" href="./sal.js/dist/sal.css">
</head>
<style>
    
    
html{
    scroll-behavior: smooth;
}
body{
    overflow-x:hidden;
}

.celebrating{
    margin-top: 160px;;
}
.arrow {
  text-align: center;
  margin: 8% 0;
}
.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
.icon-bar {
  float: right;
}

.icon-bar a {
display: block;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
.icon-bar a i:hover {
font-size:40px;

}
.socialgrid{
    margin-top: 50px;;
}


 #linkedin{
  border: solid 1px #e62b1e;
  display: block;
  border-radius: 50px;
  padding: 7px 0;
  font-size: 24px;
  color: #e62b1e;
  width: 40px;
  height: 40px;
  text-align: center;
}
 #linkedin:hover {
  background-color: #e62b1e;
  color: #ffffff;
}

#facebook{
  border: solid 1px #e62b1e;
  display: block;
  border-radius: 50px;
  padding: 7px 0;
  font-size: 24px;
  color: #e62b1e;
  width: 40px;
  height: 40px;
  text-align: center;
}
 #facebook:hover {
  background-color: #e62b1e;
  color: #ffffff;
}

#twitter{
  border: solid 1px #e62b1e;
  display: block;
  border-radius: 50px;
  padding: 7px 0;
  font-size: 24px;
  color: #e62b1e;
  width: 40px;
  height: 40px;
  text-align: center;
}
 #twitter:hover {
  background-color: #e62b1e;
  color: #ffffff;
}

footer ul.instagram_list {
  padding: 0;
  margin: 0;
  list-style: none;
}
footer ul.instagram_list li {
  display: inline-block;
  width: 30%;
  margin: 0 0 2% 2%;
  float: left;
}
footer .newsletter_form .form-control {
  background-color: #1f1039;
  border: solid 1px #1f1039;
  font-weight: 500;
  color: #ffffff;
}
.logoad{
    width: 380px;;
}
#demo{
    font-size: 53px;
}
.celebrating #enter{
    font-size: 50px;
}
.cover_slider .cover_item {
  width: 100%;
  position: relative;
  height: 100vh;
  background: url('img/website.gif');
  min-height: 600px;
  padding: 150px 0;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}   


.spe{
    margin-left:90px;
}
.speimg{
    margin-top: 10px;
    width:280px;
}
.soc{
    margin-left: 310px;
    margin-top: 30px;;
}


#facebook{
        transition: transform .2s;
    }
    #facebook:hover{
        -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5);
  background: #3b5998;
  border:  #3b5998;;
  color: white;


    }
    #twitter{
        transition: transform .2s;
    }
    #twitter:hover{
        -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5);
  background: #00acee;
  border: #00acee;
  
  color: white;
    }
    #insta{
        transition: transform .2s;
    }
    #insta:hover{
        -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5);
  background: orangered;
  border: orangered;
  color: white;
    }


    #link{
  border: solid 1px #e62b1e;
  display: block;
  background-color: #e62b1e;
  border-radius: 50px;
  padding: 7px 0;
  font-size: 24px;
  color:white;
  width: 40px;
  height: 40px;
  text-align: center;
}
#link:hover {
    color: #e62b1e;
  color: #ffffff;
}
#face{
  border: solid 1px #e62b1e;
  display: block;
  background-color: #e62b1e;
  border-radius: 50px;
  padding: 7px 0;
  font-size: 24px;
  color:white;
  width: 40px;
  height: 40px;
  text-align: center;
}
#face:hover {
    color: #e62b1e;
  color: #ffffff;
}
#twit{
  border: solid 1px #e62b1e;
  display: block;
  background-color: #e62b1e;
  border-radius: 50px;
  padding: 7px 0;
  font-size: 24px;
  color:white;
  width: 40px;
  height: 40px;
  text-align: center;
}
#twit:hover {
    color: #e62b1e;
  color: #ffffff;
}

#inst{
  border: solid 1px #e62b1e;
  display: block;
  background-color: #e62b1e;
  border-radius: 50px;
  padding: 7px 0;
  font-size: 24px;
  color:white;
  width: 40px;
  height: 40px;
  text-align: center;
}
#inst:hover {
    color: #e62b1e;
  color: #ffffff;
}
#buysp:hover{
    border: 2px solid black;
    color: black;
}

    #linke{
        transition: transform .2s;
    }
    #link:hover{
        -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5);
  background: #0e76a8;
  border: #0e76a8;
    }
    #face{
        transition: transform .2s;
    }
    #face:hover{
        -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5);
  background: #3b5998;
  border:  #3b5998;;
  color: white;


    }
    #twit{
        transition: transform .2s;
    }
    #twit:hover{
        -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5);
  background: #00acee;
  border: #00acee;
  
  color: white;
    }
    #inst{
        transition: transform .2s;
    }
    #inst:hover{
        -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5);
  background: orangered;
  border: orangered;
  color: white;
    }

    
    #facebook{
        transition: transform .2s;
    }
    #facebook:hover{
        -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5);
  background: #3b5998;
  border:  #3b5998;;
  color: white;
    }
    
    .gmail:hover{
         color: #D44638;
    }
    
    #twitter{
        transition: transform .2s;
    }
    #twitter:hover{
        -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5);
  background: #00acee;
  border: #00acee;
  
  color: white;
    }
    #insta{
        transition: transform .2s;
    }
    #insta:hover{
        -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5);
  background: orangered;
  border: orangered;
  color: white;
    }
    
    
    #myBtn {
  display: none;
  position: fixed;
  bottom: 80px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color:black;
}
    /* Css for the Timer */


    .myclass{
            overflow: hidden;
            height: 100%;
            font-family: tahoma;
            color: #111;
            display: flex;
            flex-direction: row;
            align-items: center;
            align-content: center;
            justify-content: center;

        }

        .containern{
            width: 100px;
            perspective: 1000px;
            margin-left: 25px;
        }

        .cube{
            margin: auto;
            position: relative;
            width: 100px;
            height: 100px;
            transform-style: preserve-3d;
            transition: transform 2s ease;
            margin-left: 10px;
        }

        .cube:hover{
            transform: rotateX(180deg) rotateY(720deg);
        }

        .side{
            position: absolute;
            width: 100px;
            height: 100px;
            text-transform: uppercase;
            text-align: center;
        }

        .side.back{
            transform: translateZ(-50px) rotateX(180deg);
        }


        .side.left{
            transform: translateX(-50px) rotateY(-90deg);
        }

        .side.right{
            transform: translateX(50px) rotateY(90deg);
        }

        .side.front{
            transform: translateZ(50px);
        }

        .side.top{
            transform: translateY(-50px) rotateX(90deg);
        }

        .side.bottom{
            transform: translateY(50px) rotateX(90deg);
        }

        .side .t1{
            margin: 30% auto;
            margin-top: 20%;
            vertical-align: middle;
            font-size: 42px;
        }

        .side.grey{
            color:white;
            background-color: red;
        }

        .side.black{
            color: white;
            background-color: black;
        }

        .t2{
            font-size: 10px;
        }


        .icon-bar {
    margin-left: 95%;
    margin-right: 10%;
      position: fixed;
      top: 50%;
      /* position: absolute; */
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }
    
    .icon-bar a {
      display: block;
      text-align: center;
      padding: 16px;
      transition: all 0.3s ease;
      color: black;
      /* background: black; */

      font-size: 20px;
    }

    
    .facebook:hover {
      
      background: white;
      color: #3B5998;
    }
        
    .twitter:hover {
      background: white ;
      color: #55ACEE;
    }
    
    .google:hover {
      background: white;
      color: #dd4b39;
    }
        
  #bookticket{
    transition: transform .2s;
  } 
  #bookticket:hover{
    -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.1);
  } 

@media screen and (max-width:600px){
        html, body
    {
    width: 100%;
    scroll-behavior: smooth;
    }
        .icon-bar {
    
        display:None;
        
        } 
    .cover_item
    {
            width:100%;
        
    }
    .navbar 
    {
        width:360px;
    }
    #myBtn
    {
        margin-right:10%;
    }
    .navbar-toggler
    {
        margin-right:15%;
        
    }
    
    #headernav
    {
        margin-right:10%;
    }
    .logoad{
    width: 210px;;
}
#demo{
    font-size: 35px;
}
.celebrating #enter{
    font-size: 32px;
}

.cover_slider .cover_item {
    width:652px;
}
.containern{
            width: 80px;
            perspective: 1000px;
            margin-left: 0px;
        }

     .cube{
        margin-left: 0px;;
        }
        .icon-bar {
            display: none;
        }
.footerr{
    width:642px;
}
.header {
  width:656px;
}
..navbar-toggler {
    margin-left:170px;
}
}

    /* Css timer end Here */
    @media screen and (max-width:414px){
    html, body
    {
    width: 100%;
    }    


    #iii1{
        width: 100%;
    }
    
    #iii2{
        width: 100%;
    }
    
    #iii3{
        width: 100%;
    }
    
    #iii4{
        width: 100%;
    }
    
    #iii5{
        width: 100%;
    }
    
    #iii6{
        width: 100%;
    }
    
    #iii7{
        width: 100%;
    }
    
.spe{
    margin-left:0px;
}

        
        .logoad{
    width: 190px;;
}
#demo{
    font-size: 25px;
}
.celebrating #enter{
    font-size: 22px;
}

.cover_slider .cover_item {
    width: 430px;;
}
.containern{
            width: 80px;
            perspective: 1000px;
            margin-left: 0px;
        }

     .cube{
        margin-left: 0px;
        }
    }

    @media only screen and (max-width: 768px) {
  /* For mobile phones: */
    .icon-bar {
    
        display:None;
        
        } 
    
    body
    {
      width:100%;
    }
  [class*="col-"] {
    width: 100%;
    
      
  }
  .container
    {
        width:100%;
    } 
        
     .cover_item
    {
            width:100%;
        
    }
    
       #myBtn
    {
        margin-right:10%;
    }
    .navbar-toggler
    {
        margin-right:15%;
        
    }
     
    
}
    
    
    @media only screen and (max-width: 412px) {
  /* For mobile phones: */
    html,body
    {
       
        scroll-behavior: smooth;
        width:100%;
        overflow-x:hidden;
        
    }

    .mypara{
        margin-left: 1%;
        margin-right: 1%;
    }

    .containern
    {
        margin: 10px;
    }

    #iii1{
        width: 100%;
    }
    
    #iii2{
        width: 100%;
    }
    
    #iii3{
        width: 100%;
    }
    
    #iii4{
        width: 100%;
    }
    
    #iii5{
        width: 100%;
    }
    
    #iii6{
        width: 100%;
    }
    
    #iii7{
        width: 100%;
    }

.spe{
    margin-left:0px;
}

    .speaker_box
    {
        overflow-x:hidden;    
    }
    body{
    
    }
    
    .container .
    {
        
    }
    .icon-bar {
    
        display:None;
        
        }     
   .section_title
    {  
        width:100%;
       
    } 
           .cover_slider .cover_item {
    height: 60vh;
    min-height: 670px;
}
.cover_slider{
    height: 680px;
}   
        
    .cover_slider .cover_item {
    width: 100%;
}  
/*  
.cover_slider{
    height: 585px;
} */
    .header
    {
    width:100%;
    
        
    }
    .footerr{
    width:100%;
}

  [class*="col-"] {
    width: 100%;
    
      
  }
  .container
    {
        width:100%;
        
       
    } 
        
     .cover_item
    {
            width:100%;
            
            
    }
    
       #myBtn
    {
        margin-right:3px;
    }
    .navbar-toggler
    {
        margin-right:10%;
        
    }
     
    
}

    @media screen and (max-width:375px){
     html, body
    {
    
    width: 375px;
    
    }

    .mypara{
        margin-left: 1%;
        margin-right: 1%;
    }
    
    .containern
    {
        margin: 10px;
    }

    #iii1{
        width: 100%;
    }
    
    #iii2{
        width: 100%;
    }
    
    #iii3{
        width: 100%;
    }
    
    #iii4{
        width: 100%;
    }
    
    #iii5{
        width: 100%;
    }
    
    #iii6{
        width: 100%;
    }
    
    #iii7{
        width: 100%;
    }
    
.spe{
    margin-left:0px;
}
     
     .icon-bar {
    
        display:None;
        
        } 
      
    
     .cover_item
    {
            width:100%;
        
    }
       #myBtn
    {
        margin-right:10%;
    }
    .navbar-toggler
    {
        margin-right:15%;
        
    }
     
       
    .logoad{
    width: 170px;;
}
#demo{
    font-size: 25px;
}
.celebrating #enter{
    font-size: 22px;
}

.cover_slider .cover_item {
    width: 410px;
}
/*         
.cover_slider{
    height: 575px;
} */
.footerr{
    width:410px;
}
.header {
  width:410px;
}
.containern{
            width: 80px;
            perspective: 1000px;
            margin-left: 0px;
        }

     .cube{
        margin-left: 0px;;
        }
    }

    @media screen and (max-width:360px){
    
    html, body
    {

       
        scroll-behavior: smooth;
        width:100%;
        overflow-x:hidden;
        
    }


    .containern
    {
        margin: 10px;
    }


    .mypara{
        margin-left: 1%;
        margin-right: 1%;
    }


    #iii1{
        width: 100%;
    }
    
    #iii2{
        width: 100%;
    }
    
    #iii3{
        width: 100%;
    }
    
    #iii4{
        width: 100%;
    }
    
    #iii5{
        width: 100%;
    }
    
    #iii6{
        width: 100%;
    }
    
    #iii7{
        width: 100%;
    }
    
.spe{
    margin-left:0px;
}


    .icon-bar {
    
        display:None;
        
        } 
    .cover_item
    {
            width:100%;
        
    }
    .navbar 
    {
        width:360px;
    }
    #myBtn
    {
        margin-right:5px;
    }
    .navbar-toggler
    {
        margin-right:15%;
        
    }
    #headernav
    {
        margin-right:10%;
    }
    .logoad{
    width: 210px;;
}
#demo{
    font-size: 25px;
}
.celebrating #enter{
    font-size: 22px;
}

.cover_slider .cover_item {
    width:360px;
}
        
/*  
.cover_slider{
    height: 565px;
} */
        
.containern{
            width: 80px;
            perspective: 1000px;
            margin-left: 0px;
        }

     .cube{
        margin-left: 0px;;
        }
        .icon-bar {
            display: none;
        }
.footerr{
    width:442px;
}
.header {
  width:442px;
}
.navbar-toggler {
    margin-left:170px;
}
.ruless{
    width:50px;
}

}

/* Iphone 4 Code */
@media screen and (max-width:360px){
    .navbar-toggler {
    margin-left:240px;
    margin-top: 0px;
}
    
   
.logoad{
    width: 170px;;
    position: absolute;
}
#licensefooter{
    width: 40%;
    margin-top: 40px;
    margin-left: 0px;
}
.speimg img{
    width: 140px;
}
.soc{
    margin-left: 240px;
}
.soc a{
    font-size: 11px;
}

#twit{
    display: none;
}
    
.cover_slider .cover_item {
    height: 60vh;
    min-height: 530px;
}
.cover_slider{
    height: 528px;
}
    .celebrating{
    margin-top: 110px;;
}

}
/* Iphone Code End Here */

div#myModal {
    background: black;
}


</style>
<body onload="typeWriter()">
    
    <div class="icon-bar">
        <a href="https://bit.ly/tedxmitaoefb" class="facebook"><i class="fa fa-facebook"></i></a>
        <a href="https://bit.ly/tedxmitaoetwitter" class="twitter"><i class="fa fa-twitter"></i></a>
        <a href="https://bit.ly/tedxmitaoeinsta" class="google"><i class="fa fa-instagram"></i></a>
        <a href="mailto:tedx@mitaoe.ac.in" class="gmail"><i class="fa fa-google"></i></a>
    </div>


<div class="loader">
    <div class="loader-outter"></div>
    <div class="loader-inner"></div>
</div>
<!--header start here -->
<div class="header1">
    </div>
<header class="header navbar fixed-top navbar-expand-md">
    <div class="container">
    
        <a class="logoad" href="#">
            <img  src="assets/img/logo.png" alt="Evento"/>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#headernav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="lnr lnr-text-align-right"></span>
        </button>
        <div class="collapse navbar-collapse flex-sm-row-reverse" id="headernav" >
            <ul class=" nav navbar-nav menu">
                <li class="nav-item">
                    <a class="nav-link active" href="index.html">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link " href="#sperker">Speaker</a>
                </li>
               
                <li class="nav-item">
                    <a class="nav-link " href="sponsor.html">Sponsors</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link " href="team.html">Team</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link " href="mailto:tedx@mitaoe.ac.in">Contact</a>
                </li>
                
            </ul>
        </div>
    </div>
</header>
</div>
<!--header end here-->

<button onclick="topFunction()" id="myBtn" title="Go to top">
    <i class="fa fa-level-up" aria-hidden="true"></i>
</button>
<!--cover section slider -->
<section id="home" class="home-cover">
    <div class="cover_slider owl-carousel owl-theme">
       
        <div class="cover_item"  >
            <div class="celebrating">
                <center>
                    <h1 id="demop" style="color:red;">
                        Celebrating
                        <a href="" id="enter" style="color:white;;font-weight: 700;"  class="typewrite" data-period="2000" data-type='[ "Technology", "Entertainment", "Design", "Ideas","Momentum" ]'>
                            <span class="wrap"></span>
                        </a>
                    </h1>
                    <h5 style="color:white">18<sup>th</sup> January, 2020 - Pune</h5>
                    <script>
                        var TxtType = function(el, toRotate, period) {
                            this.toRotate = toRotate;
                            this.el = el;
                            this.loopNum = 0;
                            this.period = parseInt(period, 10) || 2000;
                            this.txt = '';
                            this.tick();
                            this.isDeleting = false;
                        };
                        TxtType.prototype.tick = function() {
                            var i = this.loopNum % this.toRotate.length;
                            var fullTxt = this.toRotate[i];
                            if (this.isDeleting) {
                                this.txt = fullTxt.substring(0, this.txt.length - 1);
                            } else {
                                this.txt = fullTxt.substring(0, this.txt.length + 1);
                            }
                            this.el.innerHTML = '<span class="wrap">' + this.txt + '</span>';
                            var that = this;
                            var delta = 200 - Math.random() * 100;
                            if (this.isDeleting) {
                                delta /= 2;
                            }
                            if (!this.isDeleting && this.txt === fullTxt) {
                                delta = this.period;
                                this.isDeleting = true;
                            } else if (this.isDeleting && this.txt === '') {
                                this.isDeleting = false;
                                this.loopNum++;
                                delta = 500;
                            }
                            setTimeout(function() {
                                that.tick();
                            }, delta);
                        };
                        window.onload = function() {
                            var elements = document.getElementsByClassName('typewrite');
                            for (var i = 0; i < elements.length; i++) {
                                var toRotate = elements[i].getAttribute('data-type');
                                var period = elements[i].getAttribute('data-period');
                                if (toRotate) {
                                    new TxtType(elements[i], JSON.parse(toRotate), period);
                                }
                            }
                            // INJECT CSS
                            var css = document.createElement("style");
                            css.type = "text/css";
                            css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
                            document.body.appendChild(css);
                        };
                    </script>
                </center>
               <center>
                <a href="https://www.townscript.com/e/tedxmitaoe-323323" id="bookticket"  class=" btn btn-primary btn-rounded" >
                    Buy Tickets Now
                </a>
               </center>
            </div>
        </div>
    </div>
    <div class="cover_nav">
        <ul class="cover_dots">

            <div class="arrow bounce">
                <a class="fa fa-arrow-down fa-2x" style="color: #e62b1e;" href="#downs"></a>
              </div>

          
        </ul>
    </div>
</section>
<!--cover section slider end -->

<!--about the event -->
<section class="pt100 pb100" id="downs">
    <div class="container">
        <div class="section_title" data-sal="slide-up" data-sal-delay="500" data-sal-easing="ease-out-bounce" data-sal-duration="1000">
             
            <h3 style="height: 30px;border-left: 4px solid #e62b1e; position: absolute;" class="title">

            </h3>
            <h3 >
                &nbsp;  &nbsp; Momentum
            </h3>
        </div><br><br>
        <div class="row justify-content-center mypara">
             <p>
            Momentum, that drive the world keeps talking about. The energy, the force, the strength, the thrust that motivates us to burst the bubbles of our comfort zones and enforces us to thrive on our ambitions, to conquer our inhibitions and to achieve our ultimate goals. Momentum suggests motion, demands anything but stagnancy. And that's something we have been bred upon. From the sacred lessons in our Holy Vedas to the uptown contemporary writers these days, we are constantly hammered with the importance of momentum. Wherever you are, whatever you do, whichever place you dream of getting to, the answer is just one i.e. momentum. There is no surviving without it. It shapes us. There is no one who isn't engulfed by the embrace of progress. Be it in any field like social, economical, spiritual or educational. There is only one way with momentum, forward. And therefore we find ourselves at the epitome of curiosity as we intend to hear all about this from the masters of it who are our distinguished speakers.
            </p>
        </div>
    </div>
</section>
<!--about the event end -->
<!--about the event -->
<br><br><br><br>
<section class="pt100 pb100" id="downs">
    <div class="container">
       
        <div class="section_title" data-sal="slide-up" data-sal-delay="500" data-sal-easing="ease-out-bounce" data-sal-duration="1000">
             
            <h3 style="height: 30px;border-left: 4px solid #e62b1e; position: absolute;" class="title">

            </h3>
            <h3 >
                &nbsp;  &nbsp; About TED
            </h3>
        </div><br><br>
        <div class="row justify-content-center mypara">
            <p data-sal="slide-up" data-sal-delay="500" data-sal-easing="ease-out-bounce" data-sal-duration="800" >
                TED is a nonprofit devoted to spreading ideas, usually in the form of short, powerful talks (18 minutes or less). TED began in 1984 as a conference where Technology, Entertainment and Design converged, and today covers almost all topics — from science to business to global issues — in more than 100 languages. Meanwhile, independently run TEDx events help share ideas in communities around the world. TED is a nonpartisan nonprofit devoted to spreading ideas, usually in the form of short, 
            
                powerful talks. TEDx is a program of local, self-organized events that bring people together to share a TED-like experience. At a TEDx event, TEDTalks video and live speakers combine to spark deep discussion and connection in a small group.
            </p>
          
        </div>

       
    </div>
</section>
<!--about the event end -->

<br><br><br>
<!--speaker section-->
<section class="pb100" >
    <div class="container" id="sperker">
        <div class="section_title mb50" >
            <h3 data-sal="zoom-in" data-sal-delay="500" data-sal-easing="ease-out-bounce" data-sal-duration="1000"  style="height: 30px;border-left: 4px solid #e62b1e; position: absolute; " class="title">

            </h3>
            <h3 data-sal="zoom-in" data-sal-delay="500" data-sal-easing="ease-out-bounce" data-sal-duration="1000">
                &nbsp;&nbsp;Speakers of TEDxMITAOE '20
            </h3>
           
        </div>
    </div>
    
    <br>
    
    <div class="row justify-content-center no-gutters">

        <!--1-->
        <div class="col-md-3 col-sm-6">
            <div class="speaker_box">
                <div class="speaker_img">
                    <img id="iii1"data-toggle="modal" data-target="#myModal" src="assets/img/speakers/Chaturvedi.png" alt="speaker name">
                    <div class="info_box">
                        <h5 class="name">Dr. S.K. Chaturvedi</h5>
                        <p class="position">Psychiatry</p>
                    </div>
                </div>
            </div>
        </div>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
            <h4 class="modal-title">Dr. S.K. Chaturvedi</h4>
              <button style="cursor:pointer" type="button" class="close" data-dismiss="modal">&times;</button>

            </div>
            
            <div class="modal-body">
                <div class="spe" style="">
                    
                    <div class="row" >
                        <div class="speimg" width="" style="" >
                            <center><img height="auto" class="rounded-circle" src="assets/img/speakers/Chaturvedi.png" alt="speaker name">
                        </div>


                        <div class="soc" style="position: absolute;">
                            <a href="https://in.linkedin.com/in/sk-chaturvedi-56458480?trk=people-guest_profile-result-card_result-card_full-click"><i class="ion-social-linkedin" id="link"></i></a><br>
                            <a href="#"><i class="ion-social-facebook" id="face"></i></a><br>
                            <a href="#"><i class="ion-social-instagram" id="inst"></i></a><br>
                            <a href="#"><i class="ion-social-twitter" id="twit"></i></a><br>

                        </div>
                    </div>
                </div>
                    
                        <br><br>
                    <span>He is a senior professor of Psychiatry and Dean of Behavioural Sciences at NIMHANS, Bangalore. 
His main area of research and work have been consultation liaison Psychiatry, Chronic Pain & Somatization, Neuropsychiatry and Quality of life research. Psycho-oncology & Palliative Care and Cultural Psychiatry.</span>
                <br><br>
                </center>
                    <br>


        </div>
            <div >
             <center> <button type="button" id="buysp" class="btn btn-default"><a href="https://www.townscript.com/e/tedxmitaoe-323323">Buy Tickets</a></button></center>
             <br>
            </div>
          </div>

        </div>
      </div>


<!--2-->
<div class="col-md-3 col-sm-6">
    <div class="speaker_box">
        <div class="speaker_img">
            <img id="iii2" data-toggle="modal" data-target="#myModal1" src="assets/img/speakers/Srushti.png" alt="speaker name">
            <div class="info_box">
                <h5 class="name">Srushti Nerkar</h5>
                <p class="position">Innovator & Child Prodigy</p>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
        <h4 class="modal-title">Srushti Nerkar</h4>
          <button style="cursor:pointer" type="button" class="close" data-dismiss="modal">&times;</button>
    
        </div>
        <div class="modal-body">
            <div class="spe" style="">
      
                <div class="row" >
                    <div class="speimg" width="" style="" >
                        <center><img height="auto" class="rounded-circle" src="assets/img/speakers/Srushti.png" alt="speaker name"> 
                    </div>

                    
                    <div class="soc" style="position: absolute;">
                        <a href="#"><i class="ion-social-linkedin" id="link"></i></a><br>
                        <a href="https://www.facebook.com/srushti.invent/"><i class="ion-social-facebook" id="face"></i></a><br>
                        <a href="#"><i class="ion-social-instagram" id="inst"></i></a><br>
                        <a href="#"><i class="ion-social-twitter" id="twit"></i></a><br>

                    </div>
                </div>
            </div>

                <br><br>
                <span>She is a social innovator and a child prodigy working on water conservation with some innovative tools invented by her.  
    She had created a working prototype of a water-saving shower with save of upto 85% of the water in a regular shower bath. Considering a novelty of innovation, a short film is published on her hard work done in association with the UN.</span>
            <br><br>
            </center>
            <br>


        </div>
            <div >
             <center> <button type="button" id="buysp" class="btn btn-default"><a href="https://www.townscript.com/e/tedxmitaoe-323323">Buy Tickets</a></button></center>
             <br>
            </div>
          </div>

        </div>
      </div>


<!--3-->
<div class="col-md-3 col-sm-6">
    <div class="speaker_box">
        <div class="speaker_img">
            <img id="iii3" data-toggle="modal" data-target="#myModal2" src="assets/img/speakers/Rahul.png" alt="speaker name">
            <div class="info_box">
                <h5 class="name">Rahul Kaushik</h5>
                <p class="position">Poet & Writer</p>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="myModal2" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
        <h4 class="modal-title">Rahul Kaushik</h4>
          <button style="cursor:pointer" type="button" class="close" data-dismiss="modal">&times;</button>
    
        </div>
        <div class="modal-body">
            <div class="spe" style="">
      
                <div class="row" >
                    <div class="speimg" width="" style="" >
                        <center><img height="auto" class="rounded-circle" src="assets/img/speakers/Rahul.png" alt="speaker name">
                    </div>

                       
                    <div class="soc" style="position: absolute;">
                        <a href="#"><i class="ion-social-linkedin" id="link"></i></a><br>
                        <a href="https://www.facebook.com/TheMeltingWords/"><i class="ion-social-facebook" id="face"></i></a><br>
                        <a href="https://www.instagram.com/themeltingwords/?hl=en"><i class="ion-social-instagram" id="inst"></i></a><br>
                        <a href="https://twitter.com/kaushkrahul?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><i class="ion-social-twitter" id="twit"></i></a><br>

                    </div>
                </div>
            </div>


                <br><br>
                <span>He is a poet and a writer. He is renowned for writing The Melting Words.
    
    Last year he launched his debut book 'The Melting Words' chapter 1.
    
    He is regularly invited as a speaker, judge or to conduct writing workshops in various colleges such as IITs and SRCC Delhi.</span>
            <br><br>
            </center>
            
    
        </div>
        <div >
         <center> <button type="button" id="buysp" class="btn btn-default"><a href="https://www.townscript.com/e/tedxmitaoe-323323">Buy Tickets</a></button></center>
         <br>
        </div>
      </div>

    </div>
  </div>


<!--4-->
<div class="col-md-3 col-sm-6">
    <div class="speaker_box">
        <div class="speaker_img">
            <img id="iii4" data-toggle="modal" data-target="#myModal3" src="assets/img/speakers/Rhythm.png" alt="speaker name">
            <div class="info_box">
                <h5 class="name">Rhythm Funk</h5>
                <p class="position">Dhol-Tasha Performers</p>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="myModal3" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
        <h4 class="modal-title">Rhythm Funk</h4>
          <button style="cursor:pointer" type="button" class="close" data-dismiss="modal">&times;</button>
    
        </div>
        <div class="modal-body">
            <div class="spe" style="">
      
                <div class="row" >
                    <div class="speimg" width="" style="" >
                        <center><img height="auto" class="rounded-circle" src="assets/img/speakers/Rhythm.png" alt="speaker name">
                    </div>

                       
                    <div class="soc" style="position: absolute;">
                        <a href="#"><i class="ion-social-linkedin" id="link"></i></a><br>
                        <a href="https://www.facebook.com/RhythmFunk/"><i class="ion-social-facebook" id="face"></i></a><br>
                        <a href="https://www.instagram.com/rhythm_funk/"><i class="ion-social-instagram" id="inst"></i></a><br>
                        <a href="https://twitter.com/rhythm_funk?lang=en"><i class="ion-social-twitter" id="twit"></i></a><br>

                    </div>
                </div>
            </div>

                <br><br>
                <span>Group of musicians from Maharashtra.
    
    Globally recognized Dhol-Tasha performers
    
   They cover Western songs on Maharashtrian Dhol-Tasha. 
    They have YouTube Silver button with 240K+ Subscribers.
    </span>
            <br><br>
            </center>
        

        </div>
        <div >
         <center> <button type="button" id="buysp" class="btn btn-default"><a href="https://www.townscript.com/e/tedxmitaoe-323323">Buy Tickets</a></button></center>
         <br>
        </div>
      </div>

    </div>
  </div>


<!--5-->
<div class="col-md-3 col-sm-6">
    <div class="speaker_box">
        <div class="speaker_img">
            <img id="iii5" data-toggle="modal" data-target="#myModal4" src="assets/img/swpnil.jpeg" alt="speaker name">
            <div class="info_box">
                <h5 class="name">Swapnil Joshi</h5>
                <p class="position">Indian Film & Television Actor</p>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="myModal4" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
        <h4 class="modal-title">Swapnil Joshi</h4>
          <button style="cursor:pointer" type="button" class="close" data-dismiss="modal">&times;</button>
    
        </div>
        <div class="modal-body">
            <div class="spe" style="">
      
                <div class="row" >
                    <div class="speimg" width="" style="" >
                        <center><img height="300px" width="300px"  class="rounded-circle" src="img/swpnil.jpeg" alt="speaker name">
                    </div>    
    
                           
                    <div class="soc" style="position: absolute;">
                        <a href="#"><i class="ion-social-linkedin" id="link"></i></a><br>
                        <a href="https://www.facebook.com/swwapniljoshi/"><i class="ion-social-facebook" id="face"></i></a><br>
                        <a href="https://www.instagram.com/swwapnil_joshi/?hl=en"><i class="ion-social-instagram" id="inst"></i></a><br>
                        <a href="https://twitter.com/swwapniljoshi?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><i class="ion-social-twitter" id="twit"></i></a><br>
    
                    </div>
                </div>
            </div>
    
    
                <br><br>
                <span>He is an Indian Actor, Producer, Television personality, RJ, Entrepreneur and a Humanitarian.
                    His movies are not only commercially successful but also critically acclaimed. Even after being 
                    a big shot in the Marathi Film Industry, He still has maintained his hunger for doing better work 
                    and is truly an inspiration.
                </span>
            <br><br>
            </center>
            
    
        </div>
        <div >
         <center> <button type="button" id="buysp" class="btn btn-default"><a href="https://www.townscript.com/e/tedxmitaoe-323323">Buy Tickets</a></button></center>
         <br>
        </div>
      </div>
    
    </div>
    </div>
    
    
<!--6-->
    <div class="col-md-3 col-sm-6">
    <div class="speaker_box">
        <div class="speaker_img">
            <img id="iii5" data-toggle="modal" data-target="#myModal5" src="img/aakash.jpg" alt="speaker name">
            <div class="info_box">
                <h5 class="name">Aakash Malhotra</h5>
                <p class="position">Traveller</p>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="myModal5" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
        <h4 class="modal-title">Aakash Malhotra</h4>
          <button style="cursor:pointer" type="button" class="close" data-dismiss="modal">&times;</button>
    
        </div>
        <div class="modal-body">
            <div class="spe" style="">
      
                <div class="row" >
                    <div class="speimg" width="" style="" >
                        <center><img height="300px" width="300px"  class="rounded-circle" src="img/aakash.jpg" alt="speaker name">
                    </div>    
    
                           
                    <div class="soc" style="position: absolute;">
                        <a href="#"><i class="ion-social-linkedin" id="link"></i></a><br>
                        <a href="#"><i class="ion-social-facebook" id="face"></i></a><br>
                        <a href="https://www.instagram.com/wanderwithsky/?hl=en"><i class="ion-social-instagram" id="inst"></i></a><br>
                        <a href="https://twitter.com/wanderwithsky?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"><i class="ion-social-twitter" id="twit"></i></a><br>
    
                    </div>
                </div>
            </div>
    
    
                <br><br>
                <span>A mountain boy from India, with a crush on the world. Currently on his 40th country and on a pursuit to travel the world. Travelling internationally frequently for a stretched period experiencing each destination like a local while operating his startup in Digital Advertising and Consulting.
                    A serial entrepreneur & listed as “10 Most Promising Digital Marketing Consultant – 2019” – ConsultantReview. A serial entrepreneur, angel investor, speaker and travel content creator, Instagrammer and Youtuber.
                </span>
            <br><br>
            </center>
            
    
        </div>
        <div >
         <center> <button type="button" id="buysp" class="btn btn-default"><a href="https://www.townscript.com/e/tedxmitaoe-323323">Buy Tickets</a></button></center>
         <br>
        </div>
      </div>
    
    </div>
    </div>


<!--7-->

<div class="col-md-3 col-sm-6"> 
    <div class="speaker_box">
        <div class="speaker_img">
            <img id="iii7" data-toggle="modal" data-target="#myModal6" src="assets/img/speakers/Anshu1.png" alt="speaker name">
            <div class="info_box">
                <h5 class="name">Kumar Anshu</h5>
                <p class="position">Founder & CEO Bots 'N Brains</p>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="myModal6" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
        <h4 class="modal-title">Kumar Anshu</h4>
          <button style="cursor:pointer" type="button" class="close" data-dismiss="modal">&times;</button>
    
        </div>
        <div class="modal-body">
            <div class="spe" style="">
      
                <div class="row" >
                    <div class="speimg" width="" style="" >
                        <center><img height="300px" class="rounded-circle"  src="assets/img/speakers/Anshu1.png" alt="speaker name">
                    </div>    
    
                           
                    <div class="soc" style="position: absolute;">
                        <a href="https://in.linkedin.com/in/anshu-kumar-897284a2"><i class="ion-social-linkedin" id="link"></i></a><br>
                        <a href="#"><i class="ion-social-facebook" id="face"></i></a><br>
                        <a href="#"><i class="ion-social-instagram" id="inst"></i></a><br>
                        <a href="#"><i class="ion-social-twitter" id="twit"></i></a><br>
    
                    </div>
                </div>
            </div>
    
    
                <br><br>
                <span>Kumar Anshu is a part time standup comedian along with Founder & Chief Everything Officer (a.k.a. CEO) of Bots 'N Brains, a young startup with an audacious dream of transforming India into top 10 Innovation hubs of the world. He is an alumnus of IIT Bombay & IIM Lucknow and also a certified Six Sigma Black Belt, PMP, ISO 9001 Lead Auditor & Behavioural Trainer.</span>
            <br><br>
            </center>
            
    
        </div>
        <div >
         <center> <button type="button" id="buysp" class="btn btn-default"><a href="https://www.townscript.com/e/tedxmitaoe-323323">Buy Tickets</a></button></center>
         <br>
        </div>
      </div>
    
    </div>
    </div>
    
    </div>


    </div>
</section>
<!--speaker section end -->

<!-- Timer Code -->
<br><br><br>
<div class="myclass">

    <div class="containern" id="days">
        <div class="cube">

            <div class="side front black">
                <div class="t1"><span id="demo1"> </span><div class="t2"><br>Days <br></div></div>
            </div>

            <div class="side left grey">
                <div class="t1"><span id="demo2"> </span><div class="t2"> <br>Days<br></div></div>
            </div>

            <div class="side black">
                <div class="t1"><span id="demo"> </span><div class="t2"> <br>Days<br></div></div>
            </div>

            <div class="side back black">
                <div class="t1"><span id="demo100"> </span><div class="t2"><br>Days<br></div></div>
            </div>

            <div class="side right grey">
                <div class="t1"><span id="demo3"> </span><div class="t2"><br>Days<br></div></div>
            </div>

            <div class="side top black">
                <div class="t1"><span id="demo4"> </span><div class="t2"><br>Days<br></div></div>
            </div>

            <div class="side bottom black">
                <div class="t1"><span id="demo5"> </span><div class="t2"><br>Days<br></div></div>
            </div>

        </div>

    </div>


    <div class="containern" id="hours">


        <div class="cube">

            <div class="side back black">
                <div class="t1"><span id="demo6"></span><div class="t2"><br>HOURS<br></div></div>
            </div>

            <div class="side left grey">
                <div class="t1"><span id="demo7"> </span><div class="t2"><br>HOURS<br></div></div>
            </div>

            <div class="side front black">
                <div class="t1"><span id="demo8"> </span><div class="t2"><br>HOURS<br></div></div>
            </div>

            <div class="side right grey">
                <div class="t1"><span id="demo9"> </span><div class="t2"><br>HOURS<br></div></div>
            </div>

            <div class="side top black">
                <div class="t1"><span id="demo10"> </span><div class="t2"><br>HOURS<br></div></div>
            </div>

            <div class="side bottom black">
                <div class="t1"><span id="demo11"> </span><div class="t2"><br>HOURS<br></div></div>
            </div>

        </div>

    </div>

    <div class="containern" id="minutes">

        <div class="cube">

            <div class="side back black">
                <div class="t1"><span id="demo12"> </span><div class="t2"><br>MIN<br></div></div>
            </div>

            <div class="side left grey">
                <div class="t1"><span id="demo13"> </span><div class="t2"><br>MIN<br></div></div>
            </div>

            <div class="side front black">
                <div class="t1"><span id="demo14"> </span><div class="t2"><br>MIN<br></div></div>
            </div>

            <div class="side right grey">
                <div class="t1"><span id="demo15"> </span><div class="t2"><br>MIN<br></div></div>
            </div>

            <div class="side top black">
                <div class="t1"><span id="demo16"> </span><div class="t2"><br>MIN<br></div></div>
            </div>

            <div class="side bottom black">
                <div class="t1"><span id="demo17"> </span><div class="t2"><br>MIN<br></div></div>
            </div>

        </div>


    </div>


    <div class="containern" id="seconds">

        <div class="cube">

            <div class="side back black">
                <div class="t1"><span id="demo18"> </span><div class="t2"><br>SEC<br></div></div>
            </div>

            <div class="side left grey">
                <div class="t1"><span id="demo19"> </span><div class="t2"><br>SEC<br></div></div>
            </div>

            <div class="side front black">
                <div class="t1"><span id="demo20"> </span><div class="t2"><br>SEC<br></div></div>
            </div>

            <div class="side right grey">'
                <div class="t1"><span id="demo21"> </span><div class="t2"><br>SEC<br></div></div>
            </div>

            <div class="side top black">
                <div class="t1"><span id="demo22"> </span><div class="t2"><br>SEC<br></div></div>
            </div>

            <div class="side bottom black">
                <div class="t1"><span id="demo23"> </span><div class="t2"><br>SEC<br></div></div>
            </div>

        </div>

    </div>
</div>


    <script>
        // Set the date we're counting down to
        var countDownDate = new Date("Jan 18, 2020").getTime();

        // Update the count down every 1 second
        var x = setInterval(function() {

            // Get today's date and time
          var now = new Date().getTime();

          // Find the distance between now and the count down date
          var distance = countDownDate - now;

          // Time calculations for days, hours, minutes and seconds
          var days = Math.floor(distance / (1000 * 60 * 60 * 24));
          var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
          var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
          var seconds = Math.floor((distance % (1000 * 60)) / 1000);

          // Output the result in an element with id="demo"
          document.getElementById("demo").innerHTML = days;
          document.getElementById("demo100").innerHTML = days;
          document.getElementById("demo1").innerHTML = days;
          document.getElementById("demo2").innerHTML = days;
          document.getElementById("demo3").innerHTML = days;
          document.getElementById("demo4").innerHTML = days;
          document.getElementById("demo5").innerHTML = days;

          document.getElementById("demo6").innerHTML = hours;
          document.getElementById("demo7").innerHTML = hours;
          document.getElementById("demo8").innerHTML = hours;
          document.getElementById("demo9").innerHTML = hours;
          document.getElementById("demo10").innerHTML = hours;
          document.getElementById("demo11").innerHTML = hours;

          document.getElementById("demo12").innerHTML = minutes;
          document.getElementById("demo13").innerHTML = minutes;
          document.getElementById("demo14").innerHTML = minutes;
          document.getElementById("demo15").innerHTML = minutes;
          document.getElementById("demo16").innerHTML = minutes;
          document.getElementById("demo17").innerHTML = minutes;

          document.getElementById("demo18").innerHTML = seconds;
          document.getElementById("demo19").innerHTML = seconds;
          document.getElementById("demo20").innerHTML = seconds;
          document.getElementById("demo21").innerHTML = seconds;
          document.getElementById("demo22").innerHTML = seconds;
          document.getElementById("demo23").innerHTML = seconds;


          // If the count down is over, write some text
          if (distance < 0) {
            clearInterval(x);
            document.getElementById("demo").innerHTML = "EXPIRED";
          }
        }, 1000);
        </script>

<br><br>


<!-- Timer Code Ends here -->
<!--event info -->
<section class="pt100 pb100">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-6 col-md-3  ">
                <div class="icon_box_two" data-sal="slide-up" data-sal-delay="500" data-sal-easing="ease-out-bounce" data-sal-duration="1000" class="col-6 col-md-3  ">
                    <i data-toggle="modal" data-target="#calender" style="cursor: pointer;"  class="ion-ios-calendar-outline"></i>
                    <!-- Modal -->
<div class="modal fade" id="calender" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
        <h4 class="modal-title">Save the Date</h4>
          <button style="cursor:pointer" type="button" class="close" data-dismiss="modal">&times;</button>

        </div>
        
        <div class="modal-body">
         

 <h2><center>18 January 2020<br> Pune</center></h2>
                
     <br><br>
            </center>
                <br>


    </div>
        <div >
         <center> <button type="button" id="buysp" class="btn btn-default"><a href="https://www.townscript.com/e/tedxmitaoe-323323">Buy Tickets</a></button></center>
         <br>
        </div>
      </div>

    </div>
  </div>
                    <div class="content">
                        <h5 data-toggle="modal" data-target="#calender" class="box_title" id='datetimepicker1' style="cursor: pointer;">
                            DATE
                        </h5>
                        <p>
                            18th January, 2020
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-6 col-md-3  " data-sal="slide-down" data-sal-delay="500" data-sal-easing="ease-out-bounce" data-sal-duration="1000" class="col-6 col-md-3  ">
                <div class="icon_box_two">
                    <a href="https://www.google.com/maps/dir//auto+cluster+exhibition/data=!4m6!4m5!1m1!4e2!1m2!1m1!1s0x3bc2b84992d04bbd:0x9f1c44fb853ba461?sa=X&ved=2ahUKEwjluNSAu9XmAhU48HMBHUfMAxIQ9RcwC3oECA0QDg">
                    <i class="ion-ios-location-outline"></i></a>
                    <div class="content">
                        <a href="https://www.google.com/maps/dir//auto+cluster+exhibition/data=!4m6!4m5!1m1!4e2!1m2!1m1!1s0x3bc2b84992d04bbd:0x9f1c44fb853ba461?sa=X&ved=2ahUKEwjluNSAu9XmAhU48HMBHUfMAxIQ9RcwC3oECA0QDg"> <h5 class="box_title">
                            location
                        </h5></a>
                        <p>
                            Auto Cluster, Pune
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-6 col-md-3  " data-sal="slide-down" data-sal-delay="500" data-sal-easing="ease-out-bounce" data-sal-duration="1000">
                <div class="icon_box_two">
                    <a href="#speaker">
                        <a href=""> <i class="ion-ios-person-outline"></i></a>
                    <div class="content">
                        <a href="#sperker"><h5 class="box_title">
                            speakers
                        </h5></a>
                        <p>
                            7+ Speakers
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-6 col-md-3  " data-sal="slide-down" data-sal-delay="500" data-sal-easing="ease-out-bounce" data-sal-duration="1000">
                <div class="icon_box_two">
                    <a href="https://www.townscript.com/e/tedxmitaoe-323323">
                    <i class="ion-ios-pricetag-outline"></i>
                    <div class="content">
                        <h5 class="box_title">
                            ticket
                        </h5>
                        <p>
                            ₹999 early bird
                        </p>
                    </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
<!--event info end -->

<!--get tickets section -->
<section class="bg-img pt100 pb100" >
    <div class="container">
        <div class="section_title mb30">
            <h3 data-sal="zoom-in" data-sal-delay="500" data-sal-easing="ease-out-bounce" data-sal-duration="1000" class="title" style="color:black;height: 30px; position: absolute; margin-top: 0px;  border-left: 4px solid #e62b1e;">
            </h3>
            <h3  data-sal="zoom-in" data-sal-delay="500" data-sal-easing="ease-out-bounce" data-sal-duration="1000">
                &nbsp; &nbsp; GET YOUR TICKETS
            </h3>
        </div>
        <div class="row justify-content-center align-items-center">
            <div  data-sal="zoom-in" data-sal-delay="500" data-sal-easing="ease-out-bounce" data-sal-duration="1000" style="color:black" class="col-md-9 text-md-left text-center">
                Spark deep conversations and connections at the ultimate brain spa in the company of thought leaders. Hold on to your seats as you journey into the future with Momentum. <br />Are you exciTED? <br />Grab your tickets NOW !
            </div>
            <div  data-sal="zoom-in" data-sal-delay="500" data-sal-easing="ease-out-bounce" data-sal-duration="1000" class="col-md-3 text-md-right text-center">
                <a href="https://www.townscript.com/e/tedxmitaoe-323323" class="btn btn-primary btn-rounded mt30">buy now</a>
            </div>
        </div>
    </div>
</section>
<!--get tickets section end-->
<footer class="footerr">
    <div class="container">
        <div class="row justify-content-center">

            <div class="col-md-4 col-12">
                <div class="footer_box">
                    <div class="footer_header">
                            <h4  data-sal-duration="1000" style="height: 30px;border-left: 4px solid #e62b1e;" class="footer_title">
                                   &nbsp; Important Links
                                </h4>
                    </div>
                    <div   class="footer_box_body">
                           
                            <a style="font-size:20px;color:white" href="https://www.townscript.com/e/tedxmitaoe-323323">Buy Tickets</a>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-5">
                <div class="footer_box">
                    <div class="footer_header">
                        <h4  data-sal-duration="1000" style="height: 30px;border-left: 4px solid #e62b1e;" class="footer_title">
                           &nbsp; Venue
                        </h4>
                    </div>
                    <div  d class="footer_box_body">
                      <a href="https://www.google.com/maps/dir//auto+cluster+exhibition/data=!4m6!4m5!1m1!4e2!1m2!1m1!1s0x3bc2b84992d04bbd:0x9f1c44fb853ba461?sa=X&ved=2ahUKEwi6wc6ay9XmAhXR4nMBHQZfAcsQ9RcwC3oECBkQDg"><img src="assets/img/AutoCluster Venue Vector Ma.png" height="200px;" width="300px;" alt=""></a><br><br>
                      <h6 style="color: white;"></h6>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-3">
                <div class="footer_box">
                    <div class="footer_header">
                        <h4   style="height: 30px;border-left: 4px solid #e62b1e;" class="footer_title">
                           &nbsp; Reach us on
                        </h4>
                    </div>
                    <div   class="footer_box_body">
                        <ul class="footer_social">

                            <li>
                                <a id="facebook" href="https://bit.ly/tedxmitaoefb"><i class="ion-social-facebook" ></i></a>
                            </li>
                            <li>
                                <a id="twitter" href="https://bit.ly/tedxmitaoetwitter"><i class="ion-social-twitter" ></i></a>
                            </li>
                            <li>
                                <a id="insta" href="https://bit.ly/tedxmitaoeinsta"><i class="ion-social-instagram" ></i></a>
                            </li>

                        </ul>
                        <div class="col-md-3 text-md-right text-center">
                                <a href="mailto:tedx@mitaoe.ac.in" class="btn btn-primary btn-rounded mt30">Contact</a>
                            </div>
                    </div>
                </div>
                
            </div>
            
            <center>  <p style="color: white;"> 
                
                <br><br><br>
                This independent TEDx event is operated under license from TED
                <br> © 2020 TEDxMITAOE</p></center>
        </div>
    </div>

    <br><br><br> <br>

</footer>

<!--footer end -->


<!-- Animation -->
<script src="./sal.js/dist/sal.js"></script>
<script>
  sal({
  threshold: 1,
  once: false,
});
</script>


<script>
    //Get the button
    var mybutton = document.getElementById("myBtn");
    
    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function() {scrollFunction()};
    
    function scrollFunction() {
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        mybutton.style.display = "block";
      } else {
        mybutton.style.display = "none";
      }
    }
    
    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
    </script>

<!--footer end -->

<!-- jquery -->
<script src="assets/js/jquery.min.js"></script>
<!-- bootstrap -->
<script src="assets/js/popper.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>

<!-- <script src="assets/js/owl.carousel.min.js"></script> -->
<!--parallax -->
<script src="assets/js/parallax.min.js"></script>
<!--Counter up -->
<script src="assets/js/jquery.counterup.min.js"></script>
<!--Counter down -->
<script src="assets/js/jquery.countdown.min.js"></script>
<!-- WOW JS -->
<script src="assets/js/wow.min.js"></script>
<!-- Custom js -->
<script src="assets/js/main.js"></script>
</body>
</html>