/*
Theme Name: BlankSlate
Theme URI: https://github.com/tidythemes/blankslate
Author: TidyThemes
Author URI: TidyThemesURL
Version: 4.0.4
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl.html
Tags: one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Text Domain: blankslate

BlankSlate WordPress Theme © 2011-2017 TidyThemes
BlankSlate is distributed under the terms of the GNU GPL
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}.screen-reader-text{clip:rect(1px, 1px, 1px, 1px);position:absolute !important}

/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.button {
  display: inline-block;
  margin: .5em 0;
  border: 0;
  border-radius: .5rem;
  background-color: #4d97ff;
  cursor: pointer;
  padding: 1em 1.25em;
  color: white;
  font-size: .8rem;
  font-weight: bold;
  /* USER BUTTON STATES */
  /* DATA BUTTON STATES */ }
  .button:focus {
    outline: none; }
  .button.white {
    background-color: white;
    color: #4d97ff; 
}
  .button.pass {
    background-color: #0fbd8c; }
  .button.fail {
    background-color: #ffab1a; }
  .button:disabled {
    box-shadow: none; }

    /*
    Frameless           FramelessURL
    by Joni Korpi       JoniKorpiURL
    licensed under CC0  CreativeCommonsURL
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 639px) {
    .or
    {
        display: none; 
    }
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 640px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 640px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.flex-row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }
        .flex-row .top-justify
        {
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
                -ms-grid-row-align: flex-start;
            align-items: flex-start;         }
  .flex-row.column {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center; }
  .flex-row.uneven {
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
                -ms-grid-row-align: flex-start;
            align-items: flex-start; }
    .flex-row.uneven .short {
      width: 13.75em; }
    .flex-row.uneven .long {
      width: 38.75em;
      text-align: left; }
  @media only screen and (max-width: 639px) {
    .flex-row {
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column; }
      .flex-row.uneven .short,
      .flex-row.uneven .long {
        margin: auto;
        width: 90%; } }
/*
    Frameless           FramelessURL
    by Joni Korpi       JoniKorpiURL
    licensed under CC0  CreativeCommonsURL
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 639px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 640px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 640px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.masonry {
  -webkit-column-gap: 20px;
          column-gap: 20px;
  -webkit-column-width: 18.75em;
          column-width: 18.75em;
  padding-bottom: 1rem;
  -webkit-perspective: 1; }

@media only screen and (max-width: 479px) {
  .masonry {
    -webkit-column-count: 1;
            column-count: 1; } }

@media only screen and (min-width: 480px) and (max-width: 639px) {
  .masonry {
    -webkit-column-count: 1;
            column-count: 1; } }

@media only screen and (min-width: 640px) and (max-width: 941px) {
  .masonry {
    -webkit-column-count: 2;
            column-count: 2; } }

@media only screen and (min-width: 942px) {
  .masonry {
    -webkit-column-count: 3;
            column-count: 3; } }
/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           FramelessURL
    by Joni Korpi       JoniKorpiURL
    licensed under CC0  CreativeCommonsURL
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 639px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 640px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 640px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.title-banner {
  transition: background-image .5s ease, background-color .5s ease;
  margin-bottom: 40px;
/*  background-color: #0fbd8c;*/
  background-position: center;
  background-size: cover;
  padding: 20px 0;
  width: 100%; }

.sip-header .title-banner
    {
        background-image: url("https://sip.scratch.mit.edu/wp-content/uploads/2019/04/SIP-Homepage-Header-e1548786470837.jpg");
        padding-top: 7em;
        padding-bottom: 7em;
    }

.sip-header .title-banner .themes
    {
        background-image: url("https://sip.scratch.mit.edu/wp-content/uploads/2019/07/image2.jpg");
        padding-top: 7em;
        padding-bottom: 7em;
    }


.title-banner-h1,
.title-banner-p {
    margin: 0 auto;
    padding: 0 0;
    text-align: center;
    color: white; 
}
    
/*
    .sip-logo
    {
        padding-top:1em; max-width: 500px; 
    }
*/

.title-banner-h1 span
{
    position: relative;         
    top: -1.3em;
    right: 0.2em;
}
    
.title-banner-p {
  max-width: 1000px; }

.title-banner-strong {
  font-weight: 700; }

.title-banner.mod-blue-bg {
  background-color: #4d97ff; }
  .title-banner.mod-blue-bg a {
    color: white; }
  .title-banner.mod-blue-bg a.mod-underline {
    text-decoration: underline; }
/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           FramelessURL
    by Joni Korpi       JoniKorpiURL
    licensed under CC0  CreativeCommonsURL
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 639px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 640px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 640px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.overflow-hidden {
  /* to avoid double scroll bars this
    gets added to body while modal is open */
  overflow: hidden; }

.modal-content {
  position: relative;
  margin: 3.75rem auto;
  border-radius: 1rem;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
  background-color: white;
  padding: 0;
  width: 48.75rem; }
  .modal-content .modal-content {
    /* content inside of content */
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    border-radius: 0;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column; }
  .modal-content:focus {
    outline: none; }
  @media only screen and (max-width: 941px) {
    .modal-content {
      margin-top: 0;
      width: 100%;
      overflow: auto; } }
  @media only screen and (max-width: 479px), only screen and (max-height: 479px) {
    .modal-content {
      border-radius: 0;
      box-shadow: none;
      height: 100%; } }

.modal-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background-color: rgba(77, 151, 255, 0.7); }

.modal-content-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border-radius: 1rem;
  background-color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  text-align: center;
  line-height: 2rem; }

.modal-content-close-img {
  padding-top: 0.5rem; }

/* Close button, Submit button, etc. */
.action-buttons {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 1.125rem .8275rem .9375rem .8275rem;
  line-height: 1.5rem;
  -webkit-justify-content: flex-end !important;
      -ms-flex-pack: end !important;
          justify-content: flex-end !important;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap; }
  @media only screen and (max-width: 941px) {
    .action-buttons {
      -webkit-justify-content: center !important;
          -ms-flex-pack: center !important;
              justify-content: center !important;
      -webkit-flex-direction: row !important;
          -ms-flex-direction: row !important;
              flex-direction: row !important; } }

/* setting overall modal to contain overflow looks good, but isn't
compatible with elements (like validation popups) that need to bleed
past modal boundary. This class can be used to force modal button
row to appear to contain overflow. */
.action-buttons-overflow-fix {
  margin-bottom: .9375rem; }

.action-button {
  margin: 0 0 0 .54625rem;
  border-radius: .25rem;
  padding: 6px 1.25rem 14px 1.25rem;
  height: 36px; }

.action-button.close-button {
  border: 1px solid rgba(0, 0, 0, 0.1); }

