@import url(//fonts.googleapis.com/css?family=Roboto:400,500,700);


@media screen and (max-width: 1080px) {
  .v2 #header .navigation { margin: 0 2% 0 0;}
  .slide-frame { width:100% !important; height: auto !important;}
  html.v2 .carousel-wrapper { width:100% !important; height: auto !important; }
  html.v2 #carousel-container { width:100% !important; height: auto !important; padding: 0 0 47% 0;}
  html.v2 #slide-carousel { width:100% !important; height: auto !important; }
  .tout { display: none; }
  .v2 #header { margin: 0; left:0; width: 100%; transform: none; }
  html.v2 #tools { width: 100%; }

  .workshop-collection ul.workshop-collection-list .tutorial-item-v2.workshop-thumbnail-medium .tutorial-information .tutorial-information-top {
    top: auto;
  }

  .workshop-collection ul.workshop-collection-list .tutorial-item-v2.workshop-thumbnail-medium .tutorial-information,
  .workshop-collection ul.workshop-collection-list .tutorial-item-v2 .tutorial-information {
    bottom: 44px;
    top: auto;
  }
  .workshop-collection ul.workshop-collection-list .tutorial-item-v2.workshop-thumbnail-medium:hover .tutorial-information,
  .workshop-collection ul.workshop-collection-list .tutorial-item-v2:hover .tutorial-information {
    bottom: 94px;
    top: auto;
  }
  .workshop-collection ul.workshop-collection-list .tutorial-item-v2.workshop-thumbnail-medium,
  .workshop-collection ul.workshop-collection-list .tutorial-item-v2 {
    height: inherit;
  }
  .workshop-collection ul.workshop-collection-list li {
    display: inline-block;
    float: none;
    margin: 0 0 2% 1%;

  }

  #newest .workshop-collection ul.workshop-collection-list li,
  #primary .workshop-collection ul.workshop-collection-list li {
    width: 30.7%;
  }

  .workshop-collection ul.workshop-collection-list a.view-class { border: 0;}
  .workshop-collection ul.workshop-collection-list li img { width: 100%; vertical-align: top;}

  #popular-classes, #workshop-collection-paginator { width: inherit; }

  html.v2 #popular,
  html.v2 #newest,
  html.v2 #primary,
  html.v2 #primary.subjects,
  html.v2 #primary.instructor {
    width: 100%;
  }

  html.v2 #popular h1,
  html.v2 #newest h1,
  html.v2 #primary h1,
  #primary .series-crumb {
    margin: 0 2% 0 2%;
  }

  .workshop-collection { margin: 0; }
  html.v2 #tools .social { margin-bottom: 10px; }
  html.v2 #tools .headline { width: auto; }
  html.v2 #tools .search { margin: 0 2% 0 0; }

  .trailer {
    width: inherit !important;
  }
  .trailer .thumb img {
    height: auto !important;
    width: 100% !important;
  }
  .trailer a,
  .trailer .play-icon-overlay {
    height: 100% !important;
    width: 100% !important;
  }

  #instructor-profile #links {
    float: none !important;
    margin: 10px !important;
    padding: 0 !important;
    position: static !important;
    width: auto !important;
  }
  #main-info {
    margin: 30px 0 0 !important;
    width: 100% !important;
  }

  #gallery,
  #gallery_images {
    width: 100% !important;
  }
  #gallery_images .main {
    height: auto !important;
  }
  #gallery_images .mainint {
    height: auto !important;
    padding: 10px !important;
    text-align: center;
  }
  #gallery_images .carousel .mask {
    width: 100% !important;
  }
  #gallery_images .carousel ul {
    position: static !important;
    width: 100% !important;
  }
  #gallery_images .carousel ul li {
    float: none !important;
    display: inline-block !important;
  }
  .instructors ul {
    float: none !important;
    text-align: center !important;
    margin: 0 !important;
  }
  .instructors ul li.instructor {
    display: inline-block !important;
    float: none !important;
    position: relative;
  }
  .instructors .iblrb {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .instructors .iblrb p {
    margin: 2% !important;
  }

  /* BAC */
  .module-workshop {
    padding: 0 !important;
    width: 100% !important;
  }
  .module-workshop .title {
    width: auto !important;
  }
  .module-workshop #videoplayer_wrapper {
    width: 100% !important;
    display: inline-block !important;
  }
  .module-workshop .workshop-layout-tabs {
    width: auto !important;
    padding: 0 10px !important;
  }
  .module-workshop .thumbnails {
    width: 100% !important;
  }
  .module-workshop .workshop-partial-information {
    float: none !important;
  }
  .module-workshop .workshop-partial-information .first-row {
    pointer-events: none;
  }
  .module-workshop .workshop-partial-gallery {
    width: inherit !important;
  }
  .module-workshop .column-description.data {
    width: inherit !important;
  }
  .module-workshop #student-upload {
    width: auto !important;
  }
  .module-workshop #primary {
    width: 100% !important;
  }
  .module-workshop #tutorial-show-large {
    width: auto !important;
    height: auto !important;
  }
  .module-workshop #primary-image img {
    width: 100%;
    height: auto;
  }
  .module-workshop #primary-image .fakeVideoCover {
    width: 100% !important;
    height: auto !important;
  }
  .module-workshop #primary-image a .overlay {
    display: none !important;
  }
  .module-workshop #primary-image .duration {
    margin: -40px 0 0;
    top: auto !important;
  }
  .module-workshop .hgroup {
    width: auto !important;
  }
  .module-workshopbac .bookmark {
    right: 32px !important;
  }
  #videoPostPlate {
    width: 100% !important;
  }
  .jwplayer {
    width: 100% !important;
  }

  /* Work-alongs */
  #longforms-cms {
    width: 100%;
  }
  .title-wrapper h2 {
    line-height: 25px;
    padding: 2%;
  }
  .playlist-wrapper {
    position: static;
  }
  #player_wrapper {
    width: 100% !important;
  }
  .player-wrapper .player-bottom h2 {
    padding: 2%;
  }
  .play-now-wrapper {
    margin-left: 0;
  }
  .btn-play-now {
    display: inline-block;
  }
  div.playlist {
    position: static;
    width: 100%;
    margin-bottom: 0;
  }
  .tutorial-data {
      float: none;
      width: 100%;
  }
  .tutorial-breakdown .col-2 {
    width: auto;
  }
  .section-940px {
    margin: 0 auto;
    width: 100%;
  }
  .projects {
    width: 100%;
  }
  .projects li.even {
    margin-right: 0;
  }
  .projects li {
    float: none;
  }
  .project .image-wrapper img {
    width: 100% !important;
  }
  .instructor .description {
    width: 100%;
  }

  /* Profile */
  #library #notice {
    position: static !important;
    height: auto !important;
  }
  #library .button {
    float: none !important;
  }
  #library #notice #note {
    position: static !important;
    line-height: 20px !important;
  }
  #library #notice #choose {
    float: none !important;
  }

  .v2 #about, .about {
    height: auto;
  }
  .v2 #about .wrapper, .about .wrapper {
    background: #2e9eb4 url("/ui/images/home/about-bg.jpg") repeat-x;
    padding: 0 0 20px;
    width: 100%;
  }
}
/* Modals - need to move down all screens to account for top nav*/
.modal.in .modal-dialog {
  top: 200px;
}
@media screen and (max-width: 540px) {
  .modal.in .modal-dialog {
    top: 0px;
  }
}

