/* Keyframes */
@-webkit-keyframes fadein {
  0% {
    -webkit-transform: translateY(-20px);
    opacity: 0; }
  100% {
    -webkit-transform: translateY(0);
    opacity: 1; } }

@-moz-keyframes fadein {
  0% {
    -moz-transform: translateY(-20px);
    opacity: 0; }
  100% {
    -moz-transform: translateY(0);
    opacity: 1; } }

@keyframes fadein {
  0% {
    transform: translateY(-20px);
    opacity: 0; }
  100% {
    transform: translateY(0);
    opacity: 1; } }

.content {
  background-color: #ffffff;
  color: #000000; }

.authoring-odd-container {
  background-color: #ffffff;
  padding: 50px; }

.authoring-even-container {
  background-color: #ffffff;
  padding-bottom: 35px; }

.published-content-container {
  background-color: #085b9b;
  padding: 50px; }

.oa-tool-container {
  background-color: #f1f2f2;
  padding: 80px;
  font-family: "Open Sans", sans-serif; }

.oa-tool-title {
  font-family: "Open Sans", sans-serif;
  padding-bottom: 30px; }

.published-content {
  color: #ffffff;
  font-family: "Open Sans", sans-serif; }
  .published-content h3 {
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    margin-bottom: 50px; }

.published-title {
  display: inline-block;
  text-align: left; }
  .published-title h3 {
    margin-top: 0; }
  .published-title p {
    font-size: 16px; }

.tab-content {
  margin-left: 15px; }

[data-tab-content] {
  display: none; }

.active[data-tab-content] {
  display: block; }

.task-tabs {
  border-bottom: 3px solid #82899d; }

.task-tab {
  margin: 0 20px 5px 0;
  background-color: transparent;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  box-shadow: none;
  color: #82899d; }

.oa-tool-row {
  margin-right: 50px; }

.oa-tool-img {
  background-repeat: no-repeat;
  background-size: contain;
  height: 450px;
  background-image: url("https://oercommons.org/static/newdesign/images/section.png?1859dd3633d4"); }

.btn:active, .btn.active {
  box-shadow: none;
  color: #000000; }

.tab-content {
  padding-top: 20px; }

.published-content-img {
  border: 1px solid rgba(0, 0, 0, 0.3); }
  .published-content-img img {
    width: 100%; }

.instructor-view {
  text-align: left;
  padding: 30px; }
  .instructor-view h4 {
    font-weight: 700; }
    .instructor-view h4 i {
      padding: 10px; }
  .instructor-view p {
    padding-left: 40px; }

.audience-view {
  text-align: right; }
  .audience-view h4 {
    font-weight: 700; }
    .audience-view h4 i {
      padding: 10px; }
  .audience-view p {
    padding-right: 40px;
    padding-left: 50px; }

.authoring-create {
  color: #215064; }

.authoring-hero {
  background: url("https://oercommons.org/static/newdesign/images/oer-hero.jpg?1859dd3633d4") no-repeat;
  background-size: cover;
  height: 375px;
  padding-top: 5px; }
  .authoring-hero h1 {
    margin: 100px 0 20px 50px;
    font-family: "Open Sans", sans-serif;
    font-weight: 600; }
    @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 979px) {
      .authoring-hero h1 {
        margin: 100px 0 20px 0; } }
  .authoring-hero h3 {
    font-family: "Open Sans", sans-serif;
    margin: 0 0 20px 50px; }
    @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 979px) {
      .authoring-hero h3 {
        margin: 0 0 20px 0; } }
  .authoring-hero form button {
    margin: 0 0 20px 50px; }
    @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 979px) {
      .authoring-hero form button {
        margin: 0 0 20px 0; } }
.oa-icon {
  padding: 20px;
  height: 169px; }

.authoring-image-menu {
  width: 100%; }

.authoring-image-menu a {
  color: #000000;
  display: block;
  padding: 12px;
  text-decoration: none; }
  .authoring-image-menu a h4 {
    font-size: 16px;
    font-weight: 700; }
  .authoring-image-menu a:hover {
    background-color: #f1f2f2; }
    @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 979px) {
      .authoring-image-menu a:hover {
        background-color: #ffffff; } }
.active-menu-button {
  background-color: #f1f2f2; }
  @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 979px) {
    .active-menu-button {
      background-color: #ffffff; } }
.active-tab {
  color: #000000; }

.best-oer-container {
  padding: 100px 180px; }
  @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 979px) {
    .best-oer-container {
      padding: 0; } }
  .best-oer-container h1 {
    font-family: "Open Sans", sans-serif;
    font-weight: 600; }

.authoring-image-switcher-container {
  position: relative; }
  .authoring-image-switcher-container img {
    width: 100%;
    margin-top: 56px;
    border: 1px solid #d6dee0; }

.image-switcher.active {
  display: block; }

.image-switcher.inactive {
  display: none; }

.authoring-create-title {
  font: 500 23px/22px "Open Sans", sans-serif;
  margin: 45px 0 15px; }

.authoring-create-copy {
  font: 400 16px/23px "Open Sans", sans-serif;
  margin-bottom: 30px;
  padding: 0 100px; }
  @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 979px) {
    .authoring-create-copy {
      padding: 0; } }
.authoring-item {
  padding-top: 40px;
  height: 280px; }
  @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 979px) {
    .authoring-item {
      margin-bottom: 30px; } }
  @media only screen and (max-width: 767px), only screen and (min-width: 980px) and (max-width: 1199px) {
    .authoring-item {
      padding-top: 35px;
      height: 300px; } }
.authoring-item-icon {
  color: #d6dee0;
  font-size: 67px; }

.authoring-item-stacked-icon {
  color: #d6dee0;
  font-size: 44px;
  top: -9px;
  left: -4px;
  margin-bottom: -21px; }
  .authoring-item-stacked-icon .fa-stack-1x {
    font-size: 34px;
    top: -6px;
    left: 5px; }

.authoring-item-title {
  font: 700 18px/18px "Open Sans", sans-serif;
  margin: 15px 0 4px; }

.authoring-item-level {
  background-color: #ffffff;
  height: 21px;
  border-radius: 10px;
  padding: 3px 10px;
  position: absolute;
  top: 11px;
  right: 27px;
  font: 600 14px/14px "Arvo", serif; }

.authoring-item-copy {
  font: 14px/24px "Open Sans", sans-serif;
  margin: 18px; }

.authoring-item-more {
  background-color: #ffffff;
  height: 45px;
  position: relative;
  padding-top: 5px;
  margin: 25px 2px 0;
  bottom: -8px; }

.authoring-item-more-copy {
  color: #474f60;
  font: 400 14px/22px "Arvo", serif; }

.authoring-item-more-icon-wrapper {
  background-color: #085b9b;
  position: absolute;
  bottom: -19px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 34px;
  height: 34px;
  line-height: 34px;
  border-radius: 50%;
  cursor: pointer; }

.authoring-item-more-icon {
  color: #215064;
  font-size: 20px;
  position: relative;
  top: 2px; }

.authoring-reasons {
  padding: 44px 17px 0;
  color: #333333; }

@media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 979px) {
  .authoring-reasons-ct {
    margin-bottom: 20px;
    padding: 0 20px; } }

.authoring-reasons-title {
  font: 400 21px/22px "Arvo", serif;
  margin: 21px 0; }

.authoring-reasons-copy {
  font: 400 14px/22px "Open Sans", sans-serif;
  padding-right: 32px; }

.authoring-reasons-impact {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 30px 27px; }

.authoring-reasons-impact-title {
  font: 600 24px/22px "Open Sans", sans-serif;
  margin-bottom: 17px;
  margin-top: 0; }

.authoring-reasons-impact-copy {
  font: 400 16px/22px "Open Sans", sans-serif; }

.authoring-reasons-link {
  color: #085b9b;
  font-weight: 600; }

.authoring-reasons-img {
  background: url("https://oercommons.org/static/newdesign/images/impact-of-oer.png?1859dd3633d4") no-repeat center;
  background-size: contain;
  min-height: 115px;
  margin-top: 20px; }

.authoring-section {
  padding-top: 44px;
  font: 400 14px/22px "Open Sans", sans-serif;
  color: #333333; }

.authoring-section-divider {
  width: 83px;
  border-bottom: 4px solid #474f60;
  margin: 0 auto 65px; }

.authoring-section-image {
  background-repeat: no-repeat;
  background-size: contain;
  min-height: 342px; }
  @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 979px) {
    .authoring-section-image {
      background-position: center;
      margin: 0 auto; } }
  @media only screen and (max-width: 767px) {
    .authoring-section-image {
      max-width: 320px;
      min-height: 197px; } }
  @media only screen and (min-width: 768px) and (max-width: 979px) {
    .authoring-section-image {
      max-width: 550px;
      min-height: 339px; } }
  @media only screen and (min-width: 980px) and (max-width: 1199px) {
    .authoring-section-image {
      min-height: 278px; } }
  .authoring-section-image.open-author-screen {
    background-image: url("https://oercommons.org/static/newdesign/images/open-author-screen.png?1859dd3633d4"); }
  .authoring-section-image.lesson-screen {
    -moz-box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.35);
    box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.35);
    background-image: url("https://oercommons.org/static/newdesign/images/lesson-screen.png?1859dd3633d4"); }
  .authoring-section-image.module-screen {
    -moz-box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.35);
    box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.35);
    background-image: url("https://oercommons.org/static/newdesign/images/module-screen.png?1859dd3633d4"); }

.authoring-section-describe {
  padding-left: 25px; }
  @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 979px) {
    .authoring-section-describe {
      margin-top: 20px;
      padding-left: 0; } }