.action-button-text {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

.action-button.disabled {
  background-color: rgba(0, 0, 0, 0.2); }

.error-text {
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  background-color: #ffab1a;
  padding: 1rem;
  min-height: 1rem;
  overflow: visible;
  color: white; }

.modal-sizes * {
  box-sizing: border-box; }

.modal-sizes {
  margin: 100px auto;
  outline: none;
  padding: 0;
  max-width: 36.25rem;
  /* 580px; */
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  @media only screen and (min-width: 480px) and (max-width: 639px), only screen and (min-height: 480px) and (max-height: 639px) {
    .modal-sizes {
      margin: 40px auto; } }
  @media only screen and (max-width: 479px), only screen and (max-height: 479px) {
    .modal-sizes {
      margin: 0 auto;
      width: auto; } }
  .modal-sizes .modal-header {
    padding-top: .75rem;
    width: 100%;
    height: 3rem; }
    @media only screen and (max-width: 479px), only screen and (max-height: 479px) {
      .modal-sizes .modal-header {
        border-radius: 0; } }
  .modal-sizes .content-label {
    text-align: center;
    color: white;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: bold; }
  .modal-sizes .modal-content {
    font-size: .875rem; }
/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           FramelessURL
    by Joni Korpi       JoniKorpiURL
    licensed under CC0  CreativeCommonsURL
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 639px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 640px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 640px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.mod-ttt {
  overflow: hidden; }

.ttt-modal-header {
  background-color: #4d97ff;
  height: 3rem; }

.ttt-modal-body {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 2.5rem 3rem; }

.mod-ttt-img {
  border-radius: .5rem;
  overflow: hidden;
  height: 18rem;
  width: 18rem; }

.ttt-content {
  margin-left: 2rem; }

.ttt-content-chunk + .ttt-content-chunk {
  margin-top: 1rem;
  border-top: 1px solid #d9d9d9;
  padding-top: 1rem; }

.ttt-description {
  margin-top: 0; }

a.ttt-try-tutorial-button {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }
  a.ttt-try-tutorial-button > span {
    color: white; }
  a.ttt-try-tutorial-button > img {
    margin-right: .5rem; }

.ttt-row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.ttt-item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }
  .ttt-item img {
    margin-right: 1rem; }
/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           FramelessURL
    by Joni Korpi       JoniKorpiURL
    licensed under CC0  CreativeCommonsURL
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 639px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 640px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 640px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.ttt-tile {
  display: inline-block;
  margin-top: 1px;
  margin-bottom: calc(1.25rem - 1px);
  border-radius: 1rem;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  background-color: white;
  width: 18.75em;
  text-align: center;
  min-height: 18.125rem; }

.ttt-tile-tutorial {
  display: inline-block;
  position: relative; }

.ttt-tile-image {
  border-radius: 1rem 1rem 0 0;
  background: #4d97ff;
  width: 100%; }

.ttt-tile-image-img {
  display: block;
  border-radius: 1rem 1rem 0 0;
  width: 100%; }

.ttt-tile-image-try {
  display: none;
  position: absolute;
  top: 4rem;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  text-align: center;
  color: white; }

.mod-ttt-try-button {
  border: 1px solid white;
  background-color: transparent; }

.ttt-tile-info {
  position: relative;
  cursor: pointer;
  padding: 1rem 0; }

.ttt-tile-tag {
  display: inline-block;
  position: absolute;
  top: -1rem;
  left: 1rem;
  margin: .5em 0;
  border: 0;
  border-radius: 1rem;
  background-color: #4d97ff;
  padding: .25rem 1rem;
  color: white;
  font-size: .8rem;
  font-weight: bold; }

.ttt-tile-title {
  margin: .5rem auto;
  width: calc(100% - 3rem); }

.ttt-tile-description {
  margin: auto;
  width: calc(100% - 3rem);
  font-size: .875rem; }

.ttt-tile-guides {
  margin: auto;
  border-top: 1px dashed #d9d9d9;
  border-radius: 0 0 1rem 1rem;
  cursor: pointer;
  padding: 1.25rem 0;
  color: #4d97ff;
  font-size: .75rem;
  font-weight: 500; }
  .ttt-tile-guides:hover {
    background-color: rgba(77, 151, 255, 0.1); }

.ttt-tile-open-modal {
  display: inline-block;
  padding: 0 .25rem;
  width: 1rem;
  height: 1rem;
  vertical-align: text-bottom; }
/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           FramelessURL
    by Joni Korpi       JoniKorpiURL
    licensed under CC0  CreativeCommonsURL
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 639px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 640px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 640px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.row label {
  font-weight: 500; }

.input {
  transition: all .5s ease;
  margin-bottom: .75rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  background-color: #fafafa;
  padding: 0 1rem;
  height: 3rem;
  color: #575e75;
  font-size: .875rem;
  /* IE10/11-specific style resets */ }
  .input:focus {
    transition: all .5s ease;
    outline: none;
    border: 1px solid #4d97ff; }
  .input.fail {
    border: 1px solid #ffab1a; }
  .input.pass {
    border: 1px solid #0fbd8c; }
  .input::-ms-reveal, .input::-ms-clear {
    display: none; }
/*
 * Styles for the Row component used by formsy-react-components
 * Should be imported for each component that extends one of
 * the formsy-react-components
 */
.row .required-symbol {
  display: none; }

.row label {
  display: inline-block;
  margin-bottom: .75rem; }

.row.no-label label {
  display: none; }

.row-label {
  margin-bottom: .75rem;
  line-height: 1.7rem; }
/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           FramelessURL
    by Joni Korpi       JoniKorpiURL
    licensed under CC0  CreativeCommonsURL
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 639px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 640px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 640px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.dropdown {
  display: none;
  position: absolute;
  right: 0;
/*  border: 1px solid rgba(0, 0, 0, 0.1);*/
  border-radius: 0 0 5px 5px;
  background-color: #4d97ff;
  padding: 5px;
/*  min-width: 9rem;*/
  max-width: 16.25rem;
  overflow: visible;
  color: white;
  font-size: .8125rem;
  font-weight: normal; }
  .dropdown.staging {
    background-color: #ffab1a; }
  .dropdown.open {
    display: block; }
  .dropdown a:link, .dropdown a:visited, .dropdown a:active {
    background-color: transparent;
    color: white; }
  .dropdown input {
    margin-bottom: 12px;
    width: calc(100% - 30px); }
  .dropdown label {
    display: block;
    margin-bottom: 5px; }
  .dropdown > li {
    display: block;
    line-height: 30px; }
    .dropdown > li.divider {
      margin-top: 10px;
      border-top: 1px solid rgba(0, 0, 0, 0.1); }
    .dropdown > li a {
      display: block;
      padding: 0 10px; }
      .dropdown > li a:hover {
        background-color: rgba(0, 0, 0, 0.1);
        text-decoration: none; }
  .dropdown.with-arrow {
    margin-top: 14px;
    border-radius: 5px;
    overflow: visible; }
    .dropdown.with-arrow:before {
      display: block;
      position: absolute;
      top: -7px;
      right: 10%;
      -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
              transform: rotate(45deg);
/*
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      border-left: 1px solid rgba(0, 0, 0, 0.1);
*/
      border-radius: 5px;
      background-color: #4d97ff;
      width: 14px;
      height: 14px;
      content: ""; }
.studio-status-icon-spinner {
  /* This class can be used on an icon that should spin.
    It first plays the intro animation, then spins forever. */
  animation-name: intro, spin;
  animation-duration: .25s, .5s;
  animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), linear;
  animation-delay: 0s, .25s;
  animation-iteration-count: 1, infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  width: 1.4rem;
  /* standard is 1.4 rem but can be overwritten by parent */
  height: 1.4rem;
  -webkit-animation-name: intro, spin;
  -webkit-animation-duration: .25s, .5s;
  -webkit-animation-iteration-count: 1, infinite;
  -webkit-animation-delay: 0s, .25s;
  -webkit-animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), linear;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center; }

@-webkit-keyframes intro {
  0% {
    transform: scale(0);
    opacity: 0;
    -webkit-transform: scale(0); }
  100% {
    transform: scale(1);
    opacity: 1;
    -webkit-transform: scale(1); } }

@keyframes intro {
  0% {
    transform: scale(0);
    opacity: 0;
    -webkit-transform: scale(0); }
  100% {
    transform: scale(1);
    opacity: 1;
    -webkit-transform: scale(1); } }

@-webkit-keyframes spin {
  0% {
    transform: rotate(0);
    -webkit-transform: rotate(0); }
  100% {
    transform: rotate(359deg);
    -webkit-transform: rotate(359deg); } }

@keyframes spin {
  0% {
    transform: rotate(0);
    -webkit-transform: rotate(0); }
  100% {
    transform: rotate(359deg);
    -webkit-transform: rotate(359deg); } }
/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.login {
  padding: 10px;
  width: 200px;
  line-height: 1.5rem;
  white-space: normal;
  color: white;
  font-size: .8125rem; }
  .login .button {
    padding: .75em; }
  .login .row {
    margin-bottom: 1.25rem; }
  .login .input {
    margin-bottom: 12px;
    width: calc(100% - 30px);
    height: 2.25rem; }
  .login label {
    padding-top: 5px;
    font-weight: bold; }
  .login .right {
    float: right; }
  .login .spinner {
    margin: 0 .8rem;
    width: 1rem;
    vertical-align: middle; }
  .login .submit-button {
    margin-top: 5px; }
  .login a {
    margin-top: 15px;
    color: white; }
    .login a:link, .login a:visited, .login a:active {
      color: white; }
    .login a:hover {
      background-color: transparent; }
  .login .error {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background-color: #ffab1a;
    padding: .75em 1em; }
/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
#navigation {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
  background-color: #4d97ff;
/*  background-color: #0fbd8c;*/
  width: 100%;
  /* NOTE: Height should match offset settings in main.scss file */
  height: 50px; }
  #navigation.staging {
    background-color: #ffab1a; }
  .ie9 #navigation {
    display: table;
    table-layout: fixed; }
  #navigation .inner > ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: 0;
    height: 50px;
    list-style: none;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start; }
    .ie9 #navigation .inner > ul {
      display: table-row; }
    #navigation .inner > ul > li {
      display: inline-block;
      position: relative;
      float: left;
      margin: 0;
      height: 100%;
      -webkit-align-self: flex-start;
          -ms-flex-item-align: start;
              align-self: flex-start; }
      #navigation .inner > ul > li.right {
        float: right;
        margin-left: auto;
        -webkit-align-self: flex-end;
            -ms-flex-item-align: end;
                align-self: flex-end; }
        .ie9 #navigation .inner > ul > li.right {
          float: none; }
        #navigation .inner > ul > li.right a:hover {
          background-color: rgba(0, 0, 0, 0.1); }
      .ie9 #navigation .inner > ul > li {
        display: table-cell;
        float: none;
        height: 50px;
        vertical-align: bottom; }
  #navigation .link > a {
    display: block;
    padding: 13px 15px 4px 15px;
    height: 33px;
    text-decoration: none;
    white-space: nowrap;
    color: white;
    font-size: .85rem;
    font-weight: bold; }
    #navigation .link > a:hover {
      background-color: rgba(0, 0, 0, 0.1); }

    #nav-mobile 
    {
        display: none !important;
    }

    #nav-desktop-events
    {
        display: block !important;
    }
    
    #nav-desktop-themes
    {
        display: block !important;
    }
    
    #nav-desktop-signup
    {
        display: block !important;
    }
    