@media screen and (max-width: 880px) {
  /* Modals */
  .fancybox-opened {
    left: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .fancybox-outer, .fancybox-inner {
    width: 100% !important;
  }
  .fancybox-close {
    right: 0 !important;
    top: -24px !important;
  }
}

@media screen and (max-width: 960px) {
  .v2 #header .subjects { padding-top: 26px; float: none;}
  .workshop-collection ul.workshop-collection-list h2 { font-size: 18px; }
  html.v2 #tools { text-align: center; margin: 2% auto 0 auto;}
  html.v2 #tools .social {display: inline-block; margin: 13px 0 0; vertical-align: top; float: none;}
  html.v2 #tools .headline { width: 100%; font-size: 16px; }
  html.v2 #tools .search {margin: 10px 0 0; vertical-align: top; display: inline-block; float: none;}
  html.v2 #popular { margin: 2% auto 6%; }
  .v2 .searchl { float: none; }

}
@media screen and (max-width: 960px) {
  .v2 #header { position: static; margin: 10px auto 0px; background: #fff; box-shadow: 0px 1px 3px rgba(0,0,0,0.1); height: 64px; display: table;}
  .v2 #header .subjects { display: none; }
  .v2 #header nav { display: inline-block; float: none; height: 22px; vertical-align: middle; }
  .v2 #header .navigation { padding: 0; position: absolute; right: 0; }
  .v2 #header .navigation .signup a span { display: none;}
  .v2 #header .navigation li a { font-size: 12px; line-height: 22px; height: 22px; padding: 0 5px; }
  .v2 #header .navigation #icon-profile { width: auto; }
  .v2 #header .navigation #icon-profile a { top: 0; }
  .v2 #header .navigation #icon-profile img { height: 22px; top:0;}
  .v2 #header .navigation #icon-profile .credits { font-size: 8px; left: -7px; top: -11px; }
  .v2 #header .navigation .search a { width: 16px; }
  .v2 #header.searchon .navigation .search input {width: 52px;}
  .v2 #header .navigation .search input { font-size: 12px; line-height: 18px; right: 20px; top:0;}
  .v2 #header .navigation .search img { width: 16px; height: 16px; }
  .v2 #header > div { display: table-cell; vertical-align: middle; height:100%; }
  .v2 #header #logo { display: inline-block; float: none; line-height: 0; margin: 26px 0 0 0; margin-left: 2%; vertical-align: middle; width: 183px; height: 38px; }
  .v2 #header #logo a { outline:none; }
  .v2 #header #logo img { width:100%; }

  html.v2 #popular,
  html.v2 #newest,
  html.v2 #primary.instructor {
    padding-top: 0;
  }

  #newest .workshop-collection ul.workshop-collection-list h2,
  #primary .workshop-collection ul.workshop-collection-list h2 {
    display: table-cell; height: 50px; padding: 0 10px; vertical-align: middle; font-size: 14px; text-align: center; line-height: 14px;
  }
  #newest .workshop-collection ul.workshop-collection-list .tutorial-information-top,
  #primary .workshop-collection ul.workshop-collection-list .tutorial-information-top {
    margin:0;
  }

  #newest .workshop-collection ul.workshop-collection-list li,
  #primary .workshop-collection ul.workshop-collection-list li {
    width: 47%;
  }

  .workshop-collection ul.workshop-collection-list .tutorial-item-v2.workshop-thumbnail-medium .instructor { display: none; }
  .icon-free-class::after, .icon-new-class::after { width:42px; height:42px; line-height: 44px; font-size: 15px; }
  pre { display: none; }

  .workshop-collection ul.workshop-collection-list .tutorial-item-v2.workshop-thumbnail-medium .tutorial-information .tutorial-information-top {
    top: -26px;
  }
  .workshop-collection ul.workshop-collection-list .tutorial-item-v2.workshop-thumbnail-medium .tutorial-information {
    bottom: 24px;
  }

  .kohana { display: none; }

  #main-info .portrait {
    display: inline-block !important;
    float: none !important;
    margin: 0 !important;
    min-height: auto !important;
    position: static !important;
    text-align: center !important;
    width: 100% !important;
  }
  #main-info #bio {
    margin: 0 !important;
  }

  /* Profile Icon */
  #icon-profile {
    position: relative;
    width: 40%;
  }

  #icon-profile .circle-num {
    position: absolute;
    width: auto;
    left: 10px;
    min-width: 1.4em;
    padding: 4px;
    top: 5px;
    box-sizing: content-box !important;
  }

  li.search {
    width: 280px;
    background: #f0f0f0;
  }
  li.search a, li.search form {
    display: inline-block !important;
  }
  li.search input {
    width: 145px;
    padding: 7px 13px;
  }

  /* Account Profile */
  #profile-tabs {
    padding-top: 0 !important;
  }
  #profile-tabs ul li {
    width: auto !important;
  }
  .account.settings {
    width: auto !important;
  }

  /* Work-alongs */
  #longforms-cms {
    margin: 0;
  }
  #longforms-cms h1 {
    padding: 2%;
    line-height: 27px;
  }

  .v2 #about li, .about li {
    width: 100%;
    display: block;
    margin: 0 0 30px;
  }

  #help #learn_more #intro .bg {
    height: auto !important;
  }
  #help #learn_more #intro {
    display: inline-block !important;
    position: relative !important;
    text-align: center !important;
    width: 100% !important;
  }
  #help #learn_more #intro .btn-try {
    bottom: inherit !important;
    position: static !important;
    right: inherit !important;
  }
  #help #learn_more .benefit {
    padding: 16px 2% !important;
  }
  #help #learn_more .vwrapper {
    text-align: center !important;
  }
  #help #learn_more .vwrapper .vcenter {
    position: inherit !important;
  }
  #help #learn_more #unlimited .pic, #help #learn_more #library .pic,
  #help #learn_more #experts .pic, #help #learn_more #mobile .pic {
    width: auto !important;
    height: auto !important;
    position: static !important;
  }
  #help #learn_more #unlimited .icon, #help #learn_more #library .icon,
  #help #learn_more #experts .icon, #help #learn_more #mobile .icon {
    height: auto !important;
    position: static !important;
    margin: 0 !important;
    display: inline-block !important;
  }
  #help #learn_more #unlimited .desc, #help #learn_more #library .desc,
  #help #learn_more #experts .desc, #help #learn_more #mobile .desc {
    padding: 0 !important;
  }
  #help #learn_more #try div img {
    width: 100% !important;
    margin: 0 !important;
  }
  #help #learn_more #try div a img {
    width: auto !important;
  }

}

