a#logo img {
  width: 100px;
}
@media (max-width: 767px) {
  .page-course .attachment {

    top: 180px;

  }
  .description {
    width: 100%;
  }
  .player-controls-right {
    text-align: right;
  }
  .btn-group+.btn-group, .btn-toolbar>.btn+.btn, .btn-toolbar>.btn+.btn-group, .btn-toolbar>.btn-group+.btn {
    margin-left: 0;
  }
  .btn-group>.btn:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .btn-group, .btn-group-vertical {
    display: block;
  }
  .btn-group>.btn, .btn-group>.dropdown-menu, .btn-group>.popover {
    width: 33.3%;
  }
  .tag-menu > ul > li {
    width: 49%;
    text-align: center;
  }
  .tag-menu ul li {
    margin-right: 0;
  }
  .nav-pills>.active>a, .nav-pills>.active>a:focus, .nav-pills>.active>a:hover {
    border-bottom: 1px solid #DDD;
  }
  .affix {
    position: static;
    width: auto;
    top: 0;
  }
  .three.statistics > .statistic {
    width: 100%;
  }
  .four>.menu>li {
    width: 49.3%;
  }
  .menu>li>ul {
    bottom: -50%;
  }
  #mainbody .container {
    background: none;
  }
  #main-menu a {
    background:none;
  }
  #main-menu a.active{
    border: none;
  }
  .navbar-search {
    margin-bottom: 10px
  }
  .container {
    padding: 0 30px
  }
  .dl-horizontal dt {
    float: left
  }
  #player {
    background: none;
    padding: 0;
    margin: 0;
  }
  .node-type-video #showcase .container {
    width: 100%;
    padding: 0
  }
  .node-type-video #mainbody .container, .node-type-course #mainbody .container {
    background: none;
  }
  .box {
    padding: 25px 0
  }
  #showcase-course-title .course-info {
    position: absolute;
    top: -500px;
    left: 0;
    text-align: center;
  }
  .course-promo {
    margin-top: 152px;
    background:url(../images/op30.png);
  }
  .course-info h1 {
    font-size: 18px;
  }
  .course-promo-info {
    float: left;
    width: 60%;
  }
  .time {
    width: 40px;
  }
  #showcase-course .container {
    padding: 0;
  }
  .course-list-page .views-row, #bottom, #footer, .front .maincontent h1 {
    text-align: center;
  }
  .front .maincontent h1 span {
    padding-left: 20px;
  }
  #bottom h2 span {
    padding-left: 10px;
  }
  #bottom h2 {
    text-align: center;
  }

  .course-list .span4 {
    height: 100%;
  }
  #footer .pull-right {
    float: none;
  }
  .latest-course img {
    width: 220px;
  }
  #showcase h1 {
    margin-top: 25px;
    font-size: 28px;
    margin-bottom: 15px;
    line-height: 30px;
  }
  #showcase h1, #showcase p {
    text-align: center;
  }
  #showcase p {
    font-size: 12px;
    margin-top: 10px;
  }
  .front #showcase .container {
    padding-bottom: 20px;
  }
  .front .view-course img {
    width: 220px;
  }
  #showcase-course .container {
    height: 522px;
  }
  #showcase-course-title .course-info {
    text-align: center;
    border-color: rgba(0,0,0,.201) rgba(0,0,0,.204);
    padding: 15px 0 15px 0;
    top: -520px;
  }
  .course-promo {
    margin-top: 180px;
  }
  #showcase-course-title .course-info h1 {
    padding-bottom: 5px;
    line-height: 1;
  }
  #showcase-course-title .course-info h1, #showcase-course-title .course-info p, .course-promo {
    background: none;
  }
  #views-exposed-form-course-course-list-page {
    margin-left: 0;
  }

  .node-type-blog h1.page-header{
    padding: 0;
  }
  .node-type-blog h1{
    width: 100%;
  }
  .node-type-blog #comments, .node-type-blog .node-content {
    padding: 0;
  }
  .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
    width: auto;
  }
  .ui.items > .item > .content > .meta {
    text-align: right;
  }
  .ui.items > .item > .action {
    padding-left: 7px;
  }
  .items.package {
    padding: 0 50px;
  }
}

@media (min-width: 1200px) {
  .latest-course img {
    width:190px;
  }
  #showcase .span4 {
    /* width: 300px; */
  }
  #mainbody .container {
    background-position: 800px 0;
  }
  .video-screenshot {
    margin: 70px 0;
  }
  .front .view-course img {
    width: 220px;
  }
  #showcase h1 {
    margin-top: 100px;
    font-size: 65px;
  }
  .front #showcase .container {
    padding-bottom: 100px;
  }
  #showcase p {
    font-size: 20px;
  }
  #showcase .btn-large {
    padding: 12px 50px;
  }
  .node-type-video #mainbody .container, .node-type-course #mainbody .container {
    background: url(../images/gray-dot.png) repeat-y 800px 0;
  }
  .course-promo-info{
    width:180px
  }
  .watch .user-box {
    width: 35%;
  }
  #case-show .mobile {
    padding: 48px 48px;
  }

}