.authoring-section-describe-left {
  padding-right: 35px; }
  @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 979px) {
    .authoring-section-describe-left {
      margin-bottom: 30px;
      padding-right: 0; } }
  .authoring-section-describe-left h3 {
    color: #000000;
    padding-left: 12px; }

.authoring-section-title {
  font: 400 21px/22px "Arvo", serif;
  margin: 7px 0 21px; }

.authoring-section-copy {
  margin-bottom: 30px; }

.authoring-section-features {
  border-top: 1px solid #d6dee0;
  border-bottom: 1px solid #d6dee0;
  padding: 18px 2px 12px;
  margin: 50px 0 23px; }

.authoring-section-features-ct {
  margin-top: 25px;
  margin-left: 15px; }

.authoring-section-features-bullet {
  width: 8px;
  height: 8px;
  font-size: 8px;
  font-weight: 700;
  top: 11px;
  color: #82899d; }

.authoring-section-features-item {
  padding-left: 10px;
  padding-right: 45px; }
  .authoring-section-features-item:last-child {
    padding-right: 15px; }

.authoring-section-features-header {
  font: 400 18px/22px "Arvo", serif; }

.authoring-section-features-title {
  font-weight: 600;
  margin-bottom: 0; }

.authoring-heading {
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent; }

/* Keyframes */
@-webkit-keyframes fadein {
  0% {
    -webkit-transform: translateY(-20px);
    opacity: 0; }
  100% {
    -webkit-transform: translateY(0);
    opacity: 1; } }

@-moz-keyframes fadein {
  0% {
    -moz-transform: translateY(-20px);
    opacity: 0; }
  100% {
    -moz-transform: translateY(0);
    opacity: 1; } }

@keyframes fadein {
  0% {
    transform: translateY(-20px);
    opacity: 0; }
  100% {
    transform: translateY(0);
    opacity: 1; } }

.contribute {
  color: #ffffff;
  padding: 25px 45px 85px 0;
  height: auto;
  background-color: #2f7bb6;
  overflow: hidden; }
  @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 979px) {
    .contribute {
      padding: 20px; } }