@media screen and (max-width: 320px) {
  .workshop-collection ul.workshop-collection-list li { width: 96%; }
}

/* Responsive Footer */
.v2 #footer {
  min-width: 100%;
}

.v2 #footer #fbox {
  max-width: 1080px !important;
  text-align: center;
  width: 100%;
}

.v2 #footer #fbox .column {
  display: inline-block;
  float: none;
  text-align: left;
  vertical-align: top;
  width: 200px;
  margin-right: 0px !important;
  margin-left: 0px !important;
}
@media screen and (max-width: 768px) {
  .v2 #footer {
    padding: 4% 0;
  }
  .v2 #footer #fbox .column {
    width: 150px;
  }
}
@media screen and (max-width: 400px) {
  .v2 #footer #fbox .column {
    width: 100px;
  }
}
.v2 #footer #fbox .column.list {
  margin-bottom: 20px;
}
.v2 #footer #fbox .column.newsletter {
}
.v2 #footer .copyright {
  margin: 30px 0 0 0;
}
.v2 #footer .btn-mailing {
  display: inline-block;
  margin: 0 0 10px;
}

/* Side Navigation */
#sidebar-toggle {
  outline: none;
  float: left;
  padding: 8px;
  margin: 16px 0 0 10px;
  display: none;
  background: none;
  box-shadow: 0 0 1px #f0f0f0;
}
#sidebar-toggle:hover {
  background: rgba(0, 0, 0, 0.02);
}