@media (min-width: 768px) and (max-width: 979px) {
  .ui.statistics .statistic > .value,
  .ui.statistic > .value {
    font-size: 2rem;
  }
  .three.statistics > .statistic {
    width: 25%;
  }
  #mainbody .container {
    background-position: 495px 0;
  }
  #showcase .span4 {
    width: 300px;
  }
  .navbar-search {
    margin-bottom: 10px;
  }
  .course-list .span4 h2 {
    font-size: 15px;
  }
  .front .view-course img {
    width: 150px;
  }
  #player {
    background: url(../images/player-shadow-mid.png) no-repeat 0 100%;
  }
  .node-type-video #mainbody .container, .node-type-course #mainbody .container {
    background-position: 495px 0;
  }
  #showcase-course .span4 {
    float: none;
    width: auto;
  }
  #showcase-course-title .course-info {
    position: absolute;
    top: -500px;
    left: 0;
    text-align: center;
  }
  .course-promo {
    margin-top: 152px;
    background: none;
  }
  .course-promo-info {
    float: left;
    width: 80%;
    margin-left: 20px
  }
  .course-info h1 {
    font-size: 25px
  }
  #showcase-course .time {
    float: right;
    width: 50px
  }
  #showcase-course-title .course-info h1 {
      background: none;
  }
  #showcase-course-title .course-info p {
      background: none;
  }
  .ipad #showcase .container{width:725px}
  .watch .user-box {
    width: 95%;
    border-right: none;
  }
  #case-show .mobile {
    padding: 48px 32px;
  }
}

@media (max-width: 767px) {
  .player .player-volume[type=range] {
    display: none;
  }
  body {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 480px) {
  #showcase h1 {
    margin-top: 25px;
    font-size: 22px;
    margin-bottom: 5px;
  }
  .page-blog .field-name-body {
    padding: 15px 0;
  }
  .page-blog .node-teaser {
    border-bottom: 1px solid #e8e8e8;
    padding: 20px 0;
  }
  .page-blog .maincontent h2 {
    width: 100%;
  }
  .course-promo-info {
    width: 50%;
  }
  .sub-table, .sub-months, .sub-year{
    width: 100%;
  }
  .sub-table .sub-year{
    border-left: none;
  }

}

@media (max-width: 979px) {
  .navbar .brand {
    width: 100px;
  }
  #logo {
    margin: 8px 0 9px 0;
  }
  .navbar-fixed-top {
    margin-bottom: 0;
  }
  .navbar-fixed-top, .navbar-fixed-bottom {
    position: fixed;
  }
  #secondary-menu li:hover, #main-menu li.active, #main-menu li:hover, #main-menu a.active {
    background: #1a1a1a;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  #secondary-menu a:hover, #main-menu a:hover {
    background: none;
  }
  .navbar-inverse .nav-collapse .nav>li>a:hover, .navbar-inverse .nav-collapse .dropdown-menu a:hover {
    background: none;
  }
  #main-menu li.active-trail, #main-menu a.active-trail {
    border-left: none;
    border-right: none;
    background: #1a1a1a;
  }
  #main-menu {
    margin-left: 0;
  }
  #main-menu {
    margin-top: 15px
  }
  #main-menu {
    margin-left: 0;
    width: 100%;
    margin-bottom: 0;
  }
  #secondary-menu {
    margin-top: 0;
  }
  #main-menu li a {
    padding: 5px 45px 5px 15px;
    line-height: 25px;
  }
  #main-menu li {
    margin-right: 0;
  }
  #search input {
    height: 50px;
  }

  .nav-collapse .navbar-form, .nav-collapse .navbar-search {
    border: none;
    float: left;
    box-shadow: none;
  }
  .nav-collapse.in .btn-group {
    margin-top: 15px
  }
  .navbar .btn {
    margin-top: 10px;
    padding: 7px 15px
  }
  .nav-collapse .nav li {
    border-bottom: 1px solid #2e2e2e;
    padding: 5px;
  }
  .nav-collapse #search {
    padding-bottom: 20px;
  }
  #secondary-menu a {
    padding:9px 15px;
  }
  #search {
    float: none;
    display: block;
    width: 100%;
    margin-left: 0;
    margin-bottom: 15px;
    text-align: center;
  }
  #search form input {
    width: 95%;
    border: none;
    margin-bottom: 0;
    background-color: #090808;
    border: 1px solid #2a2a2a;
    padding: 10px 5px;
  }
  #search form input:focus {
    width: 95%;
  }
  #header .btn {
    margin-left: 0;
    margin: 10px 5px;
  }
  #header .btn-mini {
    font-size: 15px;
  }
  .course-promo .btn {
    width: 100%;
  }
  .course-promo ul {
    background: rgba(0, 0, 0, 0.3);
    padding: 5px;
    text-align: center;
    bottom: -5px;
    border-radius: 3px;
  }
}

@media (min-width: 980px) {
  a#logo img {
    width: 150px;
  }

}