.oa-contribute-image {
  height: 300px;
  padding-top: 30px; }
  @media only screen and (min-width: 1200px) {
    .oa-contribute-image {
      height: 400px;
      background-position: unset; } }
  @media only screen and (max-width: 767px) {
    .oa-contribute-image {
      padding-top: 0; } }
  .oa-contribute-image .video-title-white {
    margin: 0 0 40px;
    color: #ffffff;
    font: 400 21px "Arvo", serif; }
  .oa-contribute-image .contribute-video {
    display: inline-block; }
    @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 979px) {
      .oa-contribute-image .contribute-video {
        margin-bottom: 0;
        padding-top: 0;
        text-align: center; } }
    .oa-contribute-image .contribute-video iframe {
      width: 550px;
      height: 400px; }
      @media only screen and (min-width: 980px) and (max-width: 1199px) {
        .oa-contribute-image .contribute-video iframe {
          width: 360px;
          height: 260px; } }
      @media only screen and (min-width: 768px) and (max-width: 979px) {
        .oa-contribute-image .contribute-video iframe {
          width: 300px;
          height: 260px; } }
      @media only screen and (max-width: 767px) {
        .oa-contribute-image .contribute-video iframe {
          width: 250px;
          height: 200px; } }
.contribute-item {
  height: auto;
  text-align: left;
  padding-top: 45px; }
  @media only screen and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 979px) {
    .contribute-item {
      padding-top: 10px;
      margin-bottom: 30px;
      height: auto;
      text-align: center; } }
  .contribute-item p {
    font-family: "Open Sans", sans-serif;
    margin-bottom: 30px; }

.contribute-title {
  color: #ffffff;
  padding-bottom: 20px;
  font: 400 26px "Arvo", serif; }
  @media only screen and (max-width: 767px) {
    .contribute-title {
      padding-top: 0;
      padding-bottom: 0; } }
.btn-big-link {
  border-radius: 5px;
  font-weight: 600;
  height: 40px;
  border: 1px solid;
  font-weight: 600;
  min-width: 165px;
  font: 500 16px / 28px "Arvo", serif; }
  .btn-big-link.mod-library {
    background-color: #2f7bb6;
    color: #ffffff; }
  .btn-big-link:hover {
    background-color: #d6dee0;
    border-color: #d6dee0; }

.btn-learning {
  color: #ffffff;
  background-color: #2f7bb6; }
  .btn-learning:hover, .btn-learning:focus {
    background-color: #ffffff;
    border: 2px solid #2f7bb6;
    color: #2f7bb6; }