#sidebar-toggle .icon-bar {
  background: #666;
  box-sizing: border-box;
  display: block;
  height: 3px;
  width: 17px;
  border-radius: 10px;
}
#sidebar-toggle .icon-bar + .icon-bar {
  margin: 3px 0 0;
}

#footer, #main, #header {
  margin: 0;
}
#main {
  overflow: hidden;
}
.main-sidebar {
  padding: 0;
  left: -280px;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 281px;
  z-index: 234567891;
  line-height: 16px;
  padding: 32px 2% 2% 2%;
}
.main-sidebar .nav-social { display: none; }

.main-sidebar ul {
  margin: 0 !important;
}
.main-sidebar img {
  vertical-align: middle;
  width: 100%;
}
.main-sidebar a {
  color: #b8c7ce;
  text-transform: capitalize;
  font-size: 15px;
  outline: none;
  font-family: 'Roboto', sans-serif;
}
.main-sidebar a:focus, .main-sidebar a:hover {
  text-decoration: none !important;
}

/*.main-sidebar li {
  border-left: 3px solid transparent;
  padding: 15px 0 15px 12px;
  margin-right: 1px;
  background: #fff;
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
  cursor: pointer;
}*/

.main-sidebar li > div {
  border-left: 3px solid transparent;
  padding: 15px 0 15px 12px;
  margin-right: 1px;
  background: #fff;
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.main-sidebar li:hover,
.main-sidebar li div:hover {
  border-left-color: #e73d50;
}
.main-sidebar li > a,
.main-sidebar li > div > a {
  color: #999;
  font-weight: 500;
  text-transform: capitalize;
}
.main-sidebar li > a:hover,
.main-sidebar li > div > a:hover {
  color: #e73d50;
}
#icon-profile > a {
  background: transparent;
}
.main-sidebar > ul > li > a,
.main-sidebar > ul > li > div > a {
  text-transform: uppercase;
}
.main-sidebar > ul > ul li > a,
.main-sidebar > ul > li ul > li > div > a {
  padding-left: 15px;
}
.main-sidebar > ul > ul ul > li > a,
.main-sidebar > ul > li ul > li > ul li > div > a {
  padding-left: 25px;
}