/*
    Frameless           FramelessURL
    by Joni Korpi       JoniKorpiURL
    licensed under CC0  CreativeCommonsURL
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 639px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 640px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 640px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.modal-content-iframe {
  border: 0; 
    }
    
    
/*
    Frameless           FramelessURL
    by Joni Korpi       JoniKorpiURL
    licensed under CC0  CreativeCommonsURL
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 639px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 640px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 640px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.modal-content.mod-registration {
  width: 38.125rem;
  overflow: hidden; }

.modal-content-iframe.mod-registration {
  width: 38.125rem;
  min-height: 27.375rem; }

@media only screen and (max-width: 941px) {
  .modal-content.mod-registration {
    width: 100%;
    overflow: scroll; }
  .modal-content-iframe.mod-registration {
    height: 27.375rem; } }
/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           FramelessURL
    by Joni Korpi       JoniKorpiURL
    licensed under CC0  CreativeCommonsURL
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 639px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 640px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 640px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.account-nav .user-info {
  display: inline-block;
  padding: 14px 15px 4px 15px;
  max-width: 260px;
  height: 33px;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: white;
  font-size: .8125rem;
  font-weight: normal; }
  .account-nav .user-info .avatar {
    margin-right: 10px;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    vertical-align: middle; }
  .account-nav .user-info:hover {
    background-color: rgba(0, 0, 0, 0.1); }
  .account-nav .user-info.open {
    background-color: rgba(0, 0, 0, 0.1); }
  .account-nav .user-info:after {
    display: inline-block;
    margin-left: 8px;
    background-image: url("https://scratch.mit.edu/images/dropdown.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50%;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    content: " "; }

.account-nav .dropdown {
  top: 50px;
  padding: 0;
  padding-top: 5px;
  width: 100%;
  box-sizing: border-box; }

@media only screen and (max-width: 479px) {
  .account-nav {
    margin-left: 0; }
    .account-nav .user-info .avatar {
      margin-right: 0; }
    .account-nav .user-info:after {
      display: none; } }

@media only screen and (min-width: 480px) and (max-width: 639px) {
  .account-nav {
    margin-left: 0; }
    .account-nav .user-info .avatar {
      margin-right: 0; }
    .account-nav .user-info:after {
      display: none; } }

@media only screen and (min-width: 640px) and (max-width: 941px) {
  .account-nav {
    margin-left: 0; } }
/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           FramelessURL
    by Joni Korpi       JoniKorpiURL
    licensed under CC0  CreativeCommonsURL
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 639px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 640px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 640px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

#navigation.staging .messages .message-count {
  display: none; }
  #navigation.staging .messages .message-count.show {
    background-color: #4d97ff; }

#navigation .logo {
  margin-right: 10px; }
  #navigation .logo a {
    display: block;
    transition: .15s ease all;
    margin: 0 6px 0 0;
    border: 0;
    background-image: url("https://scratch.mit.edu/images/logo_sm.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 95%;
    width: 81px;
    height: 50px; }
    #navigation .logo a:hover {
      transition: .15s ease all;
      background-size: 100%; }

#navigation .inner > ul > li.search {
  margin: 0 20px;
  border-right: 0;
  color: white;
  -webkit-flex-grow: 3;
      -ms-flex-positive: 3;
          flex-grow: 3; }
  .ie9 #navigation .inner > ul > li.search {
    width: 100%; }
  #navigation .inner > ul > li.search .form {
    margin: 0; }
  #navigation .inner > ul > li.search .row .help-block {
    display: none; }
  #navigation .inner > ul > li.search .input,
  #navigation .inner > ul > li.search .button {
    display: inline-block;
    margin-top: 5px;
    outline: none;
    border: 0;
    background-color: rgba(0, 0, 0, 0.1);
    height: 14px; }
    #navigation .inner > ul > li.search .input[type=text],
    #navigation .inner > ul > li.search .button[type=text] {
      transition: .15s ease background-color;
      padding: 0;
      padding-right: 10px;
      padding-left: 40px;
      width: calc(100% - 50px);
      height: 40px;
      color: white;
      font-size: .85em; }
      #navigation .inner > ul > li.search .input[type=text]::-webkit-input-placeholder,
      #navigation .inner > ul > li.search .button[type=text]::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.75); }
      #navigation .inner > ul > li.search .input[type=text]:-ms-input-placeholder,
      #navigation .inner > ul > li.search .button[type=text]:-ms-input-placeholder {
        color: rgba(255, 255, 255, 0.75); }
      #navigation .inner > ul > li.search .input[type=text]::placeholder,
      #navigation .inner > ul > li.search .button[type=text]::placeholder {
        color: rgba(255, 255, 255, 0.75); }
      #navigation .inner > ul > li.search .input[type=text]:focus,
      #navigation .inner > ul > li.search .button[type=text]:focus {
        transition: .15s ease background-color;
        background-color: rgba(0, 0, 0, 0.2); }
      .ie9 #navigation .inner > ul > li.search .input[type=text], .ie9
      #navigation .inner > ul > li.search .button[type=text] {
        width: 70px; }
  #navigation .inner > ul > li.search .btn-search {
    position: absolute;
    box-shadow: none;
    background-color: transparent;
    background-image: url("https://scratch.mit.edu/images/nav-search-glass.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 14px 14px;
    width: 40px;
    height: 40px; }
    #navigation .inner > ul > li.search .btn-search:hover {
      box-shadow: none; }

#navigation .messages > a,
#navigation .mystuff > a {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 45%;
  padding-right: 10px;
  padding-left: 10px;
  width: 30px;
  overflow: hidden;
  text-indent: 50px;
  white-space: nowrap; }
  #navigation .messages > a:hover,
  #navigation .mystuff > a:hover {
    background-size: 50%; }

#navigation .messages > a {
  background-image: url("https://scratch.mit.edu/images/nav-notifications.png"); }

#navigation .messages .message-count {
  display: none; }
  #navigation .messages .message-count.show {
    display: block;
    position: absolute;
    top: .5rem;
    right: .25rem;
    border-radius: 1rem;
    background-color: #ffab1a;
    padding: 0 .25rem;
    text-indent: 0;
    line-height: 1rem;
    color: white;
    font-size: .7rem;
    font-weight: bold; }

#navigation .mystuff > a {
  background-image: url("https://scratch.mit.edu/images/mystuff.png"); }

@media only screen and (max-width: 479px) {
/*
  #navigation .inner {
    width: 18.75em; }
*/
    #navigation .inner > ul > li.login-item {
      margin-left: 0; }
    #navigation .inner .discuss,
    #navigation .inner .explore,
    #navigation .inner .search,
    #navigation .inner .help,
    #navigation .inner .mystuff,
    #navigation .inner .profile-name {
      display: none; } }
    
    #navigation .inner .create span
    {
        position: relative;
        top: -0.92em;
/*        right: -0.5em;*/
    }
/*
    
    #navigation .inner .right 
    {
        position: relative; 
        right: -0.01em;
    }
*/

@media only screen and (min-width: 480px) and (max-width: 639px) {
  #navigation .inner {
    width: 28.75em; }
    #navigation .inner > ul > li.login-item {
      margin-left: 0; }
    #navigation .inner .discuss,
    #navigation .inner .explore,
    #navigation .inner .search,
    #navigation .inner .mystuff,
    #navigation .inner .profile-name {
      display: none; } }

@media only screen and (min-width: 640px) and (max-width: 941px) {
  #navigation .inner {
    width: 38.75em; }
    #navigation .inner > ul > li.login-item {
      margin-left: 0; }
    #navigation .inner .explore,
    #navigation .inner .search,
    #navigation .inner .mystuff {
      display: none; } }
/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
#footer {
  display: block;
  background-color: #f2f2f2;
  padding: 10px 0;
  color: #575e75;
  font-size: .85rem; }
/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           FramelessURL
    by Joni Korpi       JoniKorpiURL
    licensed under CC0  CreativeCommonsURL
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 639px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 640px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 640px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.select label {
  font-weight: 500; }

.select select {
  transition: border .5s ease;
  margin-bottom: .75rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  background: #fafafa url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48dGl0bGU+Y2Fyb3QtaG92ZXI8L3RpdGxlPjxwYXRoIGQ9Ik0yNCwyOS40M2ExLjg3LDEuODcsMCwwLDEtMS4zMy0uNTVsLTUuMTEtNS4xMWExLjg3LDEuODcsMCwwLDEsMC0yLjY1YzAuNzMtLjczLDEyLjE0LTAuNzMsMTIuODcsMGExLjg3LDEuODcsMCwwLDEsMCwyLjY1bC01LjExLDUuMTFBMS44NywxLjg3LDAsMCwxLDI0LDI5LjQzWiIgZmlsbD0iI2IzYjNiMyIvPjxyZWN0IHg9IjAuMDEiIHdpZHRoPSIxIiBoZWlnaHQ9IjQ4IiBmaWxsPSIjMjMxZjIwIiBvcGFjaXR5PSIwLjEiLz48L3N2Zz4=) no-repeat right center;
  padding-right: 4rem;
  padding-left: 1rem;
  width: 100%;
  height: 3rem;
  color: #575e75;
  font-size: .875rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
  .select select::-ms-expand {
    display: none; }
  .select select::-ms-value {
    background-color: inherit;
    padding-left: 1rem;
    color: inherit; }
  .select select:focus {
    outline: none;
    border: 1px solid #4d97ff; }
  .select select:-moz-focusring {
    text-shadow: 0 0 0 #575e75;
    color: transparent; }
  .select select:focus, .select select:hover {
    background: #fafafa url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48dGl0bGU+Y2Fyb3Q8L3RpdGxlPjxyZWN0IHg9IjAuMDEiIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0iIzIzMWYyMCIgb3BhY2l0eT0iMC4xIi8+PHBhdGggZD0iTTI0LDI5LjQzYTEuODcsMS44NywwLDAsMS0xLjMzLS41NWwtNS4xMS01LjExYTEuODcsMS44NywwLDAsMSwwLTIuNjVjMC43My0uNzMsMTIuMTQtMC43MywxMi44NywwYTEuODcsMS44NywwLDAsMSwwLDIuNjVsLTUuMTEsNS4xMUExLjg3LDEuODcsMCwwLDEsMjQsMjkuNDNaIiBmaWxsPSIjYjNiM2IzIi8+PC9zdmc+) no-repeat right center; }
  .select select > option {
    background-color: white;
    width: 100%; }
/*
    Frameless           FramelessURL
    by Joni Korpi       JoniKorpiURL
    licensed under CC0  CreativeCommonsURL
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 639px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 640px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 640px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.language-chooser .select select {
  width: 13.75rem;
  /* 3 columns */ }
/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           FramelessURL
    by Joni Korpi       JoniKorpiURL
    licensed under CC0  CreativeCommonsURL
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 639px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 640px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 640px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

#footer .lists {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  #footer .lists dl {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    font-size: .8rem; }
  #footer .lists dt {
    display: block;
    margin-bottom: 8px; }
  #footer .lists dd {
    display: block;
    margin: 5px 0;
    line-height: 1.2rem; }
    #footer .lists dd a {
      font-weight: 400; }

#footer .copyright {
  display: block;
  width: 100%;
  text-align: center; }
  #footer .copyright p {
    font-size: .7rem; }

#footer .language-chooser {
  text-align: center; }
.crash-container {
  /* UI Primary Colors */
  /* #FF661A */
  /* UI Secondary Colors */
  /* 3.0 colors */
  /* Using www naming convention for now, should be consistent with gui */
  /* modals */
  /* Overlay UI Gray Colors */
  /* Typography Colors */
  /* Down Deep */
  /*
    Frameless           FramelessURL
    by Joni Korpi       JoniKorpiURL
    licensed under CC0  CreativeCommonsURL
*/
  /* Media Queries */
  /* Width */
  /*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
  /* Height */
  margin: 3rem auto;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  background-color: #fcfcfc;
  width: 60%;
  overflow: hidden;
  text-align: center; }
  @media only screen and (max-width: 479px) {
    .crash-container #view {
      text-align: center; }
    .crash-container .inner {
      margin: 0 auto;
      width: 100%; } }
  @media only screen and (min-width: 480px) and (max-width: 639px) {
    .crash-container #view {
      text-align: center; }
    .crash-container .inner {
      margin: 0 auto;
      width: 480px; } }
  @media only screen and (min-width: 640px) and (max-width: 941px) {
    .crash-container #view {
      text-align: center; }
    .crash-container .inner {
      margin: 0 auto;
      width: 640px; } }
  @media only screen and (min-width: 942px) {
    .crash-container .inner {
      margin: 0 auto;
      width: 942px; } }
  .crash-container img {
    width: 100%; }
  .crash-container .crash-message {
    margin: 2rem; }
/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           FramelessURL
    by Joni Korpi       JoniKorpiURL
    licensed under CC0  CreativeCommonsURL
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 639px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 640px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 640px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

