@media (max-width : 700px){

    @font-face {
        font-family: gilroy;
        font-display: auto;
        src: url(../assets/gilroy-bold-cufonfonts-webfont/gilroy-Bold.woff);
    }
    @font-face {
        font-family: gilroy-light;
        font-display: auto;
        src: url(../assets/gilroy-bold-cufonfonts-webfont/gilroy-Light.woff);
    }
    /* General styling */

    #largeView {
        display: none
    }

    #phoneView {
        display: block;
    }
  html,
  body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      font-family: 'Work Sans', sans-serif;
  }

  .sm-col-12 {
      width: 100%;
      height: auto
  }
  .sm-col-6 {
    width: 45%;
    display: inline-block;
    height: auto;
    padding : 20px 10px;
    text-align: center;
}

  .sm-heading {
      font-weight: bold;
      font-size: 19px;
      font-family: gilroy;
  }

  .sm-content {
      font-size: 19px;
      line-height: 1.5
  }

  .sm-content-cover {
      padding: 20px;
  }

  /* Navbar Styling */
  .sm-card {
      display: flex;
      min-width: 100%;
      overflow-x: scroll;
      margin-top: 50vh;
      transform: translateY(-80%);
  }

  .card::-webkit-scrollbar {
      display: none;

  }

  .card--content {
      text-align : center;
      min-width: 150px;
      height : auto;
  }

  /* Navbar animation */
  @keyframes sm-navbar-animate {
      0% {
          margin-top: 50vh;
          transform: translateY(-80%)
      }

      100% {
          margin-top: 20vh;
          transform: translateY(-50%);
      }
  }

  @keyframes sm-aboutUs-animate {
      0% {
          padding: 0px
      }

      100% {
          padding-left: 20vw;
      }
  }

  /* Logo styling and animation  */
  @keyframes sm-diagonal-logo {
      0% {
          width: auto;
          top: 10%;
          height: 45px;
          position: absolute;
          left: 50%;
          transform: translate(-50%);
      }

      100% {
          height: 20px;
          width: auto;
          left: 4%;
          top: 4%;
          position: absolute;
          transform: translate(0);
      }
  }

  #sm-diag {
      width: auto;
      top: 10%;
      height: 38px;
      position: absolute;
      left: 50%;
      transform: translate(-50%);
  }
  #sm-diag1{
    width: auto;
    top: -20%;
    height: 208px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    /* background: url('assets/web_grafiti.png'); */
    background-size: cover;
  }

  /* Main styling */

  /* Navbar */
  .sm-nav-content {
      font-family: 'gilroy';
      padding-left: 10px;
      background: #ecf0f1;
      font-size: 23px;
      font-weight: bold;
      color: lightgray;
      cursor: pointer;
      width : auto

  }
  /* Register buttons */
  .register {
    outline: none;
    border: 2px solid #FE524D;
    border-radius: 7px;
    color: white;
    font-size: 18px;
    font-weight: bolder;
    background: #FE524D;
    padding: 15px;
    box-shadow: 0 0 6px 0 rgba(184, 185, 184, 0.6);
  }

  /* Timeline */
  .sm-timeline-box {
      width: 50%;
      height: 200px;
      position: relative
  }

  .sm-timeline-circle {
      position: absolute;
      right: 0;
      transform: translate(50%, -50%);
      height: 40px;
      width: 40px;
      border-radius: 50%
  }

  .sm-timeline-time {
      font-weight: bolder;
      font-size : 20px;
      font-family: gilroy;

  }

  .sm-timeline-event {
    font-size : 20px

  }

  .sm-time-event-cover {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(50%, -50%);
      text-align: center
  }

  /* Speakers */
  .sm-details-cover {
      width: 100%;
      height: 90px;;
      margin-bottom : 50px
  }

  .sm-avatar {
      border: 2px solid black;
      transform: translateX(-50%);
      left: 50%;
      height: 80px;
      width: 80px;
      border-radius: 50%;
      position: absolute;
  }

  .sm-speakers-name {
      margin-bottom: 5px;
      margin-top: 5px;
      font-size :18px;
      font-weight : bolder;
      font-family: gilroy;

  }

  .sm-speakers-details {
      margin-top: 5px;
      font-size : 18px;
  }

  .sm-avatar-cover {
      width: 100%;
      height: 90px;
  }

  .sm-speakers-btn {
      outline: none;
      border: 2px solid #FFC334;
      border-radius: 7px;
      color: white;
      font-size: 18px;
      font-weight: bolder;
      background: #FFC334;
      padding: 15px;
      box-shadow: 0 0 6px 0 rgba(184, 185, 184, 0.6);  }

  /* Sponsors */
  .sm-sponsors-btn {
      outline: none;
      border: 2px solid #FE524D;
      border-radius: 7px;
      color: white;
      font-size: 18px;
      font-weight: bolder;
      background: #FE524D;
      padding: 15px;
      box-shadow: 0 0 6px 0 rgba(184, 185, 184, 0.6);
  }

  /* Contact Us */
  .sm-contact-us-details {
      font-size : 22px;
      font-weight : bolder;
      font-family: gilroy;

  }

  .sm-contact-us-number {
    font-size : 22px;
    font-family: gilroy-light;

  }

  .sm-contact-us-cover {
      margin-top: 40px
  }

  /* Downloads */
  .sm-downloads-btn {
      outline: none;
      border: 2px solid #34AD6D;
      border-radius: 7px;
      color: white;
      font-size: 18px;
      font-weight: bolder;
      background: #34AD6D;
      padding: 15px;
      box-shadow: 0 0 6px 0 rgba(184, 185, 184, 0.6);  
    }

  .sm-downloads-head{
    font-size : 21px;
    font-weight : bolder;
    font-family: gilroy;

  }

  /* Animation init related css */

  #sm-about-us-top, 
  #sm-hackathon-top, 
  #sm-timeline-top, 
  #sm-speakers-top, 
  #sm-sponsors-top, 
  #sm-contact-us-top, 
  #sm-downloads-top,
  #sm-prev-events-top,
  #sm-main-top {
      display: none
  }

  /* previous events */

  .sm-prev-card {
    width : 50%; 
    height : 200px; 
    border : 2px solid black; 
    margin : 0 auto; 
    margin-top : 40px
  }
  }