/*
.main-sidebar li ul li:first-child {
  display: none;
}
.main-sidebar li ul li:first-child + li {
  display: none;
}*/
/*
.main-sidebar li > a:hover, .main-sidebar li.active > a {
  background: #fff;
  border-left-color: #e73d50;
}
*/
/*
.main-sidebar li > ul > li + li > a {
  background: #424242;
  color: #fff;
  font-weight: 400;
  text-transform: capitalize;
  padding-left: 20px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  font-size: 14px;
}
.main-sidebar li > ul > li + li > a:hover {
  background: #666;
}
.main-sidebar li.login > a {
  background: #666;
  color: #fff;
}
.main-sidebar li.signup > a {
  background: #ff4b56;
  color: #fff;
}*/

@media screen and (max-width: 960px) {
  #sidebar-toggle {
    display: inline-block;
    float: none;
    vertical-align: middle;
    margin: 26px 2% 0 2%;
  }
  .sidebar-open #header #logo {
    position: static;
  }
  .sidebar-open #footer, .sidebar-open #main, .sidebar-open #header {
    margin: 0 0 0 280px;
  }
  .sidebar-open #main, .sidebar-open #header {
    background: #fff !important;
    width: 100%;
  }
  .sidebar-open .main-sidebar {
    height: 100%;
    left: 0;
    overflow-x: hidden;
    overflow-y: visible;
    position: fixed;
    top: 30px;
  }
  .sidebar-open #page-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    width: 100%;
  }
  .sidebar-open #main-content {
    opacity: 0.5;
    overflow: hidden;
    z-index: -1;
  }
  .sidebar-open #header {
    position: fixed;
  }
  .sidebar-open body {
    background: #fff !important;
  }
  #library {
    padding: 0 2%;
  }
  #library .section-text {
    line-height: 20px;
  }
  #library #notice {
    padding: 0;
    margin-top: 2%;
  }
  #library #notice #note {
    padding: 0 !important;
  }
  #library #notice #trial-button {
    margin: 10px 0 0 0 !important;
  }
  #member-profile .content #name {
    font-size: 20px !important;
  }
  #profile-tabs ul li a {
    font-weight: 500 !important;
    margin: 0 10px 10px 0 !important;
    padding: 0 !important;
    letter-spacing: inherit !important;
  }
  #profile-tabs ul li a .tab-text .credits {
    right: -9px !important;
    top: -13px !important;
  }
}

@media screen and (max-width: 375px) {
  .v2 #header #logo {
    width: 40%;
    padding-top: 12px;
  }
}