/* Tags */
html,
body {
  display: block;
  margin: 0;
  background-color: #f2f2f2;
  padding: 0;
  color: #575e75;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif; }

/* Typography */
h1,
h2,
h3,
h4 {
  margin: 0;
  border: 0;
  padding: 0;
  color: #575e75;
  font-weight: bold; }

h1 {
  font-size: 2.5rem;
  font-weight: bold; }

h2 {
  font-size: 2rem;
  font-weight: bold; }

h3 {
  font-size: 1.4rem;
  font-weight: bold; }

h4 {
  font-size: 1rem;
  font-weight: bold; }

h5 {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .85rem;
  font-weight: bold; }

p.legal {
  font-size: .8rem; }

p.intro {
  font-size: 1.1rem; }

p.callout {
  margin: 1.5em 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: .5rem;
  background-color: rgba(77, 151, 255, 0.1);
  padding: 1.25em; }
  p.callout.orange {
    background-color: rgba(244, 157, 37, 0.1); }

p a {
  white-space: nowrap; }

b,
strong {
  font-weight: bold; }

/* Links */
a {
  cursor: pointer;
  color: #4d97ff;
  font-weight: bold; }
  a:link, a:visited, a:active {
    text-decoration: none;
    color: #4d97ff; }
  a:hover {
    text-decoration: none;
    color: #4280d7; }

/* Classes */
.empty {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  background-color: rgba(77, 151, 255, 0.1);
  padding: 10px;
  text-align: center;
  line-height: 2rem;
  color: #575e75; }
  .empty h4 {
    color: #575e75; }

h1,
h2,
h3,
h4,
h5,
p {
  line-height: 1.7em;
  color: #575e75; }

p {
  font-size: 1rem;
  font-weight: normal; }

::selection {
  background-color: rgba(77, 151, 255, 0.25); }

ol,
ul {
  padding-left: 20px;
  line-height: 1.5em;
  font-size: 1rem;
  font-weight: normal; }
  ol li,
  ul li {
    margin: .75em 0; }

dl {
  line-height: 1.5rem;
  font-size: 1rem;
  font-weight: normal; }
  dl dt {
    font-weight: bold; }
  dl dd {
    margin: 0; }

#view {
  display: inline-block;
  /* NOTE: Margin should match height in navigation.scss */
  margin-top: 50px;
  background-color: #fcfcfc;
  padding: 20px 0;
  min-width: 100%;
  min-height: 768px; }
/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           FramelessURL
    by Joni Korpi       JoniKorpiURL
    licensed under CC0  CreativeCommonsURL
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 639px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 640px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 640px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

#view {
  background-color: white;
  padding: 0; }

.banner-wrapper  {
  background-image: url("https://sip.scratch.mit.edu/wp-content/uploads/2019/04/DSCF4629.jpg") no-repeat; }

.activity
    {
  background-image: url("https://scratch.mit.edu/images/ideas/right-juice.png"), url("https://scratch.mit.edu/images/ideas/left-juice.png");
  background-position: right bottom, left bottom;
  background-repeat: no-repeat, no-repeat;

/*        background-color: #4d97ff;*/
    }

.twitter
    {

  background-image: url("https://scratch.mit.edu/images/ideas/right-juice.png"), url("https://scratch.mit.edu/images/ideas/left-juice.png");
  background-position: right bottom, left bottom;
  background-repeat: no-repeat, no-repeat;
    
    }

    
.ideas-banner {
  margin-bottom: 0;
    }

.ttt-section {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  text-align: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }

.tips-divider {
  border-top: 2px solid #e2e2e2;
  width: 100%; }

    
.footer-divider {
  border-top: 1px solid #e2e2e2;
  width: 100%; }

    
.tips-banner-image {
  max-width: calc(100% - 2rem); }

.ideas-button {
  margin-right: .75rem;
  background-color: #4d97ff;
  color: white;
  font-size: 1rem; }
  .ideas-button img {
    margin-right: 1rem;
    height: 1.5rem;
    vertical-align: middle; }
  .ideas-button a {
    color: white; }
  .ideas-button span {
    vertical-align: middle; }

.wide-button {
  width: 100%; }

.ideas-all-cards {
  padding: 5rem 2rem !important; }

.ideas-starter {
  padding: 5rem 0 !important; }

.tips-getting-started {
  background-color: #fafafa;
  padding-top: 2.5rem; 
    padding-bottom: 2.5rem; }

    .no-bottom
    {
        margin-bottom:0 !important; 
    }
    
    .no-top
    {
        margin-top: 0;
    }
    
.tips-left {
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start; }

.ideas-image {
/*  margin-right: 2rem;*/

    }
    
.player {
  border-radius: 0.5rem;
  overflow: hidden;
  z-index: 1;
/*    padding-bottom: 2rem; */
    

    
/*
  height: 320px;
  width: 480px;
*/
}

.workshop-player {
    border-radius: 0.5rem;
    overflow: hidden;
    z-index: 1;
/*    padding-bottom: 2rem; */
    

    
/*
  height: 320px;
  width: 480px;
*/
}

    .nav-inner
    {
        width: 90%;
    }
    
    .monthly-intro
    {
/*        background-color: #0da57a; */
        margin:0 auto;
    }

    
    .monthly-intro img
    {
        margin-left: auto;
        margin-right: auto; 
        text-align: center;
    }
    
    .monthly-intro h1
    {
        color: white; text-align:center; 
    }

    .monthly-intro .calendar
    {
        padding-top: 1.2em;
    }

    .monthly-intro p
    {
        color:white; padding: 1em 4.5em; margin:0 auto; padding-bottom: 3em; font-weight: normal;
    }

    
    .centered
    {
        text-align: center;
    }
    
    
    .monthly-video 
    {
        margin-bottom: 5rem;
        border-radius: 1rem;
    }
    
    #wistia_chrome_26
    {
        border-radius: 0.5rem;
    }

    .monthly-video p
    {
        margin:0; 
        color: white; padding: 1.8em; padding-top: 2.5em; font-weight: normal;
        text-align: center;
    }
    
    .monthly-video .player
    {
        width: 50%;
        margin: 0 auto; 
    }
    
    .monthly-content
    {
/*        background-color: #0fbd8c; */
        margin:0;
    }
    
    .monthly-item
    {
        margin: 1.5rem auto; 
        padding: 2em; 
        background-color: white; 
        width: 80%; 
        text-align: left;
        border-radius: 1rem;
    }
    
    
    .monthly-item p
    {
        margin-bottom: 0.7rem;
    }
    
    .monthly-item .left-column
    {
        padding-left: 2rem;
        margin: 1em;
        margin-bottom: 0;
        width: 50%;
    }
    
    .monthly-item .right-column
    {
        padding-left:2em;
        padding-right:2em;
    
    }
    
    .monthly-item .descriptor
    {
        margin-bottom:0.2em;
    }

    .summer .summer-section-heading p
    {
        text-align: center; 
    }

    .summer .descriptor
    {
        font-weight: bold; 
    }

    .bright-blue
    {
        background: url("https://sip.scratch.mit.edu/wp-content/uploads/2019/05/clouds.svg") no-repeat;
        background-size: 100%;
        background-position: center; 
    }

    .connect-in-person
    {
        padding-left: 2rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .connect-in-person-title
    {
        width: 55%;
    }

    .connect-in-person-button
    {
        padding: 0;
    }


    .summer .flex-row .monthly-item
{
    padding: 0;
    flex-wrap: nowrap;
}

.summer .monthly-item
{
    flex-wrap: nowrap;
}

.summer .monthly-item .connect-in-person-title p
{
    margin: 0; 
}

.connect-online-date
{
    width: 20%; 
/*    padding-left: 1.5rem; */
    padding-right: 1rem;
}


.connect-online-date p
{
    font-weight: bold;
    margin: 0;
}



.connect-online-title
{
    border-left: 1px solid rgba(87, 94, 117, .25); 
    padding-left: 2rem; 
    width: 80%; 
    padding-right: 1.5rem;
}


.aqua-box
{
    background-color: #0fbd8c; 
    padding: 0.75rem; 
    border-radius: 0.25rem;
    color: white;
    margin-top: 1rem;
}

    .summer .monthly-item
    {
        width: 70%;
    }

    .summer h2
    {
        padding-top: 2rem;
        padding-bottom: 1rem;
    }

    .rounded-image
    {
        border-radius: 0.3rem;
    }
    
    
    .sip-tips .flex-row 
    {
        padding:1rem 0;
    }
    
    .sip-tips h2
    {
        color: white;
        text-align: center;
        margin-top: 5rem; margin-bottom: 0;    
        padding-bottom: 0.3rem; 
    }

    .sip-tips
    {
        padding-bottom: 2.5rem;
    }
    
    
    .sip-tips p
    {
        color: white;
        padding-top: 0;
        margin-top: 0;
        text-align: center;
        margin-bottom: 0;
        padding-bottom: 0.5rem;
    }

    .sip-tips h3
    {
        color: white;
        text-align: center;
        padding: 0;
        margin: 0; 
        font-weight: bold;

    }
    
    #more
    {
        display:none;
    }
    
    
    .social-media
    {
        background-color: #E5F0FF; margin-bottom: 0;
    }
    
    
    .twitter-chat-banner
    {
        margin-left: auto; 
        margin-right: auto; 
        margin-bottom: 3rem !important; 
/*        width: 80%; */
        padding:1.5rem; 
        background-color: hsla(215, 100%, 65%, 0.15); 
        border: solid 1px hsla(215, 100%, 65%, 0.35);
        border-radius: 0.5rem;
    }
    
    
    .twitter-chat-banner p
    {
        margin:0;
        vertical-align: middle;
    }
    
    .twitter-chat-banner img
    {
        vertical-align: middle; 
    }
    
    .social-media .twitter-icon
    {
        margin: 1em; margin-top: 2em
    }
    
    .social-media .twitter-button
    {
        margin: 1em; margin-bottom: 2.5em;
    }
    
    .social-media .twitter-title
    {
        margin: 1em;
    }
    
    
    .social-media .twitter-collection
    {
        margin: 1em; margin-bottom:0; padding-bottom: 6rem;
    }

    .social-media .ideas-image .twitter-collection
    {
        width: 100%;
    }

    .social-media .two-column-social .twitter-collection
    {
        padding-bottom: 0;
    }
    
    .social-media .left-column
    {
        width: 50%; 
        margin-left: 0;
    }

    .social-media .teaching-with-scratch
    {   
        margin-right: 0; 
        padding-left: 2rem;
    }
    
    .social-media .teaching-with-scratch h2
    {
        text-align: left; 
    }

    .twitter-timeline p
    {
        font-size: 0.8rem !important;   
    }

.twitter-timeline  
{
    font-size: 1rem !important;
    line-height: 18px !important;
    font-weight: 400 !important;
}



/* =============== AFRICACODEWEEK =========================== */

    #africa-code-week-header
    {
        background-image: url(https://sip.scratch.mit.edu/wp-content/uploads/2019/08/Sip-ACW-Header-1.jpg); 
        padding-top: 8.5em; 
        padding-bottom: 8.5em; 
        background-size: cover;
    }

    .africa-code-week
    {
        margin-top: 0; padding-top: 1rem; padding-bottom: 3rem;
    }



/* =============== SCRATCHATHOME =========================== */



    .scratchathome-mobile-view
    {
        display:none;
    }
 
    .scratchathome-livestream-archive h3
    {
        padding-bottom: 1rem; 
    }

    .scratchathome-livestream-archive
    {
        margin-left: auto; 
        margin-right: auto; 
        width: 50%;
    }

    .scratchathome-livestream-archive iframe
    {
        padding-bottom: 2rem;
    }


    .scratchathome-section-title
    {
        font-weight: bold;
        text-decoration: underline;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;

    }

    .scratchathome-title
    {
        text-align: center;
        padding-bottom: 1rem;
    }
    

    .scratchathome-image
    {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .scratch-month-item .scratchathome-paragraph
    {
        padding-bottom: 2rem !important;
    }

#scratchathome-header
{
    padding-bottom: 1rem;
}



/* =============== OSCHOOSER ===================== */

.os-chooser {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
/*
  position: -webkit-sticky;
  position: sticky;
*/
  top: 50px;
  z-index: 9;
/*  box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);*/
  background-color: white;
  padding-top: 0;
  padding-right: 0;
  padding-left: 0;
    padding-bottom: 4rem;
  text-align: center;
    height: 5rem; }
  .os-chooser .inner {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center; }
  .os-chooser span {
    margin-right: 1rem;
    font-weight: 600; }
  .os-chooser .button {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-right: 1rem;
    border-radius: 1.6rem;
    background-color: rgba(77, 151, 255, 1);
    padding: .5rem 1.1rem;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    box-sizing: border-box; }
    .os-chooser .button img {
      margin-right: .3rem;
      height: 1.5rem; }
    .os-chooser .button:hover {
      background-color: rgba(77, 151, 255, 0.5); }





/* =============== SCRATCHMONTH =========================== */


    
    .scratch-month-item
    {
        width: 68%;
        margin-right: auto;
        margin-left: auto;
        padding-bottom: 2rem;
        
    }
    
    .scratch-month-item p
    {
        padding-bottom: 1rem;
    }
    

    .scratch-initiative-heading .themes-intro
    {
        width: 77%;
    }

    .scratch-initiative-heading #scratch-month-heading
    {
        padding-bottom: 0;
    }

    .scratch-initiative-heading h1
    {
        padding-bottom: 1rem;
    }

    .scratch-initiative-heading .flex-row .tips-info-section
    {
        padding-bottom: 2rem;
    }

    .scratch-initiative-heading span
    {
        font-weight: bold;
    }
    
    .scratch-month-item td span
    {
        line-height: 1.7rem;
    }

    .scratch-month-item .scratch-month-activity-title 
    {
        font-weight: bold; 
    }

    .scratch-month-item #introduce-list
    {
        padding-bottom: 0.5rem;
    }

    .scratch-month-item .scratch-month-icon
    {
        padding-bottom: 1rem; 
    }

    #scratch-month-banner
    {
        background-image: url("https://sip.scratch.mit.edu/wp-content/uploads/2020/04/ScratchMonth-Banner.png"); 
        padding-top: 8.5em; 
        padding-bottom: 8.5em; 
        background-size: cover;
    }

    #scratch-cat-gobo-banner
    {
        background-image: url("https://sip.scratch.mit.edu/wp-content/uploads/2020/04/sip-banner-scratch-cat-gobo2.svg"); 
        background-repeat: no-repeat; 
        background-position: center center; 
        background-size: 100%; 
    }

    .scratch-month-video
    {
        width: 70%; margin-right: auto; margin-left: auto;
    }

    #scratch-month-video-description
    {
        text-align: center;
    }

    #scratch-month-white-cards
    {
        background-color: white; 
        border-radius: 1rem; 
        margin-top: 2rem; 
        margin-right: auto;
        margin-left: auto;
        width: 70%;
        padding: 3rem;
        
    }
    
    #scratch-month-white-cards .scratch-month-item
    {
        width: auto;
        padding-bottom: 0;
    }
    
    .scratch-month-wide-image
    {
        padding-bottom: 1rem; border-radius: 0.5rem;
    }

    h4 .scratch-month-week-heading 
    {
        text-align: center;
    }

/* =============== SCRATCH-MONTH-ACTIVITIES ====================== */

    .scratch-month-activities h1
    {
        padding-top: 3rem;
        padding-bottom: 2rem;
    }

    
    .scratch-month-activities p
    {
        padding-bottom: 2rem;
    }
    
    .scratch-month-activities .scratch-month-week-heading
    {
        text-align: center;
    }








/* =============== Scratch Camp =========================== */



#scratch-camp-banner
{
    background-image: url("https://sip.scratch.mit.edu/wp-content/uploads/2020/07/Artboard-1.test_.png"); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: 100%; 
}




/* =============== MOBILESCRATCHATHOME =========================== */


    @media only screen and (max-width: 1080px) {

        .scratchathome-mobile-view
        {
            display: inherit;
        }

        .scratchathome-desktop-view
        {
            display: none;
        }


        
        .scratchathome-mobile-tweet
        {
            width: 90%;
            margin-left: auto;
            margin-right: auto;
            padding-bottom: 2rem;
        }

    }


/* =============== MOBILESCRATCHMONTH =========================== */


    @media only screen and (max-width: 941px) {

        .scratchmonth-wide-image
        {
            display: none;
        }



    }


    @media only screen and (max-width: 479px)
    {
        
        .themes-intro .scratch-month-item
        {
            width: 90%;
        }
        
        
        
        .scratch-initiative-heading .themes-intro
        {
            width: 100%;
        }
        
        .scratch-initiative-heading
        {
            background-image: none;
        }
        
                
        #scratch-month-white-cards
        {
            width: 90%;
        }
        
        #scratch-cat-gobo-banner
        {
            background-image: none; 
        }
        
        #scratch-month-banner
        {
            background-image: url("https://sip.scratch.mit.edu/wp-content/uploads/2020/04/ScratchMonth-Banner.png"); 
            padding-top: 2rem; 
            padding-bottom: 2rem; 
            background-size: cover;
            background-repeat: no-repeat;
                
        }
}





/* =============== HOC2019 =========================== */

.hoc .summer .monthly-item
{
    width: 90%; 
    padding: 2em 0; 
    
}

.hoc .connect-online-date p
{
    font-weight: normal;
}

.hoc .connect-online-date
{
    padding-left: 0;
    margin-left: 0;
    padding-right: 1rem;
}

.hoc-image
{
    border-radius: 0.5rem;
}

.hoc .connect-online-title
{
    width: 50%;
    padding-right: 0;
}

.hoc-2019-social 
{
/*    background-image: url(https://sip.scratch.mit.edu/wp-content/uploads/2019/11/speech-bubbles.svg); */
    background-image: url(https://sip.scratch.mit.edu/wp-content/uploads/2019/11/Untitled-1.svg);
    background-repeat: no-repeat;
    padding-bottom: 7rem;
}


/* ========================================== */
    
    .workshop-header
    {
        background-color: #0fbd8c;
        padding-top: 4rem; 
        padding-bottom: 1rem;
    }

    .workshop-header p
    {
        margin-top: 1.7rem;
    }

    
    .workshop-header .inner
    {
        width:43%;
    }
    
    .workshop-header p
    {
        color:white;
        text-align: center;
        font-weight: 500;
    }

    .workshop-header h2
    {
        color:white;
        text-align: center;
        line-height: 1.25em;
    }
    
    .end-of-workshop-header
    {
        padding-bottom: 11em;
    }
    
    .workshop-content
    {
        position: relative; top: -9.5em;
    }
    
    .workshop-content .video
    {
        margin-top: 0; margin-left:auto; margin-right: auto; margin-bottom: 0; width: 50%;
    }
    
    .workshop-content .video p
    {
        text-align: center;
        margin-top: 0.7rem;
        margin-bottom: 0;
        padding-top: 0; 
    }
    
    
    .workshop-part
        {
            margin-top: 3em;
            margin-bottom: 3em;
        }

    .workshop-part h2
    {
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.1em;
    }

    .workshop-part .time-estimate
    {
        font-weight:bold; text-align: center; margin-left: auto;
        margin-right: auto;
        margin-bottom: 1.5em;
        margin-top: 0.5em; 
    }
    
    .time-estimate img
    {
        vertical-align: middle; 
    }
    

    
    .workshop-part .instructions
    {
        margin-left: auto; 
        margin-right: auto; 
        text-align: center;
        margin-bottom:0;
        padding-bottom: 0;
    }


    .faq
    {
/*
        margin-left: auto; 
        margin-right: auto; 
*/
        margin-top: 1.4rem;
        text-align: left;
        margin-bottom:0;
        padding-bottom: 0;
        margin-right: auto;
        margin-left: auto;
        width: 60%; 
    }

    .faq img
    {
        margin-bottom: 1.2rem; margin-top: 1rem; width: 90%
    }


    .two-columns
    {
        padding: 0.5em 1.5em 1.5em;
        align-self: flex-start;
        text-align: center;
        
    }

    .two-columns 
    {
        width: 45%; 
        padding: 0;
        margin: 0;
    }

    .two-columns p
    {
        margin-top: 0.5rem;    
    }

    
    .educators-guide
    {
        background-color: #0fbd8c;
        margin-top:0;
    }
    

    .educators-guide p
    {
        color: white;
        text-align: left;
        margin-top: 0;
    }

    .educators-guide h2
    {
        color: white;
        text-align: left;
        margin-top: 0;
        margin-bottom: 1rem;
        line-height: normal;
    }
    
    .educators-guide .middle-item
    {
        width: 40%;
        margin-top: 0;
    }
    
    .educators-guide section
    {
        margin-left: auto;
        margin-right: auto;
        width: 70%;
        padding-top: 3.5em;
        padding-bottom: 3.5em;
        margin-bottom: 0;
        margin-top: 0;
    }
    
    .vl
    {
        border-right: 1px solid #bfbfbf;
        height: 8rem;
        position: relative;
        right: -0.2em;
        width: 50%;
    }
    
    .or
    {
        text-align: center;
        padding-left:0;
        margin-left: 0;
        width:9%; 
        padding: 0;
    }
    

    .or p
    {
        width: 100%; 
        font-weight: bold;

    }
    
    .below-shifted-up-section
    {
        margin-top: -9em; 
    }

    .create-resources
    {
        margin-top: 1rem;
    }

    .two-columns button
    {
        align-self: flex-end;
    }

    .coding-cards-description
    {
        padding-bottom: 1rem;
    }


/* ========================================================================================== */

    .about h1
    {
        margin-top: 1em; 
    }
    
        

    .about .about-left
    {
        padding-right: 3rem;
        width: 80%;

    }
    
    .about
    {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    

    /*-------------------------------------------------------------------------------------------*/

    .purple
    {
        background-color: #9966ff;  
    }


    .dark-purple 
    {
        background-color: #855cd6;
    }

    .dark-blue
    {
        background-color: #3373cc;    
    }

    .bright-blue
    {
        background-color: #4c97ff;
    }

     .simple-blue
    {
        background-color: #4c97ff;
    }

    .pale-blue
    {
        background-color: rgba(77, 151, 255, 0.25);
    }

    .pale-purple
    {
        background-color: #d2bcff;
    }

    .pale-aqua
    {
        background-color: #93ead2;
    }


    .pale-dark-blue
    {
        background-color: #a4c1ea;
    }

    .pale-variables-orange
    {
        background-color: #ffcc99;
    }
    
    .blue
    {
        background-color: #4280d7;    
    }

    .magenta
    {
        background-color: #cf63cf;
    }

    .dark-magenta
    {
        background-color: #c94fc9;
    }

    .control-orange
    {
        background-color: #ffab19;
    }

    .dark-control-orange
    {
        background-color: #ec9c13;
    }
    
    .variables-orange
    {
        background-color: #ff8c1a;
    }

    .dark-variables-orange
    {
        background-color: #fc7e00;
    }

    .aqua
    {
        background-color: #0fbd8c;
    }

    .dark-aqua
    {
        background-color: #0da57a;
    }


    .themes .themes-intro
    {
        text-align: center; 
    }




    .themes-list
    {
        margin-top:0;
    }
    

    .themes-list .leftmost-item
    {
        width: 1%;     
    }




    .themes-list p
    {
        color: white;
        text-align: left;
        margin-top: 0.5rem;
    }

    .themes-list h2
    {
        color: white;
        text-align: left;
        margin-top: 0;
    }

    .themes-list h3
    {
        color: white; 
        /*        color: #575e75;*/
        text-align: left;
        margin-top: 0;
    }


    .themes-list .middle-item
    {
        width: 60%;
        margin-top: 0;
    }
    
    .themes-list section
    {
        margin-left: auto;
        margin-right: auto;
        width: 70%;
        padding-top: 3.5em;
        padding-bottom: 3.5em;
        margin-bottom: 0;
        margin-top: 0;
    }

    .themes-homepage .themes-list section
    {
        margin-left: auto;
        margin-right: auto;
        width: 70%;
        padding-top: 1.2rem;
        padding-bottom: 1.2rem;
        margin-bottom: 0;
        margin-top: 0;
    }

    .themes-list ul
    {
        color:white; 
        list-style-type: none;    
    }


    /*===========================================================================================*/


    .mailing-list
    {
        text-align: center;
    }
    
    /*-------------------------------------------------------------------------------------------*/
    
  
    #footer
    {
        padding-top: 4rem;
        padding-bottom: 4rem;
        text-align: center;
    }
    

    /*-------------------------------------------------------------------------------------------*/

    .entry-footer

    {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    /*===========================================================================================*/


    .blog-post
    {
        padding-top: 2rem;
        padding-bottom: 4rem;
        margin-top:0;
        margin-bottom:0;
    }
    
    .blog-post h1
    {
        margin-bottom: 1rem;
        margin-top: 0; 
        padding-top: 2rem; 
        padding-bottom: 0;    
}
    
    .blog-content p
    {
        font-size: 1.6rem;
        padding-bottom: 1.5rem; 
        font-family: Georgia,Cambria,"Times New Roman",Times,serif;
    }
    
    .blog-post img
    {
        padding-top: 2rem;
    }

    .blog-post .player
    {
        padding-top: 2rem;
    }


    .blog-post .wide-image
    {
        width: 100%;
        margin-bottom: 0.7rem;
    }
    
    .blog-post .author
    {
        font-weight: 600;
        padding-bottom: 2rem;
        font-size: 1.5rem;
        font-family: Georgia,Cambria,"Times New Roman",Times,serif;

    }
    
    .blog-post .blog-footer
    {
        font-style: italic;
        font-weight: 400;
        font-size: 1.5rem;
    }
    
    .blog-post .blog-quote
    {
        font-family: Helvetica, sans-serif;
        font-size: 1.7rem;
        margin-right: auto;
        margin-left: auto;
        margin-top: 1rem;
        margin-bottom: 1rem;
        width: 80%;
        font-style: italic;
    }

    .blog-post p
    {
        font-size: 1.3rem;
        padding-bottom: 1.5rem; 
    }

    .blogpost-video-view
    {
        margin-top: 0 !important; 
        margin-bottom: 0; 
    }

    .blog-content table {
        border-collapse: collapse;
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    .blog-content table, .blog-content th, .blog-content td {
      border: 1px solid black;
    }
    
    .blog-content th
    {
        background-color: #4280d7;
    }
    

    .blog-content th p
    {
        font-weight: bold; 
        text-align: left;
        color: white;
        padding: 0.3rem;
    }

    .blog-content .blog-post-table-heading
    {
        text-align: center; 
        padding-bottom: 0; 
        margin-bottom: 0;
    }

    .blog-content .blog-post-section-heading
    {
        padding-bottom: 0.2rem; 
        font-weight: bold;
    }

    .blog-post .blog-post-table-credits
    {
        text-align: center; 
        font-size: 1rem;
        padding-bottom: 1rem;
    }

    .blog-post .blog-footer p 
    {
        font-size: 1rem;
        margin-right: 1rem;
        margin-left: 1rem;
    }

    .blog-content .blog-post-video
    {
        padding-bottom: 1rem;
    }

    .blogpost-video-view .video-description
    {
        padding-top: 2rem;
    }





    /*===========================================================================================*/

    p.comment-form-url
    {
        display: none !important;
    }

    p.comment-form-email
    {
        display: none !important;
    }

    .comment-body
    {
        background-color: white;
        padding: 1rem;
        border-radius: 0.5rem;
    }

    span.says
    {
        display: none !important;
    }
    
    #text
    {
        padding-bottom: 1rem;
    }

    .comment-meta a
    { 
        font-weight: normal;
        font-style: italic;
        font-size: 1rem;
    }

    .comment-author.vcard img
    {
        display: none !important;
    }

    .comment-respond input
    {
        display: inline !important;
    }

    .comment-subscription-form
    {
        display: inline !important;
    }

    #subscribe_comments
    {
        display: inline !important;
    }

    #subscribe_blog
    {
        display: none !important;
    }

    #subscribe-blog-label
    {
        display: none !important;
    }

    .comment-body p
    {
        padding-top: 0.8rem;
        font-size: 1rem;
    }

    .comment-respond
    {
        margin-top: 2rem;
    }
    
    .comment-respond textarea
    {
        display: block !important;
    }

    .comment-respond input
    {
        display: block !important;
    }

    p.logged-in-as
    {
        font-size: 1rem;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .logged-in-as a
    {
        font-size: 1rem;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .comment-form
    {
        padding-top: 0.8rem;
        padding-left: 1.2rem;
    }

/*
    .comment-form
    {
        font-size: 1.3rem;    
    }
*/

    .comment-form-comment
    {
        padding-top: 1rem; 
    }

    .comment-reply-link {
      display: inline-block;
      margin: .5em 0;
      border: 0;
      border-radius: .25rem;
      background-color: #4d97ff;
      cursor: pointer;
      padding: 0.75em 1em;
      color: white !important;
      font-size: .8rem;
      font-weight: bold;
      /* USER BUTTON STATES */
      /* DATA BUTTON STATES */ }
      .comment-reply-link:focus {
        outline: none; }
      .comment-reply-link.white {
        background-color: white;
        color: #4d97ff; 
    }
      .comment-reply-link.pass {
        background-color: #0fbd8c; }
      .comment-reply-link.fail {
        background-color: #ffab1a; }
      .comment-reply-link:disabled {
        box-shadow: none; }



    #submit {
      display: inline-block;
      margin: .5em 0;
      border: 0;
      border-radius: .25rem;
      background-color: #4d97ff;
      cursor: pointer;
      padding: 1em 1.25em;
      color: white;
      font-size: .8rem;
      font-weight: bold;
      /* USER BUTTON STATES */
      /* DATA BUTTON STATES */ }
      #submit:focus {
        outline: none; }
      #submit.white {
        background-color: white;
        color: #4d97ff; 
    }
      #submit.pass {
        background-color: #0fbd8c; }
      #submit.fail {
        background-color: #ffab1a; }
      #submit:disabled {
        box-shadow: none; }


/*
    
.ideas-image iframe
{border:20px solid #000;
    border-radius: 20px !important;
}
*/
    
.tips-activity-guides {
  background-color: #fafafa;
  padding-bottom: 2rem; }

.purchase-button img {
  margin-right: 0;
  margin-left: .75rem;
  width: 1rem;
  vertical-align: baseline; }

.tips-info-section {
  padding: 2.5rem 0;
  width: 100%;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap; }

.tips-info-body {
  text-align: left; }

.tips-cards-buttons a {
  white-space: normal; }

.gray-area {
  background-color: #f2f2f2; }

img.tips-icon {
  height: 1.75rem; }

    
.welcome h3
    {
        text-align:center; 
        font-weight: normal;
    }
    
/*
.welcome
    {
        margin-bottom: 2rem;
    }
*/

/* ======================================================================================================= */


.new-to-sip h2
{
    text-align: center;

}

.new-to-sip p 
{
    text-align: center;
    padding-bottom: 0.5rem;
}



/* ======================================= Conf2019 Z ==================================================== */



/*
.conf-title
{
    ;
}
*/

.conf-subtitle
{
    font-weight: 300;  
    font-style: italic;
}

.conf-session
{
    padding-bottom: 1rem;
}

.conf2019-panel h3
{
    padding-bottom: 0.3rem; 
    padding-top: 1rem; 
}


/* ======================================= Conf2019 ==================================================== */


@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 768px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

h1.title-banner-h1.mod-2019 {
  position: absolute;
  z-index: 1;
  text-align: center;
  left: 0;
  right: 0;
  padding-top: 5rem;
  font-size: 3rem; }

.title-banner.mod-conference.mod-2019 {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 2.5rem; }

.title-banner-image.mod-2019 {
  position: relative;
  z-index: 0;
  margin-bottom: 1.75rem;
  width: 100%;
  height: 17rem;
  background-image: url("/images/conference/index/2019/title-banner-3.jpg");
  background-position: center;
  background-size: cover;
  opacity: .4; }

.conf2019-panel {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  margin: auto 5rem; }

.title-banner-h3.mod-2019 {
  text-align: left;
  font-size: 1rem; }

.conf2019-title-band {
  background-color: #4d97ff;
  text-align: center; }

.conf2019-title-band.conf2019-schedule-band {
  padding-top: 1rem;
  padding-bottom: 2rem;
  margin-top: 2rem; }

.conf2019-title-band.conf2019-mailing-list {
  padding-top: 2.25rem;
  padding-bottom: 3rem;
  margin-top: 2rem; }

.conf2019-title-band > h3 {
  width: 48.75rem;
  color: white;
  margin: auto; }

.conf2019-title-band > h3.conf2019-schedule {
  font-weight: bold;
  font-size: 1.6rem; }

.conf2019-title-band > h3.conf2019-mailing-list {
  font-weight: normal;
  font-size: 1.15rem; }

.conf2019-panel-title-text > h3 {
  line-height: 1.7rem; }

.conf2019-description.conf2019-band {
  margin-bottom: 2.5rem;
  width: 48.75rem; }

.conf2019-description {
  line-height: 1.9rem;
  font-weight: normal;
  font-size: 1rem;
  color: #575e75;
  margin: 0 auto 1.6rem; }

.conf2019-panel {
  border-bottom: 1px solid #d9d9d9; }

.conf2019-panel.mod-last {
  border-bottom: 0;
  padding-bottom: 1rem; }

.flex-row.conf2019-panel-title {
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-align-items: center;
      -ms-flex-align: center;
              -ms-grid-row-align: center;
          align-items: center; }

.conf2019-panel-flag {
  margin-right: 6.25rem;
  border: 1px solid #d9d9d9;
  border-radius: 1px;
  background-color: #d9d9d9;
  width: 3.75rem; }

.conf2019-panel-desc {
  margin: 2rem 0; }

.mod-kenya .conf2019-panel-desc {
  font-style: italic; }

.conf2019-mailing-list {
  font-weight: normal; }

td {
  padding: .75rem 0.5rem;
  vertical-align: top; }

.conf2019-panel-row-icon-image {
  margin-top: .4rem;
  height: 1rem; }

.conf2019-large-icon-image {
  height: 2.5rem;
  margin: 1rem; }

.button.mod-2019-conf {
  display: block;
  margin: 2rem auto 0;
  padding: 1rem 0;
  width: 13.75rem;
  text-align: center;
  font-size: .9rem; }

.button.mod-2019-conf-website-button {
  background-color: #ffab1a;
  color: white; }

.button.mod-2019-conf-maillist-button {
  background-color: white;
  color: #4280d7; }

@media only screen and (max-width: 479px) {
  .index.mod-2019 {
    text-align: left; }
  h1.title-banner-h1.mod-2019 {
    padding-top: 3.25rem;
    font-size: 1.75rem; }
  .title-banner-image.mod-2019 {
    height: 10rem; }
  .conf2019-title-band > h3 {
    width: initial;
    margin: 0 1rem; }
  .conf2019-panel {
    margin: auto 1rem; }
  .title-banner-h3.mod-2019 {
    margin: 1rem .5rem .5rem;
    font-size: 1rem;
    line-height: 1.6rem; }
  .conf2019-title-band > h3.conf2019-schedule {
    font-size: 1.6rem; }
  .conf2019-title-band > h3.conf2019-mailing-list {
    font-size: 1.15rem; }
  .conf2019-description.conf2019-band {
    width: initial;
    margin: 0 .5rem; }
  .conf2019-description {
    line-height: 1.9rem;
    font-size: 1rem;
    margin: 0 .5rem 1.6rem; }
  .flex-row.conf2019-panel-title {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row; }
  .conf2019-panel-flag {
    margin-right: 1.25rem; }
  .conf2019-panel-title-text {
    max-width: 14rem; }
  .conf2019-panel-row > td {
    padding: .75rem .375rem .75rem 0; }
  .conf2019-large-icon-image {
    height: 2.5rem;
    margin: 1rem; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .index.mod-2019 {
    text-align: left; }
  h1.title-banner-h1.mod-2019 {
    padding-top: 2.75rem;
    font-size: 2.25rem; }
  .title-banner-image.mod-2019 {
    height: 10rem; }
  .conf2019-title-band > h3 {
    margin: auto .5rem;
    width: initial; }
  .conf2019-title-band > h3.conf2019-schedule {
    font-size: 1.6rem; }
  .conf2019-title-band > h3.conf2019-mailing-list {
    font-size: 1.15rem; }
  .conf2019-description.conf2019-band {
    width: 464px;
    margin: auto; }
  .conf2019-description {
    line-height: 1.9rem;
    font-size: 1rem;
    margin: 0 auto 1.6rem; }
  .flex-row.conf2019-panel-title {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row; }
  .conf2019-panel {
    margin: auto .5rem; }
  .conf2019-panel-flag {
    margin-right: 2rem; }
  .conf2019-panel-title-text {
    max-width: 18.75rem; }
  .button.mod-2019-panel {
    width: 5.75rem; }
  .conf2019-large-icon-image {
    height: 2.5rem;
    margin: 1rem; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
  .index.mod-2019 {
    text-align: left; }
  h1.title-banner-h1.mod-2019 {
    padding-top: 4.75rem;
    font-size: 2.75rem; }
  .title-banner-image.mod-2019 {
    height: 15rem; }
  .conf2019-title-band > h3 {
    width: 38.75rem; }
  .conf2019-panel {
    margin: auto 4.5rem; }
  .conf2019-title-band > h3.conf2019-schedule {
    font-size: 1.6rem; }
  .conf2019-title-band > h3.conf2019-mailing-list {
    font-size: 1.15rem; }
  .conf2019-description.conf2019-band {
    width: 38.75rem; }
  .conf2019-description {
    line-height: 1.9rem;
    font-size: 1rem;
    margin: 0 auto 1.6rem; }
  .button.mod-2019-panel {
    width: 8.75rem; }
  .conf2019-large-icon-image {
    height: 2.5rem;
    margin: 1rem; } }





/* ================================================================================================================== */


    
@media only screen and (max-width: 479px) {
  .title-banner.masthead {
    padding-bottom: 1.25rem; }
    .title-banner.masthead p {
      max-width: 18.75em; }
  .ttt-head p {
    max-width: 18.75em; }
  .tips-info-body {
    max-width: 18.75em;
    text-align: center; }
    .tips-info-body.tips-illustration {
      -webkit-order: -1;
          -ms-flex-order: -1;
              order: -1; }
      .tips-info-body.tips-illustration img {
        width: 18.75em; }
    .tips-info-body .button {
      width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 639px) {
  .title-banner.masthead p {
    max-width: 28.75em; }
  .ttt-head p {
    max-width: 28.75em; }
  .tips-info-body.tips-illustration {
    -webkit-order: -1;
        -ms-flex-order: -1;
            order: -1; }
    .tips-info-body.tips-illustration img {
      width: 18.75em; }
  .tips-info-body {
    max-width: 18.75em;
    text-align: center; } }

@media only screen and (min-width: 640px) and (max-width: 941px) {
  .title-banner.masthead {
    padding-bottom: 2rem; }
    .title-banner.masthead p {
      max-width: 28.75em; }
  .ttt-head p {
    max-width: 28.75em; }
  .tips-info-section.mod-align-top {
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
                -ms-grid-row-align: flex-start;
            align-items: flex-start; }
  .tips-info-body {
    max-width: 18.75em; } }

@media only screen and (min-width: 942px) {
  .title-banner.masthead {
    padding-bottom: 1.25rem; }
    .title-banner.masthead p {
      max-width: 38.75em; }
  .ttt-head p {
    max-width: 38.75em; }
  .tips-info-section.mod-align-top {
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
                -ms-grid-row-align: flex-start;
            align-items: flex-start; }
  .tips-info-body {
    max-width: 28.75em; }
    .tips-info-body.mod-narrow {
      max-width: 23.75em; } }


    
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 639px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 640px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 640px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

#view {
  padding: 0; }

.educators .intro {
  margin: 0; }

.educators b {
  font-weight: bold; }

.educators a {
  white-space: normal; }

.educators .title-banner.masthead {
  background-color: #855cd6;
  padding-bottom: 0; }
  .educators .title-banner.masthead h1 {
    margin: 0;
    color: white; }
  .educators .title-banner.masthead .masthead-info {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between; }
    .educators .title-banner.masthead .masthead-info p {
      margin: 0;
      max-width: 28.75em;
      text-align: left;
      color: white; }
      .educators .title-banner.masthead .masthead-info p a {
        border-bottom: 1px solid white;
        color: white; }
  .educators .title-banner.masthead .video-player {
    position: relative;
    margin-bottom: 20px;
    border: 0.25rem solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    width: 18.75em;
    height: 10.54688em;
    overflow: hidden; }
    .educators .title-banner.masthead .video-player iframe {
      border: 0;
      width: inherit;
      height: inherit; }
  .educators .title-banner.masthead .band {
    margin-top: 2rem;
    background-color: rgba(255, 255, 255, 0.15);
    padding: 1rem 0; }

.educators .educator-community {
  margin-bottom: 2rem;
  text-align: left;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
              -ms-grid-row-align: flex-start;
          align-items: flex-start; }
  .educators .educator-community div {
    max-width: 24rem; }

.educators .guides-and-tutorials div {
  max-width: 16rem;
  text-align: center; }

.educators section {
  margin-bottom: 3rem; }
  .educators section .nav-spacer {
    display: block;
    visibility: hidden;
    margin-top: -50px;
    height: 50px; }
  .educators section h2 {
    margin-bottom: 0;
    text-align: center; }

.educators #teacher-accounts {
  margin-bottom: -3px;
  background-color: #855cd6;
  padding: 50px 0;
  width: 100%;
  overflow-x: hidden; }
  .educators #teacher-accounts .inner {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center; }
  .educators #teacher-accounts p {
    margin: 0;
    text-align: left;
    color: white; }
    .educators #teacher-accounts p a {
      border-bottom: 1px solid white;
      color: white; }
  .educators #teacher-accounts h2 {
    margin: 0 0 2rem 0;
    text-align: left;
    line-height: normal;
    color: white; }
  .educators #teacher-accounts .teacher-account-buttons li {
    border: 2px solid white;
    padding: 16px;
    font-size: 16px;
    font-weight: 500; }
  .educators #teacher-accounts #left {
    width: 18.75em;
    max-width: 18.75em;
    text-align: left; }
    .educators #teacher-accounts #left p {
      margin-bottom: 3.5rem; }
  .educators #teacher-accounts img {
    width: 33.75em; }

        
@media only screen and (max-width: 479px) {
  .stories {
    width: 18.75em; }
  .story {
    width: 18.75em; }
    .story img {
      width: 18.75em; }
  .title-banner.masthead {
    padding-bottom: 2rem; }
  .title-banner .band {
    display: none; }
  .flex-row.sidebar-row .body-copy {
    width: 100%; }
  #teacher-icon {
    display: none; }
  .in-practice {
    text-align: center; }
  .flex-row {
    -webkit-align-items: center;
        -ms-flex-align: center;
                -ms-grid-row-align: center;
            align-items: center; }
  .story {
    margin-left: 50px; }
  .general-usage {
    -webkit-align-items: center;
        -ms-flex-align: center;
                -ms-grid-row-align: center;
            align-items: center; }
  .guides-and-tutorials {
    -webkit-align-items: center;
        -ms-flex-align: center;
                -ms-grid-row-align: center;
            align-items: center; }
  .account-flex {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center; } }

@media only screen and (min-width: 480px) and (max-width: 639px) {
  .stories {
    width: 28.75em; }
  .story {
    width: 13.75em; }
  #teacher-icon {
    display: none; }
  .flex-row.sidebar-row .body-copy {
    width: 100%; }
  .flex-row.sidebar-row .sidebar {
    margin: 0 auto; }
  .in-practice {
    text-align: center; }
  .flex-row {
    -webkit-align-items: center;
        -ms-flex-align: center;
                -ms-grid-row-align: center;
            align-items: center; }
  .story {
    margin-left: 50px; }
  .general-usage {
    -webkit-align-items: center;
        -ms-flex-align: center;
                -ms-grid-row-align: center;
            align-items: center; }
  .guides-and-tutorials {
    -webkit-align-items: center;
        -ms-flex-align: center;
                -ms-grid-row-align: center;
            align-items: center; }
  .account-flex {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center; } }



/* Dropdown Button */
.dropbtn {
  background-color: #4d97ff;
  color: white;
/*  padding: 0.5rem;*/
  font-size: 1rem;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    margin-top: 0.2rem;
    margin-left: 5rem;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    right: 0.7rem;
    background-color: #4d97ff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #4280d7;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover {background-color: #4280d7;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #4280d7;}


/* MOBILETHEMES */

@media only screen and (max-width: 1200px) {
    
    .themes-list .leftmost-item
    {
        margin-right: auto;
        margin-left: auto; 
        text-align: center;
        width: 100%;     
    }

    .themes-list p
    {
        color: white;
        text-align: center;
        margin-top: 0;
    }

    .themes-list h2
    {
        color: white;
        text-align: center;
        margin-top: 0;
    }
    
    .themes-list .middle-item
    {
        width: 100%;
        margin-top: 0;
        margin-bottom: 1rem;
    }
    
    .themes-list section
    {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding-top: 3.5em;
        padding-bottom: 3.5em;
        margin-bottom: 0;
        margin-top: 0;
    }
    
    .themes-list ul
    {
        text-align: center;
        list-style-type: none; 
    }
}

/* MOBILEHOCSOCIAL */

@media only screen and (max-width: 1200px) 
{
    
    .hoc-2019-social
    {
        background-repeat: no-repeat; 
    }
    
}

@media only screen and (max-width: 1200px)
{
    .hoc .summer .monthly-item .connect-online-title
    {
        padding-right: 1rem;
    }

}


@media only screen and (max-width: 639px) 
{
    
    .hoc-2019-social
    {
        background-image: none; 
    }

    .hoc .summer .monthly-item .connect-online-title
    {
        width: 85%;
        text-align: center;
        padding-right: 0;
    }
}






/* MOBILESTUFF! */

@media only screen and (max-width: 800px) {
/*@media only screen and (max-width: 639px) {*/

    section.flex-row.tips-info-section.tips-left.monthly-item 
    {
        width: 90%;
    }

    .monthly-item
    {
        text-align: center;
    }
    
    #nav-mobile
    {
        display: inline-block !important;
    }

    #nav-desktop-scratchathome
    {
        display: none !important;
    }

    #nav-desktop-scratchmonth
    {
        display: none !important;
    }
    
    #nav-desktop-events
    {
        display: none !important;
    }
    
    #nav-desktop-themes
    {
        display: none !important;
    }
    
    #nav-desktop-signup
    {
        display: none !important;
    }
    
    .connect-online-date
    {
        padding-right: 0 !important;
    }
    
    
}


@media only screen and (max-width: 941px) {
    .or
    {
        display: none; 
    }
    
    .monthly-item .left-column
    {
        padding-left: 0;
        width: 75%;
    }
    
    .educators-guide .middle-item
    {
        width: 100%;
        padding-bottom: 1rem;
        padding-top: 1rem;
    }

    .educators-guide h2
    {
        text-align: center; 
    } 
    
    .educators-guide p
    {
        text-align: center;
    }
    
    
    .two-columns
    {
        text-align: center;
        width: 80%; 
        align-self: center;
        align-items: center;
        padding: 0;
    }
    
    .two-columns h3
    {         
        padding-top: 2rem;
        padding-bottom: 1rem;
    }
    
    .workshop-header .inner
    {
        width: 90%
    }
    
    .workshop-content .video
    {
        width: 80%
    }
  
    .social-media .left-column
    {
        width: 100%; 
        margin-left: 1rem;
        margin-right: 1rem;
        text-align: center !important;
    }
    
    .social-media .left-column .twitter-title
    {   
        padding-left: 0;
        padding-right: 0;
        text-align: center !important;
    }
    
    .social-media .ideas-image .twitter-collection
    {
        width: 100%; 
    }
    
    #twitter-widget
    {
        width: 80%;
    }
    
    .social-media p
    {
        text-align: center; 
    }

    .social-media h2
    {
        text-align: center; 
    }
    
    .social-media .teaching-with-scratch
    {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        padding-right: 0; 
        padding-left: 0;
    }
    
    .social-media .teaching-with-scratch h2
    {
        text-align: center;
    }
    
    
/*
    .ideas-image .no-bottom .teaching-with-scratch
    {
        padding-right: 0;
    }
*/
    
 /*======= MOBILEBLOGPOST =======*/

    .blog-post h1
    {
        font-size: 1.5rem;
        margin-bottom: 0;
        margin-left: 1rem;
        margin-right: 1rem;
        margin-top: 0;
    }
    
    .blog-post .author
    {
        font-size: 1rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }
    
    
    .blog-post .blog-content .wide-image
    {
        width: 95%;
        margin-right: 0;
        margin-left: 0;
        margin-top: 0;
        padding-top: 0;
    }
    
    .blog-post .wide-image
    {
        width: 90%;
        margin-left: 1rem;
        margin-right: 1rem;
    }
    
    .blog-post .blog-content p 
    {
        font-size: 1rem;
    }
    
    
    #reply-title
    {
        margin-left: 1rem;
    }
    
    
    
    /* ======= MOBILESUMMER =========== */
    
    
    .connect-in-person-title 
    {
        width: 100%; 
        text-align: center; 
    }
    
    
    .monthly-video .player
    {
        width: 80%
    }
    
    .summer .monthly-item img
    {
        padding-bottom: 1.5rem; 
    }
    
    .connect-online-date
    {
        width: 100%; 
        text-align: left; 
        padding-left: 0; 
        padding-bottom: 1rem; 
    }
    
    
    .connect-online-title
    {
        border: none;
        text-align: left; 
        width: 100%;  
        padding: 0; 
    }
    
    .summer-section-heading
    {
        width: 80%; 
        margin-left: auto; 
        margin-right: auto; 
    }
    
    /* ====== MOBILEVIDEO ========= */
    
    .comments-title
    {
        margin-left: 1rem;
    }
    
    
    
    .blog-post p 
    {
        font-size: 1rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }
    
    
    /* ====== MOBILEHOC    ========= */
   
    
    .hoc .summer .monthly-item .connect-online-date
    {
        text-align: center;
    }
    
    .hoc .summer .monthly-item img
    {
        padding-bottom: 0; 
    }
    
    .hoc .twitter-chat-banner
    {
        width: 70%;
    }
    
    .hoc .themes-intro p
    {
        margin-top: 1rem; 
    }
    
    
    /* ====== MOBILETHEMES ========= */
    
    .wide-button
    {
        
        width: 90%;
        text-align: center;
        margin-right: 1rem;
        margin-left: 1rem;
        align-items: center;    
    }
    
    
    /* ====== ENDMOBILE ========= */
    
  .stoies {
    width: 38.75em; }
  .story {
    width: 18.75em; }
  .masthead h1 {
    text-align: center; }
  .masthead .subnav {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center; }
  .masthead-info p {
    width: 18.75em; }
  .masthead-info iframe {
    width: 18.75em;
    box-sizing: border-box; }
  #view {
    text-align: left; }
  .flex-row.sidebar-row .body-copy {
    width: 100%; }
  .flex-row.sidebar-row .sidebar {
    margin: 0 auto; }
  .educators #resources {
    margin: 0 autobackground-image;
    width: 28.75em; }
    .educators #resources .educator-community {
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center; }
    .educators #resources #guides-header {
      margin: auto;
      width: 28.75em;
      text-align: left; }
    .educators #resources .guides-and-tutorials div {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      max-width: 16rem;
      text-align: left;
      -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
              justify-content: space-between; }
    .educators #resources .guides-and-tutorials p {
      width: 18.75em; }
    .educators #resources .guides-and-tutorials img {
      margin: 0;
      width: 8.75em; }
  section p {
/*    width: 100%;*/
    }
  .guides-and-tutorials {
    margin-bottom: 2rem;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
                -ms-grid-row-align: flex-start;
            align-items: flex-start; }
  #teacher-accounts .inner {
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between; }
  #left {
    width: 18.75em; } }

@media only screen and (min-width: 942px) {
  .stories {
    width: 58.75em; }
  .story {
    width: 13.75em; }
  .masthead h1 {
    text-align: left; }
  .masthead .sub-nav {
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start; }
  .general-usage {
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
                -ms-grid-row-align: flex-start;
            align-items: flex-start; }
  .guides-and-tutorials {
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
                -ms-grid-row-align: flex-start;
            align-items: flex-start;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between; }
  .account-flex {
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between; } }