@font-face{
    font-family: regular ;
    src: url('/css/fonts/regular.otf');
}

.topbar-wrapper,
.login-type,
.menu-sidebar,
.carousel{
    display: none;
}


@media screen and (max-width: 768px){
    
  html, body{
      text-align: center;
  }
  .gray_out{
      padding: 0 15px 0 30px;
  }
  .call_to_action,
  #top_header,
  #main-nav,
  #sidebar,
  .very_top_menu{
      display: none;
  }
  .top-margin{
    margin-top: 100px;
  }
  .topbar-wrapper{
      display: block;
      height: 100px;
      width: 100%;
      background-color: red;
      position: fixed; top: 0;
      z-index: 100;
      text-align: left;
      box-shadow: 0px 2px 3px rgba(0,0,0,.2);
  }

  .topbar-wrapper .upper-bar{
      height: 60px;        
      background: linear-gradient( to top right, #dfdfdf,#eee) ;
  }


  .topbar-wrapper .menu-icon{
      width: 40px;
      height: 40px;
      margin: 10px;
      background-image: url('/img/mobile_version/menu2.png');
      background-size: cover;
      display: inline-block;
  }
  .menu-icon:hover{
      cursor: pointer;
  }

  .mobile-sb-logo{
      height: 45px;
      margin: 8px auto;
      position: relative;
      left:50%;
      margin-left: -150px;
  }

  .lower-bar{
      background: linear-gradient( to top left, #00418a,#0258b9) ;
      height: 40px;
      width: 100%;
  }

  .lower-bar a{
      line-height: 40px;
      width: 25%;
      display: inline-block;
      text-align: center;
      font-family: regular;
      letter-spacing: .08em;
      font-size: 15px;
      color: #e9e9e9;
  }
  .lower-bar a:nth-child(2){
      width: 46%;
  }

  .login-type{
      display: block;
      width: 96%;
      height:140px;
      background-color: #0258b9;
      position: fixed;
      top: -50px;
      border-radius: 10px;
      z-index: 99;
      margin: 0 2%;
      color: #eee;
      opacity: 0;
      box-shadow: 0 0 20px #333;
      transition: all .320s ease-in-out;
  }
  .login-type:before{
      content: '';
      border-style: solid;
      border-width: 0 10px 10px 10px;
      border-color: transparent transparent #0258b9 transparent;
      position: absolute;
      top: -10px; right: 30px;
  }

  .login-type.open{
      opacity: 1;
      top: 110px;
  }


  .login-type .right{
      float: right;
      width: 50%;
      display: block;
      background: linear-gradient(to right, #00418a, #0258b9);
      height: 100%;
      border-radius: 0 10px 10px 0;
  }
  .img{
      background-size: cover;
      margin: 0 auto; 
      width: 100px;
      height: 100px;
  }
  .img.web{
      background-image: url('/img/mobile_version/laptop.png');
  }
  .img.phone{
      width: 80px;
      background-image: url('/img/mobile_version/phone.png');
  }

  .login-type .left{
      float: left;
      width: 50%;
      display: block;
      background-color: peru;
      height: 100%;
      border-radius: 10px 0 0 10px;
      background: linear-gradient(to left, #eee, #ddd);

  }
  .login-type .left a{
      color: #000;
  }
  .login-type a{
      color: #000;
      font-family: regular;
      font-size: 18px;
      letter-spacing: .06em;
      color: #eee;
  }


  /*  phone sidebar  */

  .menu-sidebar{
    display: block;
    height: 100%;
    max-width: 80%;
    width: 400px;
    background: linear-gradient(to right, #00418a, #0258b9);
    position: fixed;
    top: 0;
    bottom: 0;
    left: -400px;
    z-index: 101;
    transition: all .320s ease;
    padding-top: 60px;
    color: #eee;
    overflow: auto;
    box-shadow: 
  }
  .menu-sidebar.open{
      left: 0px;
  }
  .menu-sidebar .close{
      width: 35px;
      height: 30px;
      margin: 15px;
      position: absolute; right: 0; top: 0;
      background-image: url('/img/mobile_version/left-arrow.png');
      background-size: cover;
  }
  .menu-sidebar .close:hover{
      cursor: pointer;
  }
  .menu-sidebar .sidebar-heading p{
    font-family: Ubuntu;
    padding: 0 20px;
    font-size: 16px;
    line-height: 1.3em;
    color: #fff;
  }
  .menu-sidebar .sidebar-heading p b{
    font-size: 1.3em;
  }
  .menu-sidebar .sidebar-nav li{
      text-align: left;
      margin: 3px 20px;
      list-style: none;
      border-radius: 22px;
      background: linear-gradient(to left, rgba(255,255,255,.1), rgba(255,255,255,0) );

  }
  .menu-sidebar .sidebar-nav li a{
      display: block;
      font-family: regular;
      letter-spacing: .06em;
      color: #eee;
      text-transform: capitalize;
      font-size: 22px;
      height: 44px;
      line-height: 44px;
  }
  .menu-sidebar .sidebar-nav li img{
      width: 40px;
      height: 40px;
      position: relative; bottom: 2px;
      margin: 3px 7px 0 15px;
      display: inline-block;
      vertical-align: middle;
  }

  .menu-sidebar .sidebar-social{
    margin: 20px auto 30px;
  }
  .menu-sidebar .sidebar-social li{
    display: inline-block;
    margin: 0 3px;
  }


  /*   mobile page syling   */

    /*    Content    */

  #content{
      margin-top: 80px;
      width: 100%;
  }

  #sidebar{
      padding: 0 15px 0 15px;
  }
  #sidebar .side_body .side_list li{
      padding: 0;
  }

  ul.button-group{
      width: 127px;
      margin: 10px auto;
  }

  label.inline{
      margin-bottom: 0;
      float: left;
  }

  form.columns{
      padding-left: 30px;
  }

  footer{
      text-align: left;
  }
  footer #copyright p{
      width: 90%;
      margin: 0 auto 20px;
      text-align: justify;
  }


  /*  carousel  */
  #slider_wrap{
    margin-top: 120px;
    height: 220px;
  }
  
  #slider_wrap .slider-nav{
    height: 220px;
  }
  
  
  #slider_wrap .main-slider{
    height: 220px;
  }
  #slider_wrap .main-slider li a img{
    height: 220px;
  }
  
  #main, #content{
    margin-top: 10px;
  }
  
  
  .th img.responsive{
      margin: 0 auto;
  }

  footer section{
      max-width: 320px;
      display: inline-block;
  }
  
  .editions .edition{
    width: 90%;
    vertical-align: top;
  }
  .edition.enterprise{
    width: 90%;
  }
  
  .editions .second-row{
    width: 90%;
    padding: 0 2%;
  }
  .edition .edition-desc{
    min-height: auto;
  }
  
}

@media screen and (max-width: 320px){
  #slider_wrap{
    height: 120px;
  }
  
  #slider_wrap .slider-nav{
    height: 120px;
  }
  
  
  #slider_wrap .main-slider{
    height: 120px;
  }
  #slider_wrap .main-slider li a img{
    height: 120px;
  }

  .th img.responsive{
      width: 90%;
  }
}