/* ==========================================================================
Base styles
========================================================================== */

html, body {
    height: 100%;
}

html,
button,
input,
select,
textarea {
    color: #222;
}

.row.row-extended {
    margin-left: -38px;
    margin-right: -38px;
}

.content-container {
    min-height: 100%;
    padding-bottom: 40px;
    position: relative;
}

.body-container {
    background-color: #eeedf7;
    margin-bottom: 80px;
}

.generic-container {
    background-color: white;
    margin-top: 20px;
    padding: 20px 20px 60px;
}

.clickable {
    cursor: pointer;
}

html {
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    line-height: 1.4;
    height: 100%;
}

body {
    background-color: #eeedf7;
    font-family: 'Open Sans', sans-serif;
}

footer{
    position: absolute;
    bottom: 0;
    height: 40px;
    width: 100%;
    background-color: #323761;
    padding: 10px 20px;
    z-index: 0;
}

@media only screen and (max-width: 490px) {
    footer {
        height: 74px;
        padding: 13px 0;
    }

    footer .pull-right {
        float: left! important;
        margin-top: 8px;
    }
}

footer a{
    float: right;
    color: #fff;
}

footer a:hover{
    color: #E0EFEF;
}

.no-scroll{
    overflow: hidden;
}

h3 {
    font-size: 2em;
    font-weight: 700;
}

h2 {
    color: #441B4B;
}

ul.list-bullets{
    list-style: circle;
}

ul.list-spacing li{
    padding: 8px 0;
    line-height: 1.7em;
}

.site-alert {
    margin-top: 20px;
}

/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
* A better looking default horizontal rule
*/

hr {
    display: block;
    height: 0;
    border: 0;
    border-top: 2px solid #AD9CBB;
    margin: 1em 0;
    padding: 0;
}

/*
* Remove the gap between images, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
* Remove default fieldset styles.
*/

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
* Allow only vertical resizing of textareas.
*/

textarea {
    resize: vertical;
}

span.callOut{
    font-weight: 700;
    color: #94689F;
}

.secondary-header{
  font-size: 2em;
  border-bottom: #441B4B 3px solid;
  margin: 25px auto;
  padding-bottom: 9px;
}

#header .ws-visible {
    display: none;
}

/* WORKSTATION ================ */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(/img/loading/Preloader_21.gif) center no-repeat #fff;
}

.se-pre-con h2{
    text-align: center;
    font-size: 1.5em;
    margin-top: 22%;
}

/*workstation loading stuff*/


.w-left-container{
    padding: 10px 15px 10px 10px;

}

.w-left-container p{
    font-size: .96em;
    line-height: 1.6em;
}

.w-left-container h3{
    font-size: 1.4em;
    color: #58355F;
}

.w-left-container ul{
    padding: 10px 0;
}

.w-left-container li{
    padding: 3px 0;
}


.w-left-container .top-alert{
    color: #fff;
    background-color: #58355F;
    padding: 7px 15px 6px;
    margin-left: -10px;
    margin-right: -10px;
}

.top-alert a {
    color: #fff;
}

.w-left-container .code-preview{
    color: #45434E;
    font-size: .9em;
    padding: 8px 12px;
    border: #B3ACAC dashed 2px;
    background-color: #E5EAE5;
}

.delete-project {
    cursor: pointer;
    position: absolute;
    right: 0;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    background: white;
    border-radius: 50px;
    filter: alpha(opacity=20);
    opacity: 0;
}

.tab-menu-left{
    background-color: #CECFD6;
    width: 100%;
    display: flex; justify-content: space-around;
}

.left-tab-item{
    padding: 10px 0;
    text-align: center;
    width: 50%;
    cursor: pointer;
}

.tab-item-selected{
    font-weight: 600;
    background-color: #58355F;
    color: #fff;
}

.workstation-container {
    padding: 2px 0px 0;
}


/*  Change the column closeness in workstation  */
.workstation-container .col-md-1{
    padding-right: 7px;
    padding-left: 7px;
}

.workstation-container .col-md-3{
    padding-right: 7px;
    padding-left: 7px;
}

.workstation-container .col-md-4{
    padding-right: 7px;
    padding-left: 7px;
}

.workstation-container .col-md-5{
    padding-right: 7px;
    padding-left: 7px;
}

.workstation-container .col-md-6{
    padding-right: 7px;
    padding-left: 7px;
    margin-top: -1px;
}


.workstation-container .col-md-1{
    width: 3.333333%;
}

.js-video-container.col-md-5{
    width: 44.666667%;
}

.js-code-container.col-md-6{
    width: 50%;
}



.time-total{
    width: 61%;
    opacity: .25;
    z-index: 0;
}

.timeline-style{
    position: absolute;
    margin: 8px;
    left: 10%;
    padding: 3px 0;
    background-color: #323761;
    display: inline-block;
}


.instagram-form input, textarea, .sign-in-input, .generalInput {
    padding: 9px;
    border: solid 1px #BDBEC1;
    outline: 0;
    font: normal 13px/100% 'Open Sans', Tahoma, sans-serif;
    width: 200px;
    background: #FFFFFF;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}

.special-signup{
    border: rgba(50, 151, 102, .8) solid 2px;
}

.generalInput {
    display: block;
    margin: 10px auto;
    width: 383px;
}

.sign-in-input {
    margin-bottom: 8px;
    padding: 13px;
    margin-left: 17px;
    width: 90%;
    background-image: url('/img/envelope-icon.png');
    background-repeat: no-repeat;
    background-position: right;
}

.sign-in-input-pw {
    margin-bottom: 8px;
    padding: 13px;
    margin-left: 17px;
    width: 90%;
    background-image: url('/img/env-empty-icon.png');
    background-repeat: no-repeat;
    background-position: right;
}

/* sign up specific styling */

.role-selection{
    margin-top:75px;
    margin-bottom: 60px;
}

.role-selection-only{
    margin-top:0px;
    margin-bottom: 60px;
}

.role-selection h4{
    padding-left: 20px;
}

.role-selection .option{
    float: left;
}

.role-selection .btn{
    width: 100px;
    margin: 1px;
}

.role-selection .btn-success{
    font-weight: 700;
}

.role-btn-container{
    margin-left:18px;
}

.check-group{
    margin-left: 17px;
}

.big-button.back-btn-signup{
    border-color: #58355f;
    color: #58355f;
    background-color: rgba(255, 255, 255, 0.56);
    width: 25%;
    display: block;
    position: absolute;
    left: 18px;
}

.sign-in-check{
    opacity: .8;
}

.sign-in-check a {
    color: #774E84 !important;
}

.check-group .double-check{
    width: 156px;
}

.check-group .single-check{
    width: 310px;
}

/* access code container */

.user-meta-container h2{
    font-size: 1.3em;
    text-align: center;
    line-height: 1.4em;
    padding: 0 25px;
}

.user-meta-container h4{
    margin-top: 20px;
    padding-left: 15px;
    font-size: 15px;
}



.inner-btn-graphic{
    margin-right: 10px;
}

.big-button{
    cursor: pointer;
}

.big-button .right.glyphicon{
    margin-right: 5px;
}

.big-button .left.glyphicon{
    margin-left: 5px;
}

.video-cover-text{
    color: #fff;
    text-align: center;
    margin-top: 45px;
    position: relative;
    z-index: 1;
    font-size: 3em;
}

.sign-in-check.is-checked{
    background-color: #774E84;
    color: #fff;
    opacity: 1;
}

.sign-in-check.is-checked a{
    color: #fff !important;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
    border-color: #C9C9C9;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}

.stepone h4 {
    font-weight: 600;
    color: #441B4B;
    text-align: center;
    padding-top: 45px;
    padding-bottom: 25px;
}

img.filterSelect {
    cursor: pointer;
    width: 90%;
    height: 90%;
    max-width: 500px;
    margin: 10px auto;
    display: block;
}

img.filterSelect.active {
    opacity: .5;
}

/* ==========================================================================
Browse Happy prompt
========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

.tcenter {
    text-align: center;
}

.blue-bg{
    background-color: #273072;
    padding: 75px 40px;
}

.award-bg{
    background-image: url("../img/contest/award-bg-01.png");
    background-repeat: repeat;
}

.top-iframe-contest{
    display: block;
    margin: 35px auto 0;
}

.mountains-bg{
    background-image: url("../img/contest/mountains-01.png");
    background-repeat: repeat-x;
    background-color: #34B66A;
    background-position-y: bottom;
    background-position-x: center;
}

.prizes-bg{
    background-image: url("../img/contest/prizes.png");
    background-repeat: no-repeat;
    background-position: center;
    background-color: #E7F4F7;

}

.center-imgs-cont {
    width: 85%;
    margin: 35px auto 5px;
}

.center-imgs-cont img {
    width: 45%;
    padding: 4%;
}

.circle {
    margin: 15px 20px;
    width: 230px;
    height: 230px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    display: inline-block !important;

}

.container-75{
    width: 75%;
    margin: 0 auto;

}

.container-75{
    width: 75%;
    margin: 0 auto;
}

.img_crop {
    overflow: hidden;
    margin-bottom: 30px;
}

.cropZero {
    height: 226px;
}

.cropOne {
    height: 257px;
}

.cropTwo {
    height: 280px;
}

/* ==========================================================================
VidCode custom styles
========================================================================== */

/* Timing */

.cc-6 {
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
}

body.is-in-signup {
    overflow: hidden;
}

.b-cover-layer {
    background-color: rgba(83, 92, 104, 0.9);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    z-index: 4;
}

/*///////////////// Button Styles Custom ////////////////*/

.a-share-btn {
    cursor: pointer;
    color: #fff;
    background-color: #323762;
    padding: 10px 16px;
    font-size: 1.1em;
    margin: 0 9px;
}


.a-share-btn img {
    margin-right: 4px;
    width: 5%;
}

.a-share-btn:hover {
    opacity: .95;
    background-color: #1B2144;
}


.big-action-btn {
    background: #fff;
    border: 2px #58355F solid;
    border-radius: 1px;
    padding: 5px 13px;
    color: #58355F;
    text-transform: uppercase;
    font-size: 1.1em;
    cursor: pointer;
}

.a-body .big-action-btn{
    display: block;
    width: 43%;
    margin: 20px auto 0;
}

.big-action-btn.btn-inactive{
    opacity: .4;
    cursor: default;
}

.a-body .width-20{
    width: 20%;
}

.big-action-btn.btn-inactive:hover{
    background-color: #fff;
    color: #58355F;
}

.big-action-btn.primary-call{
    background-color: #9469A0;
    color: #fff;
    font-weight: 700;
    margin-top: -50px;
    display: inline-block;
    margin-left: 7px;
}

.action-fb-btn{
    border: 2px #323762 solid;
    color: #323762;
}

.big-action-btn:hover {
    color: #fff;
    background: #58355F;
}

.action-fb-btn:hover{
    background-color: #323762;
}

.big-action-btn.btn-special{
    border: 2px #329766 solid;
}

.big-action-btn.btn-special{color: #329766;}
.big-action-btn.btn-special:hover{color: #fff;}

.big-action-btn.btn-special:hover{
    background-color: #329766;
}

.big-action-btn a{color: #58355F;}
.big-action-btn:hover a{color: #fff;}


.inactive-b-a-btn {
    cursor: default;
    opacity: .4;
}

.inactive-b-a-btn:hover {
    background: #fff;
    color: #58355F;
}

.purpleText{color: #9469A0!important; cursor: pointer; font-weight: bold;}


.semibold-text{
    font-weight: 600;
}

.exciting-text{
    font-weight: bold;
    color: rgb(171, 25, 204);
}

.btn-purple {
    background-color: #441B4B;
    border: 0px;
}

.btn-purple:hover {
    background-color: #7B4085;
}

.green-btn {
    background-color: #319665;
}

.green-btn:hover {
    background-color: #1E754B;
}

.pink-btn {
    background-color: #dd39a9;
}

.pink-btn:hover {
    background-color: #AD1D80;
}


.blue-btn {
    background-color: #3262EA;
}


.blue-btn:hover {
    background-color: #2044A8;
}

.purple-btn {
    background-color: #AE40C1;
    font-weight: bold;
}

.purple-btn:hover {
    background-color: #7D248C;
}

.purple-btn-main {
    background-color: #441B4B;
    color: #fff;
    font-weight: bold;
}

.purple-btn-main:hover {
    background-color: #652F6E;
    color: #fff;
}

.purple-btn-main:active, .purple-btn-main:focus {
    color: #fff;
}

.btn a {color: #fff;}

.cyan-btn {
    background-color: #3BE2D6;
}

.cyan-btn:hover {
    background-color: #24ADA4;
}

.save-btn-container .green-btn {
    height: 36px;
    border-radius: 0 4px 4px 0;
    text-align: center;
    padding: 8px 0;
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
}

/*Header */
.nav li a:hover {
    background: none;
    text-decoration: underline;
}

#header {
    background-color: #fff;
    border-bottom: 3px solid #7E79C4;
}

.nav-tabs {
    border-bottom: none;
    padding-bottom: 5px;
    position: relative;
    z-index: 3;
}

.nav-tabs-fixed{
    z-index: 6;
    width: 100%;
    top: 0;
    position: fixed;
}

#header .dropdown a:hover {
    text-decoration: none;
}

#header .dropdown a:active, #header .dropdown a:focus {
    text-decoration: none;
}

.header-profile-pic {
    background-color: #6A00F5;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: inline-block;
    color: #fff;
    text-align: center;
    padding-top: 4px;
    margin-top: -4px;
}

.nav a, .nav .nav-text {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 1.7em;
    color: #58355F;
}

.header-btn {
    background-color: #47A3FF;
    border-radius: 2px;
    display: inline-block;
    margin-top: 5px;
}

.header-btn:hover {
    background-color: #3276b1;
}

.header-btn a {
    color: #fff;
    display: inline-block;
    font-size: 1em;
    padding: 6px 10px;
    text-decoration: none;
}

.header .header-btn a:hover {
    color: #fff;
}

.nav .nav-text{
    display: block;
}

.nav .small {
    margin-top: 4px;
}

.nav a.special{
    font-weight: bold;
    background-color: #7151a2;
    padding: 5px 13px;
    margin-right: 10px;
    color: #fff;
    border-radius: 2px;
    margin-top: 5px;
    margin-bottom: 1px;
}

.nav a.special:hover{
    background-color: #654596;
    color: #fff
}

.nav a:hover {
    color: #9469A0;
}

.nav > li > a, .nav .nav-text {
    padding: 9px 15px 2px;
    line-height: 1.5em;
    border: none;
}

.nav > li {
    border: none;
}

.project-text{
    margin-left: -10px;
    font-size: 1.1em;
    font-weight: 600;
    color: #58355E;
}

.this-lesson-text{
    font-size: 1.1em;
    color: #58355E;
}

.centerObject {
    margin: 0 auto;
}

.show-inline {
    display: inline !important;
}

.nudge-left {
    margin-left: -21px;
}

.post-sign-in {
    display: none;
}

.during-upload {
    display: none;
}

.post-upload {
    display: none;
}

.progressDiv {
    margin: auto;
    width: 97%;
}

.share-btn {
    margin-left: 50px;
}

.share-next-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 170px;
    background-color: #6A00F5;
    color: white;
    border-radius: 5px;
    padding: 15px 5px;
    font-size: 0.9rem;
    font-weight: 600;
}

.share-next-btn p {
    margin: unset;
}

.share-next-btn:hover {
    background-color: #A300FB !important;
}

/* First and Second Video */

.margin-negs {
    margin-left: -44px;
}

.skipbtn {
    float: right;
    margin-right: -177px;
    margin-top: 50px;
    font-size: .9em;
}

.video1 {
    position: absolute;
    z-index: 5;
    margin-left: 245px;
    width: 320px;
    height: 320px;
}

.video2 {
    z-index: 5;
    background-color: #000;
    margin: 0 auto;
    display: block;
    width: 96%;
    height: auto;
}

#video-wrapper{
    width:100%;
    background-color: #fff;
    height:250px;
    position: relative;
    margin-bottom: 11px;
}

@media (min-width: 1240) {
    .video2{
        width:420px;
        height:250px;
        margin: 0 auto;
        display: block;
    }
}


@media (min-width: 1240) {
    .video2{
        width:420px;
        height:250px;
        margin: 0 auto;
        display: block;
    }
}

.flip-video{
    transform: rotate(180deg);
}


.fullscreen-video {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: auto;
    width: 95%;
    z-index: 100000000000000000000000000000000000;
}


.fullscreen-code {
    position: fixed!important;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: auto;
    width: 75%;
    max-height: 100%;
    z-index: 100000000000000000000000000000000000;
}


.front-z-cover{
    z-index: 10000000000000000000000000000000!important;
}

.steps {
    background-color: rgba(68, 27, 75, .9);
    padding: 10px;
    color: #fff;
}

.steps h2 {
    margin-top: 7px;
    margin-bottom: 19px;
    font-size: 1.7em;
    color: #fff;
}

.s-btn-right {
    margin-right: 7px !important;
    margin-top: -44px !important;
}

.s-btn-left {
    margin-left: 4px !important;
}

.s-btn-fst {
    margin-top: 0 !important;
}

.pull_left {
    margin-left: -31px;
}

.heading {
    background-color: #441B4B;
    padding: 5px 0;
    text-align: center;
    color: #fdf6e3;
    font-weight: 700;
    z-index: 500000;
    position: relative;
    font-size: .9em;
}

.heading_bg {
    background-color: #441B4B;
    height: 28px;
    position: relative;
    z-index: 5000001;
}



/* Popup upload video */
.pops {
    width: 400px;
}

.uploadfile {
    float: right;
    width: 120px !important;
    margin-right: 25px !important;
}

.popup, .popup-image, .instagram-form {
    margin: 200px 0 0 300px;
    position: fixed;
    height: 170px;
    width: 600px;
    padding: 10px 50px 90px 50px;
    background-color: #fff;
    z-index: 10000000000;

    -webkit-box-shadow: 9px 0px 23px 0px rgba(50, 50, 50, 0.3);
    -moz-box-shadow: 9px 0px 23px 0px rgba(50, 50, 50, 0.3);
    box-shadow: 9px 0px 23px 0px rgba(50, 50, 50, 0.3);

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.popup-upload-to-library {
    margin: 200px 0 0 300px;

    position: fixed;
    height: 50px;
    width: 600px;
    padding: 10px 50px 90px 50px;
    background-color: #fff;
    z-index: 10000000000;

    -webkit-box-shadow: 9px 0px 23px 0px rgba(50, 50, 50, 0.3);
    -moz-box-shadow: 9px 0px 23px 0px rgba(50, 50, 50, 0.3);
    box-shadow: 9px 0px 23px 0px rgba(50, 50, 50, 0.3);

    -webkit-border-radius: 8px;
    -moz-border-rdius: 8px;
    border-radius: 8px;
}

.loader-upload-to-library {
    margin: 100px 0 0 275px;

    position: fixed;
    height: 50px;
    width: 600px;
    padding: 10px 50px 90px 50px;
    background-color: #fff;
    z-index: 10000000000;

}

.instagram-form input {
    margin-left: 15px;
}

.instagram-form {
    padding-top: 32px;
    padding-bottom: 101px;
}


.loader {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}


.right {
    float: right;
}

.left {
    float: left;
}

.rightimg img{
    float: right;
}


.left-btn {
    margin: 18px 0 !important;
}

.boldText{
    font-weight: 700;
}

.headerText{
    color: #00AEEF;
    font-size: 1.2em;
    margin-top: 25px;
    margin-bottom: 3px;
}

/* Getting started (first) */

.checkbtn {
    float: left;
    margin-left: 90px;
}

.btn-close-steps {
    margin-bottom: 7px !important;
    width: 100px !important;
}

.btn-close-steps2 {
    margin-right: 350px !important;
}

.header-control-glyph{
    color: #fff;
    font-size: 1em;
    cursor: pointer;
    vertical-align: bottom;
    margin-right: 0px;
    margin-top: 1px;
    padding-bottom: 3px;
}

.header-control-glyph:hover{
    color: #9621A5;
}

.control-glyph {
    color: #32325D;
    font-size: 1.4em;
    cursor: pointer;
    vertical-align: bottom;
    margin-bottom: 2px;
    margin-left: 4px;
}

.code-control-btn {
    position: absolute;
    z-index: 1;
    top: 468px;
    right: 18px;
}

.control-glyph:hover{
 color: #9621A5;
}

.resize-btn {
    font-size: 1.2em;
    margin-top: 2px;
    margin-left: 8px;
}

.text-code-prev{
    color: #9621A5;
    padding-left: 5px;
    font-size: .9em;
    font-weight: 700;
    padding-top: 3px;
    position: relative;
    z-index: 1;
}

.fade-out{
    opacity: .1;
}

.vid-info-container{
    margin: 0 auto;
    width: 96%;
    background-color: #D2D2D2;
    padding: 4px 5px 5px;
    position: relative;
    z-index: 2;
    top: -11px;
}

.time-display{
    font-size: .9em;
    padding: 3px 4px;
    font-weight: 700;
    color: #32325D;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.time-display:hover{
    color: #9621A5;
}

/* main screen and edit menu */

.xbtn {
    cursor: pointer;
}

.x-drag {
    position: relative;
    margin-top: -57px;
    margin-left: 148px;
    z-index: 100000;
}

.tabs-1 {
    border: #BDBFBF solid 1px;
    height: 600px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

.pullLeft {
    margin-left: -40px;
}

.small {
    font-size: .93em !important;
}

.hidden {
    display: none;
}

#logo {
    color: #44A682;
}

.methodsBox {
    margin-bottom: 15px;
    width: 100%;
    padding-bottom: 12px;
    text-align: center;
}

#methodList {
    margin-left: -30px;
}

.methodList{
    padding: 0;
}

.basic-filter-method .btn {
    background-color: #319665;
}

.adv-filter-method .btn {
    background-color: rgba(128, 0, 0, 0.61);
}

.movie-control-method .btn {
    background-color: rgb(0, 0, 255);
}

.stop-motion-method .methodList .btn {
    background-color: #58355F;
}

.stop-motion-method .methodList .btn:hover {
    background-color: #412647;
}

.lesson-text-container .lesson-error{
    font-style: italic;
    color: rgb(247, 17, 63)!important;
}

.lesson-text-container .code-prompt{
    font-weight: 700;
    color: #D416F5;
    font-size: 1.1em;
}

#editor {
    margin: 0;
    position: absolute;
    top: 340px;
    bottom: 0;
    left: 0;
    right: 0;
    height: 600px;
    z-index: 3;
}

.buttons {
    padding: 150px;
    display: block;

    z-index: 100;
    position: relative;
}

.buttons.is-aware {
    padding: 10px 9% 0;
    margin: -9px auto -4px;
}

.btn-method {
    background-color: #319665;
    color: #fff;
    margin-right: 15px;
    z-index: 3;
    position: relative;
}

.btn-color-picker{
    display: inline-block;
    margin-left: 0px;
    width: 200px;
    top: 27px;
    position: relative;
}

.learnMore .btn-color-picker li{
    float: none;
    width: 100px;
    margin-left: 0;
}


.hover-tips{
    cursor: pointer;
    margin-left: 4px;
    font-size: 1em;
    color: rgb(196, 119, 190)
}

.hover-tips:hover{
    color:rgb(161, 97, 156);
}

.btn-adv-method {
    background-color: rgba(128, 0, 0, 0.61);
    color: #fff;
    margin-right: 15px !important;
    z-index: 3;
    position: relative;
}

.btn-speed-method {
    background-color: rgb(134, 0, 255);
    color: #fff;
    margin-right: 15px !important;
    z-index: 3;
    position: relative;
}

.btn-method:hover {
    color: #fff !important;
    background-color: #2A7A5D;
}

.prev-s-btn {
    left: -558px;
    bottom: -44px;
    position: relative;
}

.prev-final {
    position: relative;
    left: -558px;
}

.btn-method.is-active {
    opacity: .5;
}

.xbtn {
    display: none;
}

.no-top-border{
    border-top: 0!important
}


.leftspace {
    margin-left: 25px !important;
}

.l-15{
    padding-left: 15px;
}

.r-17{
 margin-right: 17px!important;
}

.topspace--50{
    margin-top: -50px;
}

.topspace--5{
    margin-top: -5px;
}

.topspace-2{
    margin-top: 2px;
}


.topspace-8{
    margin-top: 8px;
}

.topspace-10{
    margin-top: 10px;
}

.topspace-11{
    margin-top: 11px;
}

.topspace-15{
    margin-top: 15px!important;
}


.topspace-20{
    margin-top: 20px;
}

.topspace-25{
    margin-top: 25px!important;
}

.topspace-50{
    margin-top: 50px!important;
}

.topspace-75{
    margin-top: 75px!important;
}

.topspace-100{
    margin-top: 100px!important;
}

.topspace-110{
    margin-top: 110px!important;
}


.topspace-2{
    margin-top: 2px!important;
}

.bottomspace-75{
    padding-bottom: 75px;
}

.bottomspace-40{
    margin-bottom: 40px;
}

.bottomspace-50{
    margin-bottom: 50px;
}

.bottomspace-25{
    margin-bottom: 25px!important;
}


.bottomspace-15{
    margin-bottom:15px;
}

.bottomspace-10{
    margin-bottom:10px;
}

.bottomspace-30{
    padding-bottom: 30px;
}


.centerimg img{
    display: block;
    margin: 0 auto;
}


.btn {
    display: block;
    margin: 10px auto;
    width: 180px;
}

.btn-120{
    width: 120px;
}

.w-150{
    width: 150px;
}


.half-width{
    width: 45%;
}

.overlay {
    width: 105%;
    padding-right: 3px;
    margin-left: -15px;
    height: 600px;
    background: #53C489; /* Old browsers */
    background: -moz-linear-gradient(110deg, #53C489 15%, #7D43A3 50%, #53C489 80%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(15%, #53C489), color-stop(50%, #7D43A3), color-stop(80%, #81DBBA)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(110deg, #53C489 15%, #7D43A3 50%, #53C489 80%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(110deg, #53C489 15%, #7D43A3 50%, #53C489 80%); /* Opera 11.10+ */
    background: -ms-linear-gradient(110deg, #53C489 15%, #7D43A3 50%, #53C489 80%); /* IE10+ */
    background: linear-gradient(155deg, #53C489 15%, #7D43A3 50%, #53C489 80%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#53C489', endColorstr='#7D43A3', GradientType=0); /* IE6-9 */
    background-size: 100% 500%;
    background-position: 0% 0%;
    -webkit-animation-name: colorful;
    -webkit-animation-duration: 150s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

#effects.active {
    height: 0;
}

#controls {
    display: inline-block;
    vertical-align: top;
}

#controls input {
    width: 400px;
}


@-webkit-keyframes colorful {
    from {
        background-position: 0% 0%;
    }

    to {
        background-position: 0% 500%;
    }
}

.blackbg {
    background: #000 !important;
    opacity: 1;
}

.clearHover {
    position: absolute;
    height: 800px;
    width: 100%;
    background-color: rgba(255, 255, 255, .4);
    top: 0;
    left: 0;
    z-index: 1;
}

.instruct-header {
    font-size: 1.4em;
    color: #44A682;

}

.instruct-body {
    font-size: 1.1em
}

.instruct-body {
    font-size: 1.1em
}

.accordion-group {
    padding: 10px;
}

.accordion-inner {
    padding-left: 20px;
}

.a-u-login {
    background-color: #9469A0;
    color: #fff;
    margin-bottom: 20px;
}

.a-u-login:hover {
    background-color: rgba(144, 105, 160, 0.75);
}

.draggable {
    position: relative;
    z-index: 5000000000000000000000000000;
    text-align: left;
    /*background-color: rgba(49, 150, 101, .9)!important;*/
    font-weight: 700;
    margin-left: 4px;
    float: left;
    width: 120px;
}

/*background-color: rgba(49, 150, 101, 1)!important; */
.draggable:hover {
    cursor: -webkit-grab;
    cursor: -moz-grab;
}

.draggable:active {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
}

.draggable.is-active {
    cursor: pointer;
    background-image: url(../img/xbtn_drag.png) !important;
    background-repeat: no-repeat;
    background-position: right;
}

/* ==========================================================================
Workstation
========================================================================== */

.help-text-style{
    position: absolute;
    width: 200px;
    left: 7px;
    margin-top: -90px;
}


.library-btn-container{
    float: left;
    margin: 0 4px -5px 0;
}

.code-help-box{
    margin-top: 80px;
}

.code-help-span{
    font-weight: 700;
    cursor: pointer;
    color: #9469A0;
}

.code-help-span:hover{
    color: #441B4B;
}

.code-help-span .js-help-text{
    display: inline-block;
    margin-left: 8px;
}


.hint-container{
    padding: 0 13px;
    line-height: 1.4em;
    height: 250px;
    width: 100%;
    background-color: #fff;
    overflow-y: scroll;
    overflow: -moz-scrollbars-vertical;
    margin-bottom: 25px;
    position: absolute;
    left: 0;
    margin-top: -54px;
    z-index: 3;
}

.hint-container li{
    padding: 7px 0;
}

.hint-container .purpleText{
    cursor: auto;
}

.header-menu-workstation{
    background-color: #CECFD6;
    border-bottom: #58355F 3px solid;
    margin-bottom: 0px;
    padding: 10px 20px;
    color: #58355F;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
}

.header-secondary{
    margin-top: 0px;
    margin-bottom: 15px;
    background-color: #fff;
    border-top: 2px solid #AD9CBB;
}

.tab-menu-left{
    background-color: #CECFD6;
    width: 100%;
    display: flex; justify-content: space-around;
}

.left-tab-item{
    padding: 10px 0;
    text-align: center;
    width: 50%;
    cursor: pointer;
}


.right-tab-item{
    padding: 10px 0;
    text-align: center;
    width: 50%;
    cursor: pointer;
}


.tab-menu-right{
    background-color: #CECFD6;
    width: 100%;
    display: flex; justify-content: space-around;
}

.tab-menu-right span{
    cursor: pointer;
}

.tab-menu-timeline{
    margin-bottom: 12px;
    background-color: #CECFD6;
    width: 100%;
    padding: 0px 35px;
    text-align: justify;
    height: 45px;
    /*display: flex; justify-content: space-around; ugh why so little support */
}

.tab-menu-timeline a{
    display: inline-block;
    margin-top:8px;
}

.tab-menu-timeline:after{
    content: '';
    width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
    display: inline-block;
}

.timeline-icon{
    font-size: .9em;
    background-color: #fff;
    padding: 7px;
    border-radius: 50%;
    cursor: pointer;
}


.tab-menu-timeline .visited{
    color: #fff;
}

.tab-menu-timeline .visited span{
    background-color: #33B968;
}

.tab-menu-timeline .timeline-icon-active{
    color: #fff;
    background-color: #58355F!important;
}


.tab-item-selected{
    font-weight: 600;
    background-color: #58355F;
    color: #fff;
}

/*learn more - highlighting specific terms in the workstation */
.learnmore-keyword{
    font-weight: 700;
}

.learnmore-codeword{
    font-weight: 700;
    color: #D416F5;
}


/* The effects/ learn more area */

.is-unclickable{
    color: #BFBFC7!important;
    opacity: .7;
    cursor: default;
    background-color: #fff;
}

.is-unclickable:hover{
    background-color: #fff!important;
    color: #BFBFC7!important;
    cursor: default!important;
}

.learnMore {
}

.buttons-container .btn {
    font-size: .9em;
    font-weight: 600;
    width: 43%;
    color: #fff;
    text-align: left;
    padding: 4px 5px;
    margin: 7px 3.1%;
}

.buttons-container .btn:hover {
    color: #fff;
}

.learnMore .bold {
    font-weight: 700;
}

.learnMore .btn-primary {
    border: none;
    background-color: #9469A0;
    color: #fff;
    border-radius: 0;
    font-size: 1em;
    width: auto;
    padding: 5px 16px;
}

.learnMore .btn-primary:hover{
    background-color: #754482;
}

.methods .learnMore {
    background-color: #eee8d5;
}


.learnMore .firstly, .learnMore .secondary {
    cursor: pointer;
    font-weight: 700;
    padding-top: 8px;
}

.learnMore .firstly {
    padding-left: 6px;
    font-size: 1.1em;
}

.learnMore .secondary {
    padding-left: 12px;
}

.learnMore .big-action-btn{
    font-size: 1em;
    margin-top: 15px;
    text-align: center;
    width: 171px;
    font-weight: bold;
}

.btndown {
    display: none;
}

.btn-danger.disabled{
    cursor: default;
    opacity: .6;
}

.learnMore .explanation {
    display: none;
    padding-left: 3px;
    font-size: .9em;
}

.lesson-img-1 {
    width: 255px;
    margin-bottom: -57px;
}

.lesson-img-2 {
    width: 385px;
    margin-bottom: -74px;
}


.console-container span{
    vertical-align:middle;
}

.console-container textarea{
    vertical-align:middle;
    padding: 5px;
    border: solid 1px #BDBEC1;
    outline: 0;
    font: normal 12px/100% 'Open Sans', Tahoma, sans-serif;
    width: 75%;
    background: #FFFFFF;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}


/* ---------------- Graphics, Animation and Timeline ------------------ */
.full-width{
    width:100%;
}

.graphics-container{
    max-height: 320px;
    overflow-y: scroll;
}


#supportCanvas {
    width:100%;
    background-color: transparent;
    position: relative;
    top: -222px;
}

.p5Canvas{
    position: absolute;
    top: 0;
}

@media (min-width: 1240) {
    #supportCanvas{
        width:420px;
        height:250px;
        margin: 0 auto;
    }
}


#stop-motion-timeline{
    margin-top: 5px;
    background-color: #d8d8d8;
    height: 64px;
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

#stop-motion-timeline ul{
    width: 100%;
    height: 64px;
}

#stop-motion-timeline::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#stop-motion-timeline::-webkit-scrollbar
{   height: 6px;
    background-color: #F5F5F5;
}

#stop-motion-timeline::-webkit-scrollbar-thumb
{
    background-color: #441B4B;
}

#stop-motion-timeline ul{
    white-space: nowrap;
    list-style: none;
    margin: 0px;
    padding: 0px;
}
#stop-motion-timeline li{
    margin: 2px;
    display: inline;
    height: 60px;
    width:80px;
}

#stop-motion-timeline img {
    height: 60px;
    width: 80px;
    cursor: pointer;
}
.placeholder-highlight {
         margin-left:40px !important;
         margin-right:40px !important;
}

li.ui-state-default{
    padding-top: 20px;
    padding-bottom: 20px;
}

/* ---------------- Learn More Games ------------------ */

.boolean-game {
    height: 150px;
}

.boolean-game img {
    position: absolute;
}

/* The placing of the flower petals in the boolean game */

.f-s-1 {
    left: 137px;
    top: 82px;
    z-index: 5;
}

.f-s-2 {
    left: 110px;
    top: -15px;
}

.f-s-3 {
    left: 17px;
    top: 42px;
}

.f-s-4 {
    left: 15px;
    top: 90px;
    z-index: 3;
}

.f-s-5 {
    left: 86px;
    top: 103px;
}

.f-s-6 {
    left: 149px;
    top: 99px;
    z-index: 4;
}

.f-s-7 {
    left: 151px;
    top: 91px;
}

.f-s-8 {
    left: 165px;
    top: 52px;
}

.f-s-9 {
    left: 141px;
    top: -21px;
}

.js-f-b-click {
    cursor: pointer;
}

.g-text-container {
    left: 335px;
    top: 21px;
    position: absolute;
    padding-right: 30px;
}

.line-1 {
    font-family: 'Copse';
    color: #58355F;
    font-size: 1.3em;
}

.l-text {
    font-weight: bold;
    font-size: 1.5em;
    margin-left: 5px;
}

.line-2 {
    font-size: 2em;
    font-family: 'Copse';
}

.is-showing-true {
    color: #329766;
}

.is-showing-false {
    color: #323761;
}

.l-g-container {
    width: 47%;
    float: left;
    border: 1px solid;
    border-radius: 4px;
    height: 150px;
}

.l-g-container p {
    text-align: center;
    font-weight: 600;
}

.l-g-container img {
    position: absolute;
}

.l-game-input {
    border-color: #F395AC;
}

.l-game-output {
    border-color: #3D2146;
    margin-left: 25px;
}

/* The placing of the cooking things */

.l-g-i-1 {
    margin-left: 230px;
    margin-top: 10px;
}

.l-g-i-2 {
    margin-left: 162px;
    margin-top: 73px;
}

.l-g-i-3 {
    margin-left: 150px;
    margin-top: 35px;
}

.l-g-i-4 {
    margin-left: 78px;
    margin-top: 66px;
    z-index: 1;
}

.l-g-i-5 {
    margin-top: 19px;
}

.l-g-i-6 {
    margin-left: 42px;
    margin-top: 11px;
}

.l-g-o-1 {
    margin-left: 126px;
}

/* ----Code editor ----- */

/*.cm-number {
    cursor: col-resize;
}

.cm-number:active {
    cursor: col-resize;
    text-decoration: underline;
}

.cm-number:hover{
    text-decoration: underline;
    font-weight: bold;
}
*/
.js-color-picker:hover{
    font-weight: bold;
    text-decoration: underline;
}



#tabs {
    margin-right: -28px;
    margin-left: 10px;
}

/* =============    Individual Lessons Code   ======== */

.btn-center-call a{
    color: #fff;
    background-color: #441B4B;
    padding: 11px 20px;
    font-weight: 600;
    font-size: 1.2em;
    border: #2E134A 2px solid;
    border-radius: 1px;
}

.btn-center-call a:hover{
    background-color: #7A3486;
}

.lesson-page .progress-set {
    margin: 0 auto;
    width: 450px;
    padding: 20px;
}

.lesson-page .progress-set h2 {
    font-size: 1.3em;
    display: inline;
}

.lesson-page .progress-num {
    border: 1px solid #441B4B;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin: 2px 7px;
    text-align: center;
    display: inline-block;
    font-family: 'Copse';
    cursor: pointer;
    font-size: .9em;
}



.lesson-page .progress-set .progress-active {
    color: #fff;
    background-color: #441B4B;
}

.lesson-page .next-progress-btn a {
    font-weight: bold;
    background-color: #441B4B;
    float: right;
    margin: -21px 35px 0 0;
    font-size: 1.2em;
    color: #fff;
    padding: 6px;
    border-radius: 4px;
}

.lesson-page .space-top {
    margin-top: 11px !important;
}

.lesson-page .next-progress-btn a:hover {
    text-decoration: none;
    background-color: #652F6E;
}

.lesson-page .desc-ok-btn a {
    font-weight: bold;
    background-color: #441B4B;
    margin-left: 350px;
    font-size: 1.2em;
    color: #fff;
    padding: 6px;
    border-radius: 4px;
}

.lesson-page .desc-ok-btn a:hover {
    text-decoration: none;
    background-color: #652F6E;
}

.share-landing a, #vid-library .btn, #img-library .btn, .a2a_kit .share-page-btn{
    background-color: #58355F;
    display: inline-block;
    margin: 8px auto;
    color: #fff;
    padding: 7px 9px;
    border-radius: 1px;
    border: none;
}


.a2a_kit .share-page-btn{
    background-color: #58355F;
    display: inline-block;
    margin: 8px auto;
    color: #fff;
    padding: 7px 9px;
    border-radius: 2px;
    border: none;
    text-decoration: none;
    padding-top: 9px;
    margin-left: 2px;
}

.share-landing a{
    display: inline;
}

.container-share{
    width: 60%;
    margin: 25px auto;
}

.container-share li{
    line-height: 1.75em;
    padding-bottom: 18px;
}

.video-overlay-section{
  position: absolute;
  padding: 17px 0 0 35px;
  z-index: 1;
  opacity: .75;
}

.video-overlay-section:hover{
  position: absolute;
  padding: 17px 0 0 35px;
  z-index: 1;
  opacity: 1;
}

.video-overlay-section a {
    background-color: rgba(53, 90, 95, 0.7);
}

.video-overlay-section .secondary{
    color: #fff;
    padding-left: 10px;
}

.video-descriptors .descr {
    color: #8d91a9;
}

#vid-library .btn:hover, #img-library .btn:hover{
    text-decoration: none;
    background-color: #431150;
}

.lesson-page .feedback{
    margin: 20px 0 0 5px;
}

.lesson-page .feedback a {
    color: #9469A0;
}

.lesson-page .feedback a:hover {
    color: #441B4B;
}

.lesson-page .previous-progress-btn a {
    font-weight: bold;
    color: #441B4B;
    float: left;
    font-size: 1.2em;
    margin: 32px 0 0 30px;
}

.lesson-page .active-vid img {
    width: 96%;
}

.lesson-page .video-container {
    width: 100%;
    float: left;
}

.lesson-page .video-container video {
    cursor: pointer;
    width: 100%;
}

.lesson-page .video-container .i-vid-container {
    display: inline-block;
    overflow: hidden;
    width: 29%;
    margin: 5px;
    vertical-align: middle;
    /*height: 100px;*/
}

.lesson-page .audio-container{
    padding-bottom: 20px;
}

.audio-container .dropdown-toggle{
    margin-right: 3%;
}

.audio-container .dropdown-menu{
    top: auto;
}

.audio-container audio{
    width: 68%;
}

.dropdown-set-width{
    width: 95px;
    display: inline-block;
}

.audio-container a{
    color: #754482;
}

.library-tabs{
    margin: 5px 0 15px;
}


.lesson-page .library-tabs h2{
    text-transform: uppercase;
    margin: 0 8%;
    font-size: 1.1em;
    display: inline;
    color: #B86FCC;
    font-family: 'Open Sans';
    cursor: pointer;
}


.lesson-page .library-tabs h2.active-tab{
    border-bottom: #58355F 3px solid;
    color: #58355F;
    padding: 10px 7px;
    font-weight: 600;
}

.lesson-page .video-container button {
    background-color: #319665;
}

.lesson-page .video-container button.btn-danger{
    background-color: #d9534f;
}

.lesson-page .video-container button.btn-info{
    background-color: #787C86;
    border-color: #738388;
    color: #fff;
}

/*sorry temporary contest code*/

.button-block{
    display: block!important;
    margin-top: 30px!important;
    margin-bottom: 15px!important;
    margin-left: 0!important;
}






.js-selected-graphic{
    border: 5px solid #441B4B;
}

.lesson-page .video-container p {
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 15px;
    color: #441B4B;
}

.lesson-page p {
    font-size: 1.1em;
}

.lesson-page .secondary {
    font-weight: normal;
    font-size: 1.1em;
}


.lesson-page .lesson-instr-prompt p{
    font-weight: 500;
    font-size: 1.1em;
}

.lesson-page .lesson-instr-prompt a{
    text-decoration: underline;
    color: #9A4D4A;
    font-size: .9em;
    margin: -13px auto 20px;
    display: block;
}

.lesson-page #recordBtn p{
    font-weight: bold;
    font-size: 1.1em;
    margin: 0;
    color: #fff;
}

/*Adding this as a temp fix for the instruction fonts*/
.lesson-page .steps p {
    font-weight: 100;
    color: #fff !important;
}

.lesson-page .still-strip img {
    width: 25%;
    margin: 2%;
    cursor: pointer;
}

.spacer {
    margin-top: 175px !important;
}

.desc-container {
    text-align: center
}

.lesson-page .lesson-prompt {
    color: #319665;
    font-family: 'Copse';
    text-align: center;
    font-size: 1.4em;
    margin: 25px 0;
}

.lesson-page .arrow-smaller {
    font-size: .9em;
}

.lesson-page .links-holder {
    text-align: center;
}

.lesson-page .links-holder a {
    display: block;
    font-weight: bold;
    font-size: 1.2em;
    margin: 10px;
}

.lesson-page .links-holder .link-one {
    background-color: #441B4B;
    color: #fff;
    padding: 6px;
    border-radius: 4px;
    width: 195px;
    margin: 15px auto;
}

.lesson-page .links-holder .link-one:hover {
    text-decoration: none;
    background-color: #652F6E;
}

.lesson-page .links-holder .link-two {
    background-color: #319665;
    color: #fff;
    padding: 6px;
    border-radius: 4px;
    width: 195px;
    margin: 15px auto;
}

.lesson-page .links-holder .link-two:hover {
    text-decoration: none;
    background-color: #50BA87;
}

.lesson-page .links-holder .link-three {
    color: #684770;
}

.lesson-page .vid-placeholder {
    background-color: blue;
    width: 100%;
    height: 250px;
    margin: -20px 0 0 0;
}


.workstation-container .con-vid-placeholder {
    margin: 0 auto;
    height: 250px;
}

.lesson-page .hoc-vid-placeholder {
    height: 260px;
    width: 60%;
    margin: 20px auto 15px;
}

.lesson-page .cam-vid-placeholder {
    text-align: center;
}


.vid-placeholder h3 {

    font-family: 'Copse', serif;
    text-align: center;
    color: #fff;
    padding-top: 112px;
    font-size: 1.7em !important;
}

.lesson-page .vidtip {
    font-size: 1em;
}

.learning-pop-link {
    font-weight: 600;
    color: #441B4B;
}

.learning-pop-container {
    cursor: pointer;
    margin: 8px 0
}

.learning-pop-container ul {
    list-style-type: disc;
    font-size: .9em;
    padding: 0 56px;
}

.learning-pop-container:hover .progress-num {
    border: 1px solid #774782;
    color: #774782;
}

.learning-pop-container:hover .learning-pop-link {
    color: #774782;
}

.l-color-2 {
    color: #6779C6;
}

.progress-num.l-color-2 {
    border: #6779C6 1px solid;
}

.learning-pop-container.l-color-2:hover .l-color-2 {
    color: #255299;
}

.learning-pop-container.l-color-2:hover .progress-num.l-color-2 {
    border: #255299 1px solid;
}

.l-color-3 {
    color: #329766;
}

.progress-num.l-color-3 {
    border: #329766 1px solid;
}

.learning-pop-container.l-color-3:hover .l-color-3 {
    color: #1C5034;
}

.learning-pop-container.l-color-3:hover .progress-num.l-color-3 {
    border: #1C5034 1px solid;
}

.l-color-4 {
    color: #764682;
}

.progress-num.l-color-4 {
    border: #764682 1px solid;
}

.learning-pop-container.l-color-4:hover .l-color-4 {
    color: #481056;
}

.learning-pop-container.l-color-4:hover .progress-num.l-color-4 {
    border: #481056 1px solid;
}

@keyframes blinking {
    0% { background-color: #BC2828; }
    100% { background-color: #2D2E33; }
}
@-webkit-keyframes blink {
    0% { background-color: #BC2828; }
    100% { background-color: #2D2E33; }
}
.blinking {
    -webkit-animation: blink 1s linear infinite;
    -moz-animation: blink 1s linear infinite;
    -ms-animation: blink 1s linear infinite;
    -o-animation: blink 1s linear infinite;
    animation: blink 1s linear infinite;
}

.blinking-light{
    height: 13px;
    width: 13px;
    border-radius: 50%;
    float: left;
    margin-top: 3px!important;
}

.record-counter{
    float: right;
    font-family: 'Copse';
    float: left;
}

.exampleText {
    position: absolute;
    left: 360px;
    font-weight: 700;
    color: #15A05F;
}

.i-error {
    text-align: center;
    font-weight: bold;
}

.centered-lesson {
    margin: 0 auto 45px;
}

.centered-lesson h2 {
    display: block;
    margin: 0 auto;
}

.centered-lesson video {
    display: block;
    margin: 32px auto -5px;
    width: 530px;
}

.red-text{
    color: #AD4848;
}

.red-text:hover{
    color: #733232;
}


@media only screen and (max-width: 775px) {
    .profile-container {
        width: 100%;;
    }
}

.profile-upgrade-btn.btn-primary{
    display: inline-block;
    background-color: #F3F6F7;
    border-color: #441B4B;
    border-width: 2px;
    width: auto;
    margin-left: 2%;
    padding: 12px 16px;
    margin-bottom: 35px;
    color: #441B4B;
    font-weight: 600;
}



.profile-upgrade-btn.btn-primary:hover{
    background-color: #fff;
    color: #6D3A75;
    border-color:#6D3A75;
}

.column-container,
.portfolio-container-a{
    margin: 0 auto 55px;
    width: 92%;
    background-color: #fff;
}

.tabs{
    float: left;
}

/* Teacher Dashboard */

.teacher-dash .gallery-btn{
    margin-right: 15px;
    margin-bottom: 25px;
    float: right;
}

.student-vid-container{
    padding: 0 28px;
}

.student-vid-container h2{
    font-size: 1.5em;
}

.student-vid-container p{
    font-weight: 600;
}


.dashboard-add-student-input{
    margin-top: 12px;
    width: 20%!important;
}

.datagrid table { border-collapse: collapse; text-align: left; width: 100%; } .datagrid {font: normal 12px/150%; background: #fff; overflow: hidden; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }.datagrid table td, .datagrid table th { padding: 14px 11px; }.datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #441B4B), color-stop(1, #441B4B) );background:-moz-linear-gradient( center top, #441B4B 5%, #441B4B 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#441B4B', endColorstr='#441B4B');background-color:#441B4B; color:#FFFFFF; font-size: .8em; font-weight: 600; } .datagrid table thead th:first-child { border: none; }.datagrid table tbody td { min-width: 115px; color: #00496B; border-left: 1px solid #DFE9EB;font-size: 13px;font-weight: normal; }.datagrid table tbody .alt td { background: #E8EEF4; color: #00496B; }.datagrid table tbody td:first-child { border-left: none; }.datagrid table tbody tr:last-child td { border-bottom: none; }

.datagrid table.is-expanded{
    overflow-x: scroll;
    display: block;
}

.datagrid-scroll{
    overflow: auto;
    border: 1px solid #BDBECA;
}

#classroom-table .progress{
    margin-bottom: 0;
}

.code-mirror-student-container .CodeMirror{
    height: 140px;
    overflow: scroll;
    margin-top: 10px;
}

.project-status-descriptor{
    width: 100%;
    border: 1px solid #BEBDCA;
    border-radius: 3px;
    padding: 20px 35px;
}

.project-status-descriptor h2{
    font-size: 1.75em;
}

.project-status-descriptor .progress{
    width: 86%;
}

.progress-bar-container{
    position: relative;
    top: -27px;
    left: 11%;
}

.btn-container-t-dashboard{
    margin: -52px 17px 82px 0;
}

.btn-container-t-dashboard .btn{
    width: auto;
    margin-left: 7px;
}

.common-core-text{
    font-size: 1.1em;
    line-height: 1.75em;
    color: rgba(0, 0, 0, .35);
}

.green-text{
    color: #2DA52D;
}


.project-status-descriptor h3{
    font-size: 1.4em;
    font-weight: 500;
}

.profile .download-btn{
    margin-right: 20px;
    width: auto;
    margin-top: -20px;
}

.number-projects-complete{
    width: 35px;
    height: 35px;
    background-color: #5CB85C;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    padding: 4px;
    font-family: "Copse";
    font-size: 17px;
    border: 2px solid #303469;
}

.number-projects-complete.unfinished-project{
    background-color: rgba(91, 192, 222, .9);
    color: #fff;
    border-color: #616EAD;
}

/* General Profile */

.profile {
    margin: 20px 0;
}

.profile .center {
    text-align:center;
    width: 100%;
    margin: 0px auto 0px auto
}

.profile .center h2{
    font-size: 1.8em;
    margin: 40px 0 0 0;
}

.lesson-txt{
    color: #492052;
    font-weight: 600;
    margin: 30px 14px auto 14px;
    border-bottom: 3px solid;
    padding-bottom: 7px;
}

.lesson-details{
    padding: 12px 33px 12px 15px;
    background-color: rgba(255, 255, 255, .65);
    z-index: 3;
    position: absolute;
    color: #323762;
    cursor: pointer;
}


.upload-hover-btn{
    margin-left: 309px;
    margin-top: 83px;
    position: relative;
    width: 50px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    opacity: 0;
    transition: all linear 0.15s;
}

.upload-hover-btn:hover{
    opacity: 1;
}

.profile .user-selfie{
    border-radius: 50%;
    width: 84px;
    margin: 0 16px 17px 0;
    transition: all linear 0.3s;
}

.profile-row{
    padding: 0 17px;
}

.profile-vid-container video{
    width: 96%;
    display: block;
    margin: 0 auto;
}

.profile-vid-container h2{
    font-size: 1.3em;
    padding: 0 2%;
}

.profile-vid-container p{
    padding: 0 2%;
    font-weight: 700;
}

.profile .video {
    width: 95%;
    margin: 0 auto;
    display: block;
    cursor: pointer;
}

.profile .vid-row {
    width: 96%;
}

.profile .info{
    margin: -3px 10px 18px;
}

.profile .title img{
    position: absolute;
    right: 11%;
    margin-top: -4px;
}



.lesson-list-2 .row{
    margin-left: 3px;
    margin-right: 3px;
    padding-bottom: 19px;
}
.lesson-list-2 a:hover h2{
    color: #9469A0;
}

.lesson-list-2 a:hover .lesson-details{
    background-color: rgba(255, 255, 255, .75);
}

.js-payment-modal-appear:hover .lesson-details{
    background-color: rgba(255, 255, 255, .75);
}


.lesson-list-2 h2{
    font-family: 'Open Sans', sans-serif;
    color: #323762;
    font-size: 1.1em;
    margin-bottom: 8px;
    height: 32px;
}

.lesson-list-2 h2.project-inactive{
    color: #AAAAAA;
    font-weight: 200;
    cursor: default;
}
.lesson-list-2 a:hover h2.project-inactive{
    color: #AAAAAA;
}


.lesson-list-2 img.project-inactive:hover{
    cursor: default;
}





.lesson-list-2 h3{
    font-family: "Copse";
    color: #323761;
    padding-left: 17px;
    font-size: 1.65em;
}



.lesson-list-2 a:hover h2.standout{
    color: #4AD18A;
}

.lesson-list-2 h2.standout{
    color: #329766;
    font-weight: 600;
}


.profile .lesson-list-title{font-size: 1.7em;}

.profile-row{
    padding: 17px;
}


.profile .username {
    color: #333;
    margin: -6px 0 0 3px;
    font-size: .9em;
    cursor: pointer;
    font-weight: 600;
}

.profile .profile-vid-x-small {
    width: 26%;
    display: inline-block;
    margin: 5px 3.5%;
    vertical-align: top;
}

.profile .profile-vid-small {
    width: 31%;
    display: inline-block;
    margin: 5px 1%;
    vertical-align: top;
}

.profile-vid-small .CodeMirror{
    height: 121px;
    box-shadow: inset 7px 0 12px -8px #3E3E42;
    font-size: 12px!important;
}

.profile-btn-container{
    margin: 37px 0 56px;
}

.profile-btn-container .big-action-btn{
    margin: 0 7px;
}

.units{margin-top: 55px;}

.profile .lesson-num{
    border: 1px solid #441B4B;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin: 2px 7px;
    text-align: center;
    display: inline-block;
    font-family: 'Copse';
    cursor: pointer;
    font-size: .9em;
}

.right-content-tab span{
    cursor: pointer;
}

.right-content-tab .active-text{
    font-weight: 700;
    color: #9469A0;
}

.center-padding{
    margin: 0 4%;
}

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


/* =============    Hour of Code Styling   ======== */
.center-activity-container{
    width: 60%;
    margin: 0 auto;
}

.hoc-act-img{
    padding-right: 20px;
    width: 25%;
    display: inline-block;
    vertical-align: middle;
}

.hoc-act-img img{
    width: 100%
}

.hoc-act-text{
    width: 70%;
    display: inline-block;
    vertical-align: middle;
}

.hoc-act-text h2{
    color: #1A3151;
    font-size: 1.6em;
}

.hoc-act-text p{
    line-height: 25px;
}


.small-text{
    font-size: .8em;
}

.hoc-section{
    width: 100%;
    padding-top: 5px;
}

.hoc-container{
    margin: 0 auto;
    width: 77%;
}

.hoc-logo{
padding: 15px 0 15px 1.1%;
    position: relative;
    width: 210px;
}

.hoc-logo-2{
    padding: 15px 1% 15px 2%;
    position: relative;
}

.hoc-logo-text{
    color: #fff;
    font-size: 2em;
    font-weight: 300;
}

.hoc-link-cta{
    position: relative;
    z-index: 2;
    color: #47174F;
    margin: 36px;
    font-size: 1.4em;
    background-color: rgba(255, 255, 255, .75);
    padding: 7px 18px;
    border: 2px solid #fff;
}

.hoc-link-cta:hover{
    color: #47174F;
    background-color: rgba(255, 255, 255, .9);
 }

.hoc-link{
    position: relative;
    z-index: 2;
    color: #fff;
    margin: 45px 0;
    font-weight: 300;
    font-size: 1.4em;
}

.hoc-link:hover{
    color: #fff;
}

.hoc-section-d{
    position: relative;
    text-align: center;
    padding: 120px 12%;
}

.hoc-section-d p{
    line-height: 2em;
}

.hoc-header{
    position: relative;
    top: -55px;
    z-index: 3;
}

.p-gradient-bg{
    background: #7e23af; /* Old browsers */
    background: -moz-linear-gradient(top,  #7e23af 0%, #8e4eba 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7e23af), color-stop(100%,#8e4eba)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #7e23af 0%,#8e4eba 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #7e23af 0%,#8e4eba 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #7e23af 0%,#8e4eba 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #7e23af 0%,#8e4eba 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e23af', endColorstr='#8e4eba',GradientType=0 ); /* IE6-9 */
}

.hoc-head-container img{
    padding-top: 80px;
}

.img-top-15 img{
    padding-top: 15px;
}

.standard-btn{
    width: auto;
    color: #fff;
    background-color: #9469A0;
    padding:8px 12px;
    display: inline-block;
    margin-top: 15px;
}

.standard-btn:hover{
    color: #fff;
    background-color: #754482;
}

.hoc-footer-logo{
    display: block;
    width: 40%;
    margin: 40px auto 10px;
}

.hoc-head-container h1{
    color: #fff;
    font-size: 3.6em;
    font-weight: 300;
    padding: 15px 20px 5px;
    line-height: 1.3em;
}

.hoc-head-container h3{
    color: #fff;
    font-weight: 100;
    font-size: 1.8em;
}

.hoc-2{
    color: #00AE58;
    text-align: center;
    font-weight: 400;
}

.hoc-2-bold{
    font-weight: 600;
}

.hoc-h1-btns{
    padding-top:20px;
    padding-bottom: 50px;
    width:33%;
    margin: 0 auto;
    text-align: center;
}

.profile .hoc-h1-btns{
    padding-bottom: 1px;
}

.upgrade-btn {
    width: 20%;
}

.width-80{
    width: 80%;
    margin: 0 auto;
}

.width-100{
    width: 100%;
    margin: 0 auto;
}

.hoc-d-styling p{
    line-height: 2em;
}


.hoc-h1-btns div{
    border-radius: 3px;
    background-color: #158AA5;
    width: 100%;
    margin: 25px auto;
    padding: 15px;
    font-size: 1.3em;
}


.hoc-h1-btns div:hover{
    background-color: #2B96AF;
}

.hoc-h1-btns div.color-2{
    background-color: #9F2DAD;
    font-weight: 700;
}

.hoc-h1-btns div.color-2:hover{
    background-color: #B239C1;
}

.hoc-h1-btns a{
    color: #fff;
}

.purple-link a{
    color: #6427A7;
}


.hoc-h1-btns .h-btn-main{
    background-color: #fff;
}

.hoc-h1-btns .h-btn-main:hover{
    color: #2B96AF;
    background-color: #fff;
}

.hoc-h1-btns .h-btn-main{
    color: #158AA5;
    font-weight: 600;
    text-transform: uppercase;
    padding: 12px 0 8px;
    font-size: 1.4em;
}

.hoc-w-btns{
    margin:55px 0 75px;
}

.hoc-w-btns div{
    width: 30%;
    margin: 25px auto;
    border-radius: 3px;
    background-color: #fff;
    color: #944A9D;
    padding: 12px;
    font-weight:600;
    font-size:1.1em;
}

.hoc-content-box{
    background-color: #fff;
    border-radius: 3px;
    padding: 15px 15px 45px;
}

.box-gray{
    background-color: #eeedf7;
}

.hoc-content-box h3{
    color: #1A3151;
    font-family: 'Copse';
}

.hoc-content-box h4{
    color: #1A3151;
    font-size:1.3em;
}

.hoc-content-tab{
    color: #AF4EB3;
    width: 175px;
    font-size: 1.2em;
    background-color: #fff;
    border-radius: 3px;
    text-align: center;
    margin-left: 4%;
    margin-bottom: -6px;
    padding: 15px 0 3px;
}

.hoc-d-styling{
    text-align: center;
}

.hoc-d-styling h3{
    font-family: 'Copse';
}

.bottom-img-place{
    position: absolute;
    bottom: -1px;
    width: 18%;
    left: 8%;
}

.bottom-img-place img{
    width: 100%;
}

.hoc-btn-purple{
    text-align: center;
    width: 215px;
    margin: 30px 0 15px;
    background-color: #49154B;
    color: #fff;
    padding: 9px 17px;
    font-weight: 600;
    border-radius: 3px;
}

.hoc-white-btn{
    color: #52B1CD;
    background-color: #fff;
    border-radius: 3px;
    width: 50%;
    margin: 0 auto 32px;
    padding: 12px;
    font-size: 1.2em;
    font-weight: 600;
}

.hoc-video-header{
    background-color: #EFEFEF;
    text-align: center;
    padding: 9px;
    margin: 0 -11% 0 0;
}

.timeline-btn{
    width: 100%;
    height: 45px;
    background-color: green;
    padding-top: 13px;
    text-align: center;
    background-color: #424150;
    color: #fff;
}

.t-btn-right{
    margin-left: -30px;
    background-image: url("../img/icons/right-arrow-white.png");
    background-repeat: no-repeat;
    background-position: 95%;
    background-size: 14px;
}

.t-btn-left{
    margin-left: 30px;
    background-image: url("../img/icons/right-arrow-left.png");
    background-repeat: no-repeat;
    background-position: 4%;
    background-size: 14px;
}

.t-btn-right-inactive{
     margin-left: -30px;
}

.t-btn-left-inactive{
    margin-left: 30px;
}

.b-full-width{
    width: 100%;
}

.p-full-width{
    width: 100%;
    padding: 0 2%;
}


.question-container{
    margin-top: 70px;
}

.question-container p{
    color: #751475;
    font-weight: 600;
    line-height: 1em;
}

.question-container .secondary{
    font-size: 1em;
    color: #5D6263;
    line-height: .7em;
    margin-bottom: 22px;
}

.question-container textarea{
    width: 80%;
}


/* =============    RESPONSIVE Hour of Code Styling   ======== */


@media only screen and (max-width: 991px) {
    .b-full-width{
        width: auto;
    }
    .b-hidden-small{
        display: none!important;
    }
}

@media only screen and (max-width: 450px) {
    .hoc-head-container h1{
        font-size: 3.2em;
    }
    .hoc-btn-purple{
        width: 100%;
        display: block;
    }
    .hoc-act-img{
        width: 75%;
        margin: 0 auto;
        display: block;
    }
    .hoc-act-text{
        width: 100%;
    }
    .hoc-white-btn{
        width: 100%;
    }
    .hoc-portrait{
        width: 35%!important;
        margin-bottom: 60px;
        border-radius: 50%;
        border: #944A9D solid 3px;
    }
    .hoc-w-btns div{
        width: 100%;
    }
}

.gray-bg{
    background-color: #eeedf7;
}

.l-blue-bg{
    background-color: #52B1CD;
}

.white-bg{
    background-color: #fff;
}

.no-p-left{
    padding-left: 0!important;
}


.no-p-right{
    padding-right: 0!important;
}

.hoc-quote-style{
    color: #49164B;
    font-weight: bold;
    font-family: 'Times', serif;
    font-size: 1.2em;
}

.hoc-quote-name{
    color: #49164B;
    font-style: italic;
    font-size: 1.2em;
}

.hoc-portrait{
    border-radius: 50%;
    border: #944A9D solid 6px;
}

.purple-top{
    border-top: #401B50 5px solid;
}

.hoc-footer{
    padding: 60px 0;
}

.hoc-footer h2{
    font-size: 1.6em;
}

.hoc-footer ul{
    padding: 5px;
}

.hoc-footer li{
    padding: 4px 0;
}

.video-cover{
    position: relative;
    z-index: 2;
    width: 75%;
    margin: 30px auto;
    height: 600px;
    background-color: rgba(10, 10, 10, .9);
}

.video-holder{
    width: 75%;
    margin:30px auto 30px;
    display: block;
    position: relative;
    z-index: 1
}

.video-holder.cover-active{
    margin-top:-630px;
}

.vid-next-links-holder{
    padding-top: 250px;
    width: 45%;
    margin: 0 auto;
    text-align: center;
}

.vid-next-links-holder a{
    font-size: 3em;
    padding: 15px;
    color: #fff;
}

.next-link{
    font-weight: 700;
    color: #34B66A;
}


/*quiz stuff*/

.quiz-container{
    margin-top:35px;
}

.quiz-score{
    position: absolute;
    right: 22px;
    top: 0;
}

.questions-container{
    border: 1px solid #C5C2C2;
}

.questions-container p{
    border: 1px solid #C5C2C2;
    padding: 17px 20px 11px;
    margin: 0;
}

.questions-container input{
    margin-right:50px;
}

.hoc-left-menu{
    background-color: #EFEFEF;
    border-right: 1px solid #73737A;
    width: 20%;
    position: absolute;
    left: 0;
    height: 100%;
}

.top-link{
    color: #231F20;
    text-align: center;
}

.center-menu-text{
    display: inline-block;
    padding: 31px 42px 28px 0px;
    vertical-align: middle;
    font-size: 1.3em;
}


.left-menu-arrow{
    float: left;
    padding: 35px 10px;
    font-size: 1.2em;
}

.menu-link-selected{
    background-color: #fff;
}

.hoc-menu-selected-header{
    font-weight: 600;
    font-size: 1.3em;
    color: #231F20;
    padding: 2px 15px;
    display: block;
}

.menu-list{
    padding-bottom: 20px;
}

.menu-list li{
    padding: 7px 0;
}

.hoc-menu-link{
    padding: 30px 0 15px;
    border-top: 1px solid #73737A;
}

.hoc-resource-body{
    background-color: #fff;
    float: left;
    width: 80%;
    padding: 25px 50px;
    margin-left: 20%;
}

.hoc-resource-header{
    color: #49154B;
    font-size: 1.75em;
    font-weight: 600;
    border-bottom: 3px solid #49154B;
    display: inline-block;
    padding-bottom: 4px;
}

.hoc-resource-body h2{
    color: #3E323F;
    font-size: 1.5em;
    padding: 25px 0 15px;
}

.hoc-resource-body p{
    line-height: 1.8em;
}
/* ==========================================================================
   Profile page tabs.
   ========================================================================== */


/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
    display: block;
    clear: both;
    content: '';
}


.tab-links li {
    margin: 0px 5px;
    float: left;
    list-style: none;
}

.tab-links a {
    padding: 9px 15px;
    display: inline-block;
    border-radius: 3px 3px 0px 0px;
    background: #7FB5DA;
    font-size: 16px;
    font-weight: 600;
    color: #4c4c4c;
    transition: all linear 0.15s;
}

.tab-links a:hover {
    background: #a7cce5;
    text-decoration: none;
}

li.active a, li.active a:hover {
    background: #fff;
    color: #4c4c4c;
}

/*----- Content of Tabs -----*/
.tab-content {
    max-height: 950px;
    overflow-x: hidden;
    margin-left: 4%;
}

.tab {
    display: none;
}

.tab.active {
    display: block;
}


/* =============    Reference Page    ======== */
.reference h3{
    font-weight: 200;
    color: #441B4B;
    font-size: 1.7em;
    font-family: Copse;
    margin-top: 38px;
}

.reference a{
    font-size: 1.1em;
    color: #9342CA;
}

.links-block a{
    display: block;
}

.r-list p{
    font-size: 1.3em;
    margin-bottom: 0;
    margin-top: 15px;
}


.r-list .r-descr{
    margin-top:2px;
    font-size: 1em;
}

.r-code{
    color: #2038A2;
}

.pro-text{
    color: #45DB92;
}

a.pro-link{
    color: #989A99;
}
/* =============    Gallery Page    ======== */

.gCallout{
  font-size: 1.2em;
  text-align: center;
}

.gallery .big-action-btn{
    font-size: 1.3em;
    font-weight: bold;
    width: 380px;
}

@media only screen and (max-width: 550px) {
    .gallery .big-action-btn{
        width: 80%;
        font-size:1.2em;
    }
}

@media only screen and (max-width: 460px) {
    .gallery .big-action-btn{
        width: 80%;
        font-size:.9em;
    }
}

.gallery {
    width: 90%;
    margin: 40px auto;
    background-color: #fff;
    padding-bottom: 70px;
}


.gallery h2{
    margin: 35px auto 30px;
    font-size: 29px;
}

.gallery .underline-gallery-header{
    font-family: 'Open Sans';
    font-weight: 200;
    color: #000;
    border-bottom: 2px solid #58365F;
    padding-bottom: 20px;
    width: 75%;
    margin: 0 auto;
}


.gallery .title{
    margin: 14px 12px 5px 3px;
    font-weight: 400;
    color: #2A2A30;
    font-size: 1.1em;
    margin-top: 3px;
}


.gallery .username {
    font-size: .85em;
    font-weight: 500;
    margin-top: -6px;
    color: #94949a;
    margin: -6px 0 0 3px;
    font-size: .9em;
    cursor: pointer;
    font-weight: 400;
}

.gallery .country{
    color: #000;
    font-size: .85em;
    font-weight: 500;
    margin-left: 2px;
    margin-bottom: 5px;
}

.gallery-item {
    margin-bottom: 20px;
    background: #FFFFFF;
    box-shadow: 0 0 4px 3px rgba(187,187,187,0.30);
    border-radius: 5px;
    color: #9B9B9B;
    overflow: hidden;
}

.gallery-item:hover .delete-project{
    opacity: 1;

}

.info-answer{
    font-weight: 600;
}

.like-button-lg {
    font-size: 20px;
}

.like-button-lg .heart-btn {
    border-radius: 50%;
}

.heart-btn{
    cursor: pointer;
    padding-right: 5px;
    text-align: center;
    vertical-align: bottom;
}

.flag-btn{
    cursor: pointer;
    float: right;
    color: #8D288F;
    margin-top: -3px;
}

.checked-heart-btn{
    color: #6A00F5;
}

.unchecked-heart-btn{
    color: #BFBFBF;
}

.view-button {
    color: #BFBFBF;
}

.eye-btn {
    padding-right: 5px;
}

.like-count {
    font-size: 18px;
    vertical-align: top;
}

.g-img-holder{
    height: auto!important;
        margin-bottom: 20px;
}

.likes-counter-unchecked{
    color: #BFBFBF;
    font-weight: 400;
    margin-right: 4px;
}

.likes-counter-checked{
    font-weight: 600;
    color: #6A00F5;
    margin-right: 4px;
}


.gallery .secondary-header{
    font-size: 2em;
}

.gallery .video {
    width: 100%;
    margin: 0 auto;
    display: block;
    cursor: pointer;
}

.gallery .likes {
    width: auto;
    cursor: pointer;
    display: inline;
    margin: 10px 8px 35px 0;
    float: left;
}

.gallery .hover-change:hover {
    opacity: .75;
}

.gallery .info {
    float: left;
    width: 80%;
}

.gallery .vid-row {
    width: 98%;
    margin: 8px auto;
}


.galleryshow {
    padding: 0 25px;
}

.galleryshow .backbtn {
    color: #441B4B;
    font-weight: 600;
    margin-top: 20px;
    display: inline-block;
}

.galleryshow .backimg {
    margin-top: -5px;
}

.galleryshow .username {
    font-weight: 600;
}

.galleryshow .info {
    margin-top: -10px;
}

.galleryshow .video {
    width: 100%;
}

.galleryshow .gallery-info {
    margin-bottom: 20px;
}

.g-img-holder{
    height: 156px;
    overflow-y: hidden;
    display: block;
}

@media only screen and (min-width: 1400px) {
    .g-img-holder{
        height: 250px;
    }
}


.video-s-featured-info{
  top: 10px;
  left: 15px;
}


.video-overlay-container{
    opacity: .9;
    position: absolute;
    z-index: 3;
}

.vid-btn-container:hover{
    opacity: 1;
}

.video-overlay-container p{
    display: inline-block;
    padding: 0 4px;
    background-color: rgba(241, 249, 249, .8)
}

.video-s-featured .vid-btn-container{
    right: 17px;
    top: 24px;
}

.video-s-sm .vid-btn-container{
    right: 25px;
    top: 10px;
}

.box-btn-lg{
    width: 53px;
    height: 53px;
}

.box-btn-sm{
    width: 28px;
    height: 28px;
}

.vid-btn-container .box-btn{
    border-radius: 3px;
}


.gallery .video-overlay-container .title{
    font-size: 1.5em;
}

.gallery .video-text-container .username{
    font-size: 1em;
}

.sm-vid-container .CodeMirror{
    height: 170px;
}

    /*=========== Gallery Video Buttons =========== */
.g-btn-code-show{
    background-color: rgba(241, 249, 249, .9);
    z-index: 3;
}

.g-btn-code-show img{
    width: 92%;
    margin-top: 24%;
    margin-left: 6%;
}

.g-btn-video-show{
    background-color: rgba(88, 53, 95, .9);
    z-index: 3;
}
.g-btn-video-show img{
    width: 51%;
    margin-top: 23%;
    margin-left: 28%;
}


.js-feature-on {
    background-color:#00AE58;
}

.js-feature-on:hover{
    background-color:#00AE58;
}

.js-feature-off {
    background-color:#8A60CB;
}

.js-feature-off:hover{
    background-color:#8A60CB;
}

/*========End of Gallery Page ======= */



/* =============    Showcase Page    ======== */

.showcase .video-overlay-container .title{
    margin-top: 11px;
    margin-left: 21px;
    font-size: 1.64em;
}

.spacing-p-showcase{
    margin-top: -16px;
    margin-bottom: 31px;
    text-align: center;
}

.showcase .username{
    cursor: default;
    font-size: 1.095em;
    margin-top: 15px;
    margin-left: -25px;
}

.showcase .descr-show{
    cursor: default;
    font-size: 1.095em;
    margin:14px auto -8px -38px;
}

.showcase .CodeMirror{
    height: 340px;
}

.show-vid-c{
    margin-bottom: 50px;
}



/*========End of Showcase Page ======= */

.sm-btn {
    width: 146px;
    margin-left: 10px;
    float: left;
}

.share-landing {

}

.share-landing h2 {
    color: #319665 !important;
}

.share-landing p {
    color: #5D6A6E;
    font-size:1.2em;
}

.share-landing a {
    font-weight: 400;
    float: none;
    margin-bottom: 30px;
}

.share-landing .btn:hover {
    color: #fff;
    background-color: #50BA87;
}


.share-landing .CodeMirror{
    height: 240px;
    text-align: left;
    cursor: default;
}

.share-landing .CodeMirror span{
    cursor: default;
}

.share-landing .CodeMirror div{
    cursor: default;
}

.share-landing .CodeMirror pre{
    cursor: default;
}

.video-descriptors{
    padding: 10px 4px 19px 20px;
}

.video-descriptors h3{
    color: #4A4A4A;
    font-weight: 400;
    font-size: 1.75rem;
}

.name-text{
    color: #94689F;
    font-weight: 600;
}

.social-footer{
    border: #58355F solid;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    margin-left: 10.5%;
    width: 80%;
    padding-top: 8px;
}

.social-footer p{
    padding: 10px 0;
    color: #58355F
}

.portf-btn-container{
    margin-top: 10px;
}

.portf-fb-container{
    margin: 20px 0 42px 0;
    text-align: center;
}

.portf-fb-container .big-action-btn{
  font-weight: 600;
  font-size: 1.4em;
  background-color: rgb(39, 195, 96);
}

.portf-fb-container .big-action-btn:hover{
  background-color: rgb(38, 167, 85);
}

.portf-fb-container .upload-facebook{
    font-size: 1.2em;
    font-weight: 600;
}

.fb-descr-text{
    font-size: 1em;
    margin-bottom: 20px;
}

.video-descriptors .name-container{
  font-size: 1em;
  margin: -3px 0 12px;
}


.addthis-container {
    margin-top: 30px;
    text-align: center;
}

.addthis-container2 {
  margin-left: 162px;
  margin-top: -42px;
  margin-bottom: 13px;
}

.addthis-container img{
    display: block;
    margin: 26px auto;
    width: 67%;
}

.greentext {
    color: #319665 !important;
}

.link-text-1{
    cursor: pointer;
    color: #A077E0;
}
.link-text-1:hover{
    color: #8A60CB;
}

.share-p-text-container {
    width: 530px;
    margin: 3px auto;
    text-align: left;
}

.share-p-text-container h3 {
    font-family: "Copse";
    color: #441B4B;
    padding-left: 0px;
    font-size: 1.8em;
}

.share-p-text-container p {
    font-weight: 400;
    font-size: 1.1em;
    color: #333;
}

.sm-header-bg {
    background: #58355F;
    padding: 7px 9px;
}

.sm-header-bg p {
    color: #fff;
    font-weight: 600;
    margin-bottom: 0;
}

.sm-header-bg .lesson-dropdown {
    font-weight: 400;
    font-size: 1em;
    cursor: pointer;
}

.s-vid-bg{
    position: fixed;
    top: 0px;
    max-width: 115%;
    min-height: 100%;
    width: 100%;
    height: auto;
    z-index: 1;
    background-size: cover;
    transition: 1s opacity;
}

.s-background {
    width: 100%;
    height: 100%;
    background-color: rgba(52, 47, 53, 0.65);
    position: fixed;
    top: 0;
    z-index: 1;
}

.c-background {
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255, 0.25);
    position: fixed;
    z-index: 2;
}

.green-text-bg{
    background-color: #2AD37A;
}

.purple-text-bg{
    background-color:rgba(148, 105, 160, 0.85);
    padding: 4px 20px 8px;
    color: #fff;
}


.center-imgs-cont{
    width: 85%;
    margin: 35px auto 5px;
}


.center-imgs-cont img{
    width: 45%;
    padding: 4%;
}

.contest-heading{
    margin: 5px auto 25px;
    line-height: 1.7em;
    width: 65%;
    font-family: 'Open Sans', sans-serif;
    text-align: left;
    padding-top: 32px;
    color: #EEF0E5;
    text-transform: uppercase;
    font-size: 3.6em;
    letter-spacing: 7px;
}

.contest-p{
    font-size: 2.75em;
}

#contestCameraCanvas{
    margin: 0 auto;
    display: block;
    width: 80%;
}

.contest-button{
    position: relative;
    bottom: -175px;
    background-color: #2AD37A;
    padding: 11px;
    width: 195px;
    margin: 0 auto;
    text-align: center;
    border: 2px solid #EEF0E5;
    color: #EEF0E5;
    text-transform: uppercase;
    font-size: 1.4em;
    letter-spacing: 3px;
    transition-duration: .4s;
}

.contest-button:hover{
    background-color: rgba(238, 240, 229, 0.9);
    border: 2px solid #22AA5C;
    color: #22AA5C;
}

.s-container {
}

.s-popup {
    width: 345px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    margin: 40px auto 50px;
    z-index: 5;
    padding: 5px 0;
}

.caution-txt{
    text-align: right;
    margin-bottom: 2px;
    font-weight: 600;
    position: relative;
}

.caution-txt-2{
    text-align: center;
    margin-top: 20px;
    font-size: 1.2em;
    color: #A30FC7;
    font-weight: 600;
    position: relative;
}

.s-top-links{
    width: 100%;
    padding: 17px 18px 14px;
}

.s-top-links p{
    padding-bottom: 3px;
    display: inline;
    width: 48%;
    font-family: 'Copse', sans-serif;
    font-size: 1.3em;
    margin: 0 34px;
    cursor: pointer;
}

.s-top-links .active-link{
    color: #40074B;
    border-bottom: 3px solid #40074B;
}

.s-top-links .active-link:hover{
    color: #320A3A;
    border-bottom: 3px solid #320A3A;
}

.s-top-links p{
    color: #A077E0;
}

.s-top-links p:hover{
    color: #8A60CB;;
}

.s-separator .text-special {
    text-align: center;
    font-family: 'Copse';
    color: #807E8E;
    padding: 6px 0 22px;
    font-size: 1.05em;
}

.s-separator .text-top{
    margin-top: -19px;
    padding: 6px;
}

.s-separator hr {
    width: 36%;
}

.s-separator .line-l {
    margin: 25px auto auto 20px;
}

.s-separator .line-r {
    margin: -15px auto 25px 200px;
}

.finish-btn-container span{
    margin: 7px auto;
    border-radius: 2px;
    font-family: 'Open Sans';
    font-weight: 600;
    float: left;
}


.n-a-video-save-desc {
    background-color: #329766;
    color: #fff;
    margin-bottom: 20px;
}

.n-a-video-save-desc:hover {
    background-color: #4EAD79;
}

.login-btn {
    width: 90%;
    display: block;
    margin: 7px auto;
    border-radius: 2px;
    font-family: 'Open Sans';
    font-weight: 600;
    border: 1px solid #fff;
    padding: 10px 0;
}

.big-button {
    width: 90%;
    display: block;
    margin: 7px auto;
    border-radius: 2px;
    font-family: 'Open Sans';
    font-weight: 600;
    border: 1px solid #fff;
    padding: 10px 0;
    text-align: center;
}

.signup-btn {
    width: 90%;
    display: block;
    margin: 7px auto;
    border-radius: 2px;
    font-family: 'Open Sans';
    font-weight: 600;
    border: 1px solid #fff;
    padding: 10px 0;
}

.signup-btn.inactive-btn{
    background-color: #AEAEAE;
    margin-bottom: 20px;
    opacity: .5;
    cursor: auto!important;
}

.signup-btn.inactive-btn:hover{
    background-color: #AEAEAE;
    border: 1px solid #fff;
}


.forgot-link {
    margin-top: -19px;
    text-align: right;
    margin-right: 20px;
    font-size: .9em;
}

.reset-btn {
    width: 90%;
    display: block;
    margin: 7px auto;
    border-radius: 2px;
    font-family: 'Open Sans';
    font-weight: 600;
    border: 1px solid #fff;
    padding: 10px 0;
}

.fb-login {
    background-color: #323761;
    color: #fff;
    background-image: url('/img/icons/fb-logo.png');
    background-repeat: no-repeat;
    background-position: 12px 8px;
}

.fb-login:hover {
    background-color: #434A77;
}

.microsoft-login {
    background-color: #838383;
    color: #fff;
    background-image: url('/img/icons/microsoft-icon.png');
    background-repeat: no-repeat;
    background-position: 5px 8px;
}

.g-login {
    background-color: #fff;
    border: 1px solid #94689F;
    color: #414049;
    background-image: url('/img/icons/g-plus-logo.png');
    background-repeat: no-repeat;
    background-position: 2px 1px;
}

.g-login:hover {
    opacity: .75;
    border: #323761 1px solid;
}

.n-a-login {
    background-color: #329766;
    color: #fff;
    margin-bottom: 20px;
}

.n-a-login:hover {
    background-color: #4EAD79;
}

.s-u-login {
    background-color: #323762;
    color: #fff;
    margin-bottom: 20px;
}

.s-u-login:hover {
    background-color: #242949;
}

.s-u-loader-btn img{
    width: 42px;
    display: block;
    margin: 0 auto;
}

.f-u-login {
    background-color: #778899;
    color: #fff;
    margin-bottom: 20px;
}

.f-u-login:hover {
    background-color: #B0C4DE;
}

.r-u-login {
    background-color: #B22222;
    color: #fff;
    margin-bottom: 20px;
}

.r-u-login:hover {
    background-color: #FF6347;
}


.draggable {
    position: relative;
    z-index: 1;
    text-align: left;
    /*background-color: rgba(49, 150, 101, .9)!important;*/
    font-weight: 700;
    margin-left: 4px;
    float: left;
    width: 120px;
}

/*background-color: rgba(49, 150, 101, 1)!important; */
.draggable:hover {
    cursor: -webkit-grab;
    cursor: -moz-grab;
}

.draggable:active {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
}

.draggable.is-active {
    cursor: pointer;
    background-image: url(../img/xbtn_drag.png) !important;
    background-repeat: no-repeat;
    background-position: right;
}

/* The effects/ learn more area/ the stuff on the left of the workstation */





.learnMore .btn {
    font-size: .9em;
    font-weight: 600;
    width: 43%;
    color: #fff;
    text-align: left;
    padding: 4px 5px;
}

.learnMore .btn:hover {
    color: #fff;
}

.learnMore .bold {
    font-weight: 700;
}

.learnMore .btn-primary {
    border: none;
    background-color: #9469A0;
    color: #fff;
    border-radius: 0;
    font-size: 1em;
    width: auto;
    padding: 5px 16px;
}

.learnMore .btn-primary:hover{
    background-color: #754482;
}

.learnMore .submit-btn{
    width: 32%;
    text-align: center;
}

.methods .learnMore {
    background-color: #eee8d5;
}

.learnMore ul img {
    margin-right: 5px;
}

.learnMore .green {
    color: #319665;
}

.learnMore .blue {
    color: #3262EA;
}

.learnMore .purple {
    color: #AE40C1;
}

.learnMore .lightblue {
    color: #3BE2D6;
}

.learnMore .pink {
    color: #dd39a9;
}

.heading .switch {
    cursor: pointer;
}

.heading .active {
    color: #D6BAE8;
}

.learnMore h4 {
    font-weight: 700;
    color: #441B4B;
    font-size: 1.1em;
    margin-top: -3px;
}

.buttons-container ul {
    padding: 0;
}

.learnMore .firstly, .learnMore .secondary {
    cursor: pointer;
    font-weight: 700;
    padding-top: 8px;
}

.learnMore .firstly {
    padding-left: 6px;
    font-size: 1.1em;
}

.learnMore .secondary {
    padding-left: 12px;
}

.learnMore .big-action-btn{
    font-size: 1em;
    margin-top: 15px;
    text-align: center;
    width: 171px;
    font-weight: bold;
}


.w-left-container p{
    font-size: .96em;
    line-height: 1.6em;
}

.w-left-container h3{
    font-size: 1.4em;
    color: #58355F;
}

.w-left-container ul{
    padding: 10px 0;
}

.w-left-container li{
    padding: 3px 0;
}


.w-left-container .top-alert{
    color: #fff;
    background-color: #58355F;
    padding: 7px 15px 6px;
    margin-left: -10px;
    margin-right: -10px;
}

.top-alert a {
    color: #fff;
    text-decoration: underline;
}

.w-left-container .code-preview{
    color: #45434E;
    font-size: .9em;
    padding: 8px 12px;
    border: #B3ACAC dashed 2px;
    background-color: #E5EAE5;
    font-family: monospace;
}

/*file upload button styling */

input[type='file'] {
  color: transparent!important;
}
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
    width: 100%;
    text-align: center;
    display: inline-block;
    border: none;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    font-size: 10pt;
    color: #fff;
}

.custom-file-input:before {
    width: 100%;
    text-align: center;
    display: inline-block;
    border: none;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    font-size: 10pt;
    color: #fff;
}

.custom-file-input:hover::before {
}

.file-input-img::before{
    content: 'Upload Photos';
}


.file-input-img:before{
    content: 'Upload Photos';
}

.file-input-vid::before{
    content: 'Upload Videos';
}

.file-input-vid:before{
    content: 'Upload Videos';
}

.file-input-graph::before{
    content: 'Upload Graphics';
}


.file-input-graph:before{
    content: 'Upload Graphics';
}


.file-input-audio::before{
    content: 'Upload Audio';
}


.file-input-audio:before{
    content: 'Upload Audio';
}


.btndown {
    display: none;
}

.btn-danger.disabled{
    cursor: default;
    opacity: .6;
}

.learnMore .explanation {
    display: none;
    padding-left: 3px;
    font-size: .9em;
}

.lesson-img-1 {
    width: 255px;
    margin-bottom: -57px;
}

.lesson-img-2 {
    width: 385px;
    margin-bottom: -74px;
}


.console-container span{
    vertical-align:middle;
}

.console-container textarea{
    vertical-align:middle;
    padding: 5px;
    border: solid 1px #BDBEC1;
    outline: 0;
    font: normal 12px/100% 'Open Sans', Tahoma, sans-serif;
    width: 75%;
    background: #FFFFFF;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}


/* ---------------- Graphics, Animation and Timeline ------------------ */
.full-width{
    width:100%;
}

#supportCanvas, #graphicsCanvas{
    width:100%;
}

@media (min-width: 1240) {
    #supportCanvas{
        width:420px;
        height:250px;
        margin: 0 auto;
    }
}


#stop-motion-timeline{
    margin-top: 5px;
    background-color: #d8d8d8;
    height: 64px;
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

#stop-motion-timeline ul{
    width: 100%;
    height: 64px;
}

#stop-motion-timeline::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#stop-motion-timeline::-webkit-scrollbar
{   height: 6px;
    background-color: #F5F5F5;
}

#stop-motion-timeline::-webkit-scrollbar-thumb
{
    background-color: #441B4B;
}

#stop-motion-timeline ul{
    white-space: nowrap;
    list-style: none;
    margin: 0px;
    padding: 0px;
}
#stop-motion-timeline li{
    margin: 2px;
    display: inline;
    height: 60px;
    width:80px;
}

#stop-motion-timeline img {
    height: 60px;
    width: 80px;
    cursor: pointer;
}
.placeholder-highlight {
         margin-left:40px !important;
         margin-right:40px !important;
}

li.ui-state-default{
    padding-top: 20px;
    padding-bottom: 20px;
}

/* ---------------- Learn More Games ------------------ */

.boolean-game {
    height: 150px;
}

.boolean-game img {
    position: absolute;
}

/* The placing of the flower petals in the boolean game */

.f-s-1 {
    left: 137px;
    top: 82px;
    z-index: 5;
}

.f-s-2 {
    left: 110px;
    top: -15px;
}

.f-s-3 {
    left: 17px;
    top: 42px;
}

.f-s-4 {
    left: 15px;
    top: 90px;
    z-index: 3;
}

.f-s-5 {
    left: 86px;
    top: 103px;
}

.f-s-6 {
    left: 149px;
    top: 99px;
    z-index: 4;
}

.f-s-7 {
    left: 151px;
    top: 91px;
}

.f-s-8 {
    left: 165px;
    top: 52px;
}

.f-s-9 {
    left: 141px;
    top: -21px;
}

.js-f-b-click {
    cursor: pointer;
}

.g-text-container {
    left: 335px;
    top: 21px;
    position: absolute;
    padding-right: 30px;
}

.line-1 {
    font-family: 'Copse';
    color: #58355F;
    font-size: 1.3em;
}

.l-text {
    font-weight: bold;
    font-size: 1.5em;
    margin-left: 5px;
}

.line-2 {
    font-size: 2em;
    font-family: 'Copse';
}

.is-showing-true {
    color: #329766;
}

.is-showing-false {
    color: #323761;
}

.l-g-container {
    width: 47%;
    float: left;
    border: 1px solid;
    border-radius: 4px;
    height: 150px;
}

.l-g-container p {
    text-align: center;
    font-weight: 600;
}

.l-g-container img {
    position: absolute;
}

.l-game-input {
    border-color: #F395AC;
}

.l-game-output {
    border-color: #3D2146;
    margin-left: 25px;
}

/* The placing of the cooking things */

.l-g-i-1 {
    margin-left: 230px;
    margin-top: 10px;
}

.l-g-i-2 {
    margin-left: 162px;
    margin-top: 73px;
}

.l-g-i-3 {
    margin-left: 150px;
    margin-top: 35px;
}

.l-g-i-4 {
    margin-left: 78px;
    margin-top: 66px;
    z-index: 1;
}

.l-g-i-5 {
    margin-top: 19px;
}

.l-g-i-6 {
    margin-left: 42px;
    margin-top: 11px;
}

.l-g-o-1 {
    margin-left: 126px;
}

/* ----Code editor ----- */

.cm-number {
}

.cm-number:active {
    /*cursor: ew-resize;*/
}

.cm-number:hover {
    /*cursor: ew-resize;*/
}

#tabs {
    margin-right: -28px;
    margin-left: 10px;
}

/* =============    Individual Lessons Code   ======== */
.current-lesson-display {
    width: 100%;
    float: left;
    padding-top: 5px;
    padding-left: 15px;
    margin-bottom: -16px;
}

.current-lesson-display h3 {
    font-weight: 600;
    color: #323762;
    font-size: 1.8em;
}

.large-selection-dropdown {
    position: absolute;
    z-index: 1;
    background: #fff;
    border: 3px solid #22275A;
    border-radius: 3px;
    margin: -3px 0 0 0;
}

.large-selection-dropdown ul {
    padding: 0;
    margin: 0;
}

.large-selection-dropdown li {
    font-size: 1.75em;
    color: #323762;
    padding: 5px 10px;
    cursor: pointer;
}

.large-selection-dropdown li:hover {
    color: #fff;
    background-color: #323762;
}

.small-selection-dropdown{
    max-height: 375px;
    overflow-y: auto;
    width: 215px;
    position: absolute;
    z-index: 5;
    background: #fff;
    border: 3px solid #22275A;
    border-radius: 3px;
    left: 7px;
    top: 33px;
}
.small-selection-dropdown li {
    font-size: 1em;
    color: #323762;
    cursor: pointer;
    list-style-type: none;
    padding: 5px 0;
}

.small-selection-dropdown > ul > li {
    padding-left: 10px;
    padding-right: 10px;
}

.chapter-container li:hover {
    color: #fff;
    background-color: #323762;
}

.small-selection-dropdown ul{
    text-align: right;
    padding: 0;
    margin: 0;
}

.set-container {
    position: relative;
    width: 97%;
    margin: 20px auto 70px;
    background-color: #fff
}

.save-btns-container {
    float: right;
    margin-top: 21px;
}


.btn-center-call a{
    color: #fff;
    background-color: #441B4B;
    padding: 11px 20px;
    font-weight: 600;
    font-size: 1.2em;
    border: #2E134A 2px solid;
    border-radius: 1px;
}

.btn-center-call a:hover{
    background-color: #7A3486;
}

.lesson-page .progress-set {
    margin: 0 auto;
    width: 450px;
    padding: 20px;
}

.lesson-page .progress-set h2 {
    font-size: 1.3em;
    display: inline;
}

.lesson-page .progress-num {
    border: 1px solid #441B4B;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin: 2px 7px;
    text-align: center;
    display: inline-block;
    font-family: 'Copse';
    cursor: pointer;
    font-size: .9em;
}


.lesson-page .progress-set .progress-active {
    color: #fff;
    background-color: #441B4B;
}

.lesson-page .next-progress-btn a {
    font-weight: bold;
    background-color: #441B4B;
    float: right;
    margin: -21px 35px 0 0;
    font-size: 1.2em;
    color: #fff;
    padding: 6px;
    border-radius: 4px;
}

.lesson-page .space-top {
    margin-top: 11px !important;
}

.lesson-page .next-progress-btn a:hover {
    text-decoration: none;
    background-color: #652F6E;
}

.lesson-page .desc-ok-btn a {
    font-weight: bold;
    background-color: #441B4B;
    margin-left: 350px;
    font-size: 1.2em;
    color: #fff;
    padding: 6px;
    border-radius: 4px;
}

.lesson-page .desc-ok-btn a:hover {
    text-decoration: none;
    background-color: #652F6E;
}

.share-landing a, #vid-library .btn, #img-library .btn{
    background-color: #58355F;
    display: inline-block;
    margin: 8px auto;
    color: #fff;
    height: 34px;
    border-radius: 1px;
    border: none;
}



.share-landing a{
    display: inline;
}

.video-overlay-section{
  position: absolute;
  padding: 17px 0 0 35px;
  z-index: 1;
  opacity: .75;
}

.video-overlay-section:hover{
  position: absolute;
  padding: 17px 0 0 35px;
  z-index: 1;
  opacity: 1;
}

.video-overlay-section a {
    background-color: rgba(53, 90, 95, 0.7);
}

.video-overlay-section .secondary{
    color: #fff;
    padding-left: 10px;
}

#vid-library .btn:hover, #img-library .btn:hover{
    text-decoration: none;
    background-color: #431150;
}

.lesson-page .feedback{
    margin: 20px 0 0 5px;
}

.lesson-page .feedback a {
    color: #9469A0;
}

.lesson-page .feedback a:hover {
    color: #441B4B;
}

.lesson-page .previous-progress-btn a {
    font-weight: bold;
    color: #441B4B;
    float: left;
    font-size: 1.2em;
    margin: 32px 0 0 30px;
}

.lesson-page .active-vid img {
    width: 96%;
}

.lesson-page .video-container {
    width: 100%;
    float: left;
}

.lesson-page .video-container video {
    cursor: pointer;
    width: 100%;
}

.lesson-page .sample-video-container {
    height: 250px;
    overflow-y: scroll;
}


.lesson-page .i-vid-container {
    display: inline-block;
    overflow: hidden;
    width: 29%;
    margin: 5px;
}

.lesson-page .audio-container{
    padding-bottom: 20px;
}

.audio-container .dropdown-toggle{
    margin-right: 3%;
}

.audio-container .dropdown-menu{
    top: auto;
}

.audio-container audio{
    width: 68%;
}

.dropdown-set-width{
    width: 95px;
    display: inline-block;
}

.audio-container a{
    color: #754482;
}


.lesson-page .library-tabs div{
    margin: 23px 0 15px;
    width: 48%;
    text-align: center;
    display: inline-block;
}


.lesson-page .video-container button {
    background-color: #319665;
}

.lesson-page .video-container button.btn-danger{
    background-color: #d9534f;
}

.lesson-page .video-container button.btn-info{
    background-color: #787C86;
    border-color: #738388;
    color: #fff;
}


.lesson-page .stills-container {
    /*overflow: visible;    */
}


.lesson-page .video-container img {
    min-width: 100%;
    cursor: pointer;
    height: 100px;
}

.lesson-page .video-container .js-selected-video {
   outline: 3px solid #441B4B;
}



.js-selected-graphic{
    border: 5px solid #441B4B;
}

.lesson-page .video-container p {
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 15px;
    color: #441B4B;
}




/* =============    Profile Page    ======== */
.sidebar-dash-container{
    background-color: #441B4B;
}

.sidebar-dashboard{
    width: 100%;
    height: 100%;
}

.sidebar-dashboard .user-selfie{
    margin: 30px auto 2px;
    display: block;
}

.user-info-container p{
    text-align: center;
    color: #fff;
}

.sidebar-dashboard-link .current {
    font-weight: bold;
}

.sidebar-dashboard-link ul{
    padding: 12px 0;
}

.sidebar-dashboard-link li{
     list-style-type: none;
    color: #fff;
    font-weight: 100;
    list-style-type: none;
    padding: 10px 0;
    text-align: center;
}

.sidebar-dashboard-link li a{
    color: #fff;
}

.sidebar-username{
    font-weight: 700;
    margin: 9px auto 3px;
}

.sidebar-dashboard-link .is-selected-dashboard{
    font-weight: 600;
}

.sidebar-account-type, .sidebar-upgrade{
    font-size: .85em;
    margin: 0 auto 1px;
}

.class-gallery .col-md-4{
    margin-top: 15px;
    margin-bottom: 35px;
}

.class-gallery img{
    width: 100%;
}

.class-gallery .descr{
    margin: -5px 0 3px;
}

#class-resources img{
    width: 100%;
    display: block;
    margin: 10px 0 15px;
    vertical-align: top;
}

.resources-doc:after, .resources-doc:before {
    position: absolute;
    opacity: 1;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.resources-doc:after {
    margin: 3% 5%;
    content: '\A';
    width: 90%;
    height: 88%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
}
.resources-doc:before {
    content: attr(data-content);
    width: 90%;
    color: #fff;
    z-index: 1;
    bottom: 12%;
    padding: 4px 10px;
    text-align: center;
    background: #1C94B2;
    box-sizing: border-box;
    font-size: 1.2em;
    font-weight: 600;
}
.resources-doc:hover:after{
    opacity: .3;
}

.resources-doc:hover:before {
    opacity: 1;
}

.resources-doc{
}


#class-resources .row{
    margin-left: 0;
}

#class-resources .row .table-cell-small{
  width: 2%;
}

#class-resources h4{
    margin-top:25px;
    color: #441B4B;
    font-size: 1.3em;
    font-weight: 700;
    border-bottom: 3px solid;
    display: inline-block;
    padding-bottom: 4px;
}

.profileheader {
    margin: 20px 0 15px 15px;
}

.profile .class-gallery-btn{
    width: auto;
}

.profileheader{
    font-family: 'Open Sans', sans-serif;
    font-size: 1.3em;
    line-height: 1em;
}

.edit-vid{
    float: right;
    margin-top: 4px;
    margin-right: 5px;
    cursor: pointer;
}

.vid-row input, .special-text-input{
    padding: 6px 7px;
    border: solid 1px #BDBEC1;
    outline: 0;
    font: normal 13px/100% Verdana, Tahoma, sans-serif;
    width: 62%;
    background: #FFFFFF;
    margin-bottom: 11px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}

.profile-container{
    padding: 15px;
    border-radius: 1px;
    background: #fff;
    width: 100%;
    float: left;
}

.small-content{
    padding: 55px 170px;
}

@media only screen and (max-width: 775px) {
    .profile-container {
        width: 100%;;
    }
}


.left-17{
    margin-left: 17px;
}

.tabs{
    float: left;
}

.profile {
    margin: 20px 0;
}

.profile .center {
    text-align:center;
    width: 100%;
    margin: 0px auto 0px auto
}

.profile .center h2{
    font-size: 1.8em;
    margin: 40px 0 0 0;
}

.lesson-txt{
    color: #492052;
    font-weight: 600;
    margin: 30px 14px auto 14px;
    border-bottom: 3px solid;
    padding-bottom: 7px;
}

.lesson-details{
    padding: 12px 33px 12px 15px;
    background-color: rgba(255, 255, 255, .65);
    z-index: 3;
    position: absolute;
    color: #323762;
    cursor: pointer;
}


.upload-hover-btn{
    margin-left: 309px;
    margin-top: 83px;
    position: relative;
    width: 50px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    opacity: 0;
    transition: all linear 0.15s;
}

.upload-hover-btn:hover{
    opacity: 1;
}


.profile .video {
    width: 95%;
    margin: 0 auto;
    display: block;
    cursor: pointer;
}

.profile .vid-row {
    width: 96%;
}


.profile .title img{
    position: absolute;
    right: 11%;
    margin-top: -4px;
}

.profile .title {
    font-weight: 600;
    color: #441B4B;
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1.3em;
        margin-top: 12px;

}


.lesson-list-2 .row{
    margin-left: 3px;
    margin-right: 3px;
    padding-bottom: 19px;
}
.lesson-list-2 a:hover h2{
    color: #9469A0;
}

.lesson-list-2 a:hover .lesson-details{
    background-color: rgba(255, 255, 255, .75);
}

.js-payment-modal-appear:hover .lesson-details{
    background-color: rgba(255, 255, 255, .75);
}

.close-modal{
    margin-top: -37px;
}

.lesson-list-2 h2{
    font-family: 'Open Sans', sans-serif;
    color: #323762;
    font-size: 1.1em;
    margin-bottom: 8px;
    height: 32px;
}

.lesson-list-2 h2.project-inactive{
    color: #AAAAAA;
    font-weight: 200;
    cursor: default;
}
.lesson-list-2 a:hover h2.project-inactive{
    color: #AAAAAA;
}


.lesson-list-2 img.project-inactive:hover{
    cursor: default;
}


.lesson-list-2 h3{
    font-family: "Copse";
    color: #323761;
    padding-left: 17px;
    font-size: 1.65em;
}


.lesson-list-2 a:hover h2.standout{
    color: #4AD18A;
}

.lesson-list-2 h2.standout{
    color: #329766;
    font-weight: 600;
}



/* Project Page 2 - projects version 2! */


.project-block{
    width: 100%;
    border-radius: 4px;
    margin: 30px auto 0;
    -webkit-box-shadow: 4px 6px 33px -1px rgba(118,120,128,0.56);
    -moz-box-shadow: 4px 6px 33px -1px rgba(118,120,128,0.56);
    box-shadow: 4px 6px 33px -1px rgba(118,120,128,0.56);
}

.project-img{
    height: 250px;
    overflow: hidden;
}

.project-img img{
    width: 100%;
    min-height: 100%;
    border: none;
    vertical-align: middle;
}

.project-img .beginner-project{
    border-top: 7px solid #89C768;
}

.project-img .intermediate-project{
    border-top: 7px solid #2B67AF;
}

.project-img .advanced-project{
    border-top: 7px solid #63449B;
}

.project-img .sandbox-project{
    border-top: 7px solid #E0DA23;
}

.project-descr{
    padding: 6px 18px;
    width: 100%;
    background-color: #fff;
    height: 175px;
}

.project-descr h2{
    font-family: 'Copse';
    color: #176F8A;
    height: auto;
    font-size: 1.4em;
    margin: 10px 0;
}

.project-descr .descr-text{
    line-height: 24px;
    margin-top: -3px;
    margin-bottom: 17px;
    color: #2D2E35;
    overflow-y: auto;
    height: 110px;

}

.project-price{
    font-weight: 600;
    padding: 10px 17px 10px;
    font-size: 1.15em;
    border-top: 1px solid #E5DCDF;
}

.project-price.price-free{
    color: #89C768;
}

.project-price.price-paid{
    color: #7D50A1;
}

.project-price.price-paid-int{
    color: #2B67AF;
}

.project-price.price-paid-sand{
    color:#989417;
}

.project-price.teacher-notes{
    padding-bottom: 0px;
    font-size: 1em;
    color: #688cc7;
}

/** Media Queries for Project Page **/

@media only screen and (min-width: 1545px) {
    .project-img{
        height: 200px;
    }
}


@media only screen and (min-width: 1715px) {
    .project-img{
        height: 260px;
    }
}



@media only screen and (min-width: 1900px) {
    .project-img{
        height: 300px;
    }
    .project-descr h2{
        font-size: 1.8em;
        margin-bottom: 20px;
    }

    .project-descr .descr-text{
        font-size: 1.2em;
        line-height: 27px;
    }

    .project-price{
        font-size: 1.3em;
    }
}



.profile .lesson-list-title{font-size: 1.7em;}

.profile .username {
    color: #333;
    margin: -6px 0 0 3px;
    font-size: .9em;
    cursor: pointer;
    font-weight: 600;
    margin: -7px 0 4px 2px;
}

.profile .profile-vid-x-small {
    width: 26%;
    display: inline-block;
    margin: 5px 3.5%;
    vertical-align: top;
}

.profile .profile-vid-small {
    width: 31%;
    display: inline-block;
    margin: 5px 1%;
    vertical-align: top;
}

.profile-vid-small .CodeMirror{
    height: 121px;
    box-shadow: inset 7px 0 12px -8px #3E3E42;
    font-size: 12px!important;
}

.profile-btn-container{
    margin: 37px 0 56px;
}

.profile-btn-container .big-action-btn{
    margin: 0 7px;
}

.c-btn-main{
    text-align: center;
    color: #158AA5;
    font-weight: 600;
    text-transform: uppercase;
    padding: 12px 0 8px;
    font-size: 1.4em;
    background-color: #fff;
    width: 100%;
}

.c-btn-container{
    margin: 15px auto;
    width: 25%;
}

.units{margin-top: 55px;}

.profile .lesson-num{
    border: 1px solid #441B4B;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin: 2px 7px;
    text-align: center;
    display: inline-block;
    font-family: 'Copse';
    cursor: pointer;
    font-size: .9em;
}

.right-content-tab span{
    cursor: pointer;
}

.right-content-tab .active-text{
    font-weight: 700;
    color: #9469A0;
}

.center-padding{
    margin: 0 4%;
}

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

.white-text{
    color:#fff;
}
/* ==========================================================================
   Profile page tabs.
   ========================================================================== */


/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
    display: block;
    clear: both;
    content: '';
}


.tab-links li {
    margin: 0px 5px;
    float: left;
    list-style: none;
}

.tab-links a {
    padding: 9px 15px;
    display: inline-block;
    border-radius: 3px 3px 0px 0px;
    background: #7FB5DA;
    font-size: 16px;
    font-weight: 600;
    color: #4c4c4c;
    transition: all linear 0.15s;
}

.tab-links a:hover {
    background: #a7cce5;
    text-decoration: none;
}

li.active a, li.active a:hover {
    background: #fff;
    color: #4c4c4c;
}

/*----- Content of Tabs -----*/
.tab-content {
    max-height: 950px;
    overflow-x: hidden;
    margin-left: 4%;
}

.tab {
    display: none;
}

.tab.active {
    display: block;
}


/* =============    Reference Page    ======== */
.reference h3{
    font-weight: 200;
    color: #441B4B;
    font-size: 1.7em;
    font-family: Copse;
    margin-top: 38px;
}

.reference a{
    font-size: 1.1em;
    color: #9342CA;
}

.links-block a{
    display: block;
}

.r-list p{
    font-size: 1.3em;
    margin-bottom: 0;
    margin-top: 15px;
}


.r-list .r-descr{
    margin-top:2px;
    font-size: 1em;
}

.r-code{
    color: #2038A2;
}

.pro-text{
    color: #45DB92;
}

a.pro-link{
    color: #989A99;
}

/* =============    Gallery Page    ======== */

.gCallout{
  font-size: 1.2em;
  text-align: center;
}

.gallery .big-action-btn{
    font-size: 1.3em;
    font-weight: bold;
    width: 380px;
}

@media only screen and (max-width: 550px) {
    .gallery .big-action-btn{
        width: 80%;
        font-size:1.2em;
    }
}

@media only screen and (max-width: 460px) {
    .gallery .big-action-btn{
        width: 80%;
        font-size:.9em;
    }
}

.galleryheader {
    text-align: center;
    font-weight: 600;
    margin: 38px;
}

.galleryheader img{
    margin-right: 15px;
}

.gallery {
    width: 90%;
    margin: 40px auto;
    background-color: #fff;
    padding-bottom: 70px;
}

.gallery h2{
    font-size: 2.5em;
}

.gallery .secondary-header{
    font-size: 2em;
}

.gallery .video {
    width: 100%;
    margin: 0 auto;
    display: block;
    cursor: pointer;
}

.gallery .likes {
    width: auto;
    cursor: pointer;
    display: inline;
    margin: 10px 8px 35px 0;
    float: left;
}

.gallery .hover-change:hover {
    opacity: .75;
}

.gallery .info {
    float: left;
    width: 80%;
}




.galleryshow .info {
    margin-top: -10px;
}

.galleryshow .video {
    width: 100%;
}

.galleryshow .gallery-info {
    margin-bottom: 20px;
}


.g-img-holder{
    height: 156px;
    overflow-y: hidden;
    display: block;
}

@media only screen and (min-width: 1400px) {
    .g-img-holder{
        height: 250px;
    }
}


.video-s-featured-info{
  top: 10px;
  left: 15px;
}


.video-overlay-container{
    opacity: .9;
    position: absolute;
    z-index: 3;
}

.vid-btn-container:hover{
    opacity: 1;
}

.video-overlay-container p{
    display: inline-block;
    padding: 0 4px;
    background-color: rgba(241, 249, 249, .8)
}

.video-s-featured .vid-btn-container{
    right: 17px;
    top: 24px;
}

.video-s-sm .vid-btn-container{
    right: 25px;
    top: 10px;
}

.box-btn-lg{
    width: 53px;
    height: 53px;
}

.box-btn-sm{
    width: 28px;
    height: 28px;
}

.vid-btn-container .box-btn{
    border-radius: 3px;
}


.gallery .video-overlay-container .title{
    font-size: 1.5em;
}

.gallery .video-text-container .username{
    font-size: 1em;
}

.sm-vid-container .CodeMirror{
    height: 170px;
}

    /*=========== Gallery Video Buttons =========== */
.g-btn-code-show{
    background-color: rgba(241, 249, 249, .9);
    z-index: 3;
}

.g-btn-code-show img{
    width: 92%;
    margin-top: 24%;
    margin-left: 6%;
}

.g-btn-video-show{
    background-color: rgba(88, 53, 95, .9);
    z-index: 3;
}
.g-btn-video-show img{
    width: 51%;
    margin-top: 23%;
    margin-left: 28%;
}

/*========End of Gallery Page ======= */



/* =============    Showcase Page    ======== */

.showcase .video-overlay-container .title{
    margin-top: 11px;
    margin-left: 21px;
    font-size: 1.64em;
}

.spacing-p-showcase{
    margin-top: -16px;
    margin-bottom: 31px;
    text-align: center;
}

.showcase .username{
    cursor: default;
    font-size: 1.095em;
    margin-top: 15px;
    margin-left: -25px;
}

.showcase .descr-show{
    cursor: default;
    font-size: 1.095em;
    margin:14px auto -8px -38px;
}

.showcase .CodeMirror{
    height: 340px;
}

.show-vid-c{
    margin-bottom: 50px;
}



/*========End of Showcase Page ======= */

.sm-btn {
    width: 146px;
    margin-left: 10px;
    float: left;
}

.share-landing {

}

.share-landing h2 {
    color: #319665 !important;
}

.share-landing p {
    color: #5D6A6E;
    font-size:1.2em;
}

.share-landing a {
    font-weight: 400;
    float: none;
    margin-bottom: 30px;
}

.share-landing .btn:hover {
    color: #fff;
    background-color: #50BA87;
}

.share-landing video {
    display: block;
    margin: 0 auto;
    width: 100%;
}

.share-landing .CodeMirror{
    height: 240px;
    text-align: left;
    cursor: default;
}

.share-landing .time-total{
    width: 64%;
}

.share-landing .timeline-style{
    left: 7%;
}

.share-landing .control-glyph{
    font-size: 1.25em;
}

.share-landing .CodeMirror span{
    cursor: default;
}

.share-landing .CodeMirror div{
    cursor: default;
}

.share-landing .CodeMirror pre{
    cursor: default;
}

.name-text{
    color: #94689F;
    font-weight: 600;
}


.social-footer{
    border: #58355F solid;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    margin-left: 10.5%;
    width: 80%;
    padding-top: 8px;
}

.social-footer p{
    padding: 10px 0;
    color: #58355F
}

.portf-btn-container{
    margin-top: 10px;
}

.portf-fb-container{
    margin: 20px 0 42px 0;
    text-align: center;
}

.portf-fb-container .big-action-btn{
  font-weight: 600;
  font-size: 1.4em;
  background-color: rgb(39, 195, 96);
}

.portf-fb-container .big-action-btn:hover{
  background-color: rgb(38, 167, 85);
}

.portf-fb-container .upload-facebook{
    font-size: 1.2em;
    font-weight: 600;
}

.fb-descr-text{
    font-size: 1em;
    margin-bottom: 20px;
}

.video-descriptors .name-container{
  font-size: 1em;
  margin: -3px 0 12px;
}


.addthis-container {
    margin-top: 30px;
    text-align: center;
}

.addthis-container2 {
  margin-left: 162px;
  margin-top: -42px;
  margin-bottom: 13px;
}

.addthis-container img{
    display: block;
    margin: 26px auto;
    width: 67%;
}

.greentext {
    color: #319665 !important;
}

.link-text-1{
    cursor: pointer;
    color: #A077E0;
}
.link-text-1:hover{
    color: #8A60CB;
}

.share-p-text-container {
    width: 530px;
    margin: 3px auto;
    text-align: left;
}

.share-p-text-container h3 {
    font-family: "Copse";
    color: #441B4B;
    padding-left: 0px;
    font-size: 1.8em;
}

.share-p-text-container p {
    font-weight: 400;
    font-size: 1.1em;
    color: #333;
}

.sm-header-bg {
    background: #58355F;
    padding: 7px 9px;
}

.sm-header-bg p {
    color: #fff;
    font-weight: 600;
    margin-bottom: 0;
}

.sm-header-bg .lesson-dropdown {
    font-weight: 400;
    font-size: 1em;
    cursor: pointer;
}

.s-vid-bg{
    position: fixed;
    top: 0px;
    max-width: 115%;
    min-height: 100%;
    width: 100%;
    height: auto;
    z-index: 1;
    background-size: cover;
    transition: 1s opacity;
}

.s-background {
    width: 100%;
    height: 100%;
    background-color: rgba(52, 47, 53, 0.65);
    position: fixed;
    top: 0;
    z-index: 1;
}

.c-background {
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255, 0.25);
    position: fixed;
    z-index: 2;
}

.c-background-blue {
    width: 100%;
    height: 100%;
    background-color: rgba(46,89,175,.6);
    position: fixed;
    z-index: 2;
    top: 0;
}

.over-c-bg{
    position: absolute;
    z-index: 3;
}

.green-text-bg{
    background-color: #2AD37A;
}


.home-heading{
    text-align: center;
    padding-top: 35px;
    color: #EEF0E5;
    text-transform: uppercase;
    font-size: 3.6em;
    letter-spacing: 7px;
    position: relative;
    z-index: 5;
}

.contest-heading{
    margin: 5px auto 25px;
    line-height: 1.7em;
    width: 65%;
    font-family: 'Open Sans', sans-serif;
    text-align: left;
    padding-top: 32px;
    color: #EEF0E5;
    text-transform: uppercase;
    font-size: 3.6em;
    letter-spacing: 7px;
}

.contest-p{
    font-size: 2.75em;
}



.c-content{
    padding: 140px 25px
}

.c-content ul{
    padding-bottom: 55px;
}

.c-content li{
    font-size: 1.2em;
    line-height: 2em;
}
.c-content h3{
    text-align: center;
    font-family: 'Copse';
    padding-bottom: 25px;
}

.c-content p{
    font-size: 1.3em;
    line-height: 1.7em;
}

.c-content p a{
    color: #fff;
    text-decoration: underline;
}

.c-content .snap-w-secondary{
    font-size: 1em;
    margin: 0 auto 20px;
    width: 35%;
    text-align: left;
}

.bg-bright-green{
    background-color: #0BFE01;
}


.white-bg-80{
    width: 75%;
    margin:15px auto;
    background-color: rgba(255, 255, 255, .8);
    padding: 30px;
}

.center-header{
    color: #fff;
    font-size: 3.2em;
    font-family: 'Open Sans';
    font-weight: 200;
}

.white-bg-80 h3{
    color: #49499C;;
    font-size: 3.2em;
    font-weight: 200;
}

.white-bg-80 p{
    font-size: 1.3em;
    line-height: 1.8em;
}

.t-secondary{
    font-family: 'Copse';
    font-size: 1.9em;
}

.contest-button{
    position: relative;
    bottom: -175px;
    background-color: #2AD37A;
    padding: 11px;
    width: 195px;
    margin: 0 auto;
    text-align: center;
    border: 2px solid #EEF0E5;
    color: #EEF0E5;
    text-transform: uppercase;
    font-size: 1.4em;
    letter-spacing: 3px;
    transition-duration: .4s;
}

.contest-button:hover{
    background-color: rgba(238, 240, 229, 0.9);
    border: 2px solid #22AA5C;
    color: #22AA5C;
}


.s-container {
}

.s-popup {
    width: 345px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    margin: 40px auto 50px;
    z-index: 5;
    padding: 5px 0;
}

.caution-txt{
    text-align: right;
    margin-bottom: 2px;
    font-weight: 600;
    position: relative;
}

.s-top-links{
    width: 100%;
    padding: 17px 18px 14px;
}

.s-top-links p{
    padding-bottom: 3px;
    display: inline;
    width: 48%;
    font-family: 'Copse', sans-serif;
    font-size: 1.3em;
    margin: 0 34px;
    cursor: pointer;
}

.s-top-links .active-link{
    color: #40074B;
    border-bottom: 3px solid #40074B;
}

.s-top-links .active-link:hover{
    color: #320A3A;
    border-bottom: 3px solid #320A3A;
}

.s-top-links p{
    color: #A077E0;
}

.s-top-links p:hover{
    color: #8A60CB;;
}

.s-separator .text-special {
    text-align: center;
    font-family: 'Copse';
    color: #807E8E;
    padding: 6px 0 22px;
    font-size: 1.05em;
}

.s-separator .text-top{
    margin-top: -19px;
    padding: 6px;
}

.s-separator hr {
    width: 36%;
}

.s-separator .line-l {
    margin: 25px auto auto 20px;
}

.s-separator .line-r {
    margin: -15px auto 25px 200px;

}

.sm-header-bg {
    background: #58355F;
    padding: 7px 9px;
}

.sm-header-bg p {
    color: #fff;
    font-weight: 600;
    margin-bottom: 0;
}

.sm-header-bg .lesson-dropdown {
    font-weight: 400;
    font-size: 1em;
    cursor: pointer;
}

.s-vid-bg{
    position: fixed;
    top: 0px;
    max-width: 115%;
    min-height: 100%;
    width: 100%;
    height: auto;
    z-index: 1;
    background-size: cover;
    transition: 1s opacity;
}

.s-background {
    width: 100%;
    height: 100%;
    background-color: rgba(52, 47, 53, 0.65);
    position: fixed;
    top: 0;
    z-index: 1;
}

.c-background {
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255, 0.25);
    position: fixed;
    z-index: 2;
}

.c-background-blue {
    width: 100%;
    height: 100%;
    background-color: rgba(46,89,175,.6);
    position: fixed;
    z-index: 2;
    top: 0;
}


.over-c-bg{
    position: absolute;
    z-index: 3;
}


.home-heading{
    text-align: center;
    padding-top: 35px;
    color: #EEF0E5;
    text-transform: uppercase;
    font-size: 2em;
    letter-spacing: 7px;
    position: relative;
    z-index: 5;
}

.home-heading.home-heading2{
    padding-top: 4px;
    font-family: 'Open Sans';
    font-size: 1.3em;
    letter-spacing: 3px;
    font-weight: 600;
}

.contest-heading{
    margin: 5px auto 25px;
    line-height: 1.7em;
    width: 65%;
    font-family: 'Open Sans', sans-serif;
    text-align: left;
    padding-top: 32px;
    color: #EEF0E5;
    text-transform: uppercase;
    font-size: 3.6em;
    letter-spacing: 7px;
}

.contest-p{
    font-size: 2.75em;
}


.c-content{
    padding: 140px 25px;
}

.c-content ul{
    padding-bottom: 55px;
}

.c-content li{
    font-size: 1.2em;
    line-height: 2em;
}
.c-content h3{
    text-align: center;
    font-family: 'Copse';
    padding-bottom: 25px;
}

.c-content p{
    font-size: 1.3em;
    line-height: 2.1em;
}

.bg-bright-green{
    background-color: #0BFE01;
}


.white-bg-80{
    width: 75%;
    margin:15px auto;
    background-color: rgba(255, 255, 255, .8);
    padding: 30px;
}

.center-header{
    color: #fff;
    font-size: 3.2em;
    font-family: 'Open Sans';
    font-weight: 200;
}

.white-bg-80 h3{
    color: #49499C;;
    font-size: 3.2em;
    font-weight: 200;
}

.white-bg-80 p{
    font-size: 1.3em;
    line-height: 1.8em;
}





/* ======================       In-Page Lessons          ============================= */
.lessonImg {
    width: 100%;
}

.lm-title {
    font-size: 1.2em
}

.lesson-text-container {
    overflow-y: auto;
    margin-bottom: 25px;
    padding: 0 15px;
}

.lesson-text-container label{
    font-weight: 600;
    margin-left: 7px;
    font-size: .9em;
}

.lesson-text-block{
    overflow-y: scroll;
    max-height: 285px;
}

.buttons-container {
    max-height: 320px;
    overflow-y: auto;
}

.lesson-text-container p {
    font-size: .96em;
    line-height: 1.6em;
}

.lesson-text-container .codePrompt{
    font-weight: 700;
    color: #9469A0;
    font-size: 1em;
}


/* ======================       Modal Lessons          ============================= */

.modal-content {
    width: 800px;
}

.modal {
    width: 810px;
    overflow: hidden;
    left: 50%;
    margin-left: -405px;
}

.modal-title {
    font-weight: 600;
    color: #441B4B;
}

.btn-close-modal {
    cursor: pointer;
    margin-top: -27px;
}

.is-inactive-btn {
    opacity: .6;
    cursor: default;
}

.is-inactive-btn:hover {
    background-color: #441B4B !important;
}

.push-15 {
    margin-top: 15px !important;
}

.push-40 {
    margin-top: 40px !important;
}

.header-text-s {
    color: rgb(0, 121, 184);
    margin-bottom: 11px;
}

.header-text-s h3 {
    font-weight: 400;
    float: left;
}

.center-inner-text{text-align: center;}

/* ======================       Error          ============================= */
.cover {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
}

.cover90 {
    background-color: rgba(46, 48, 58, .75);
}

.cover50 {
    background-color: rgba(46, 48, 58, .5);
}

.cover-effect{
    opacity: .9;
    background: #53C489; /* Old browsers */
    background: -moz-linear-gradient(110deg, #53C489 15%, #7D43A3 50%, #53C489 80%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(15%, #53C489), color-stop(50%, #7D43A3), color-stop(80%, #81DBBA)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(110deg, #53C489 15%, #7D43A3 50%, #53C489 80%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(110deg, #53C489 15%, #7D43A3 50%, #53C489 80%); /* Opera 11.10+ */
    background: -ms-linear-gradient(110deg, #53C489 15%, #7D43A3 50%, #53C489 80%); /* IE10+ */
    background: linear-gradient(155deg, #53C489 15%, #7D43A3 50%, #53C489 80%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#53C489', endColorstr='#7D43A3', GradientType=0); /* IE6-9 */
    background-size: 100% 500%;
    background-position: 0% 0%;
    -webkit-animation-name: colorful;
    -webkit-animation-duration: 25s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}


.popup-message {
    position: absolute;
    top: 10%;
    left: 50%;
    z-index: 10;
    width: 500px;
    margin-left: -250px;
}

.popup-message div {
    width: 100%;
}

.panelhead {
    background: #329766;
    padding: 1px 24px 8px;
}

.panelhead h2 {
    color: #fff;
}

.panelhead a{
    color: #0B0C0C;
}


.panelbody {
    background: #fff;
    padding: 22px 24px 17px;
    font-size: 1.1em;
    line-height: 1.7em;
}

.panel-sample-vid .i-vid-container{
    width: 32%;
    display: inline-block;
    margin: .3%;
}

.panel-sample-vid .sample-vid{
    width: 100%;
    cursor: pointer;
}

.panelhead-2{
    background: #58355F;
    padding: 1px 24px 6px;
}

.panelhead-2 .x-btn{
    margin-top: -30px;
    float: right;
}

.panelhead-2 h2{
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    font-size: 1.6em;
    margin: 14px 0 8px;
}

.panelbody-2 {
    background: #EDEBED;
    padding: 22px 37px 17px;
    font-size: 1.1em;
    line-height: 1.7em;
}

.panelbody-2 p{
    color: #323762;
    text-align: center;
    font-size: 1.2em;
}

.panelbody-2 .big-action-btn{
    text-transform: none;
    font-weight: 600;
    font-size: 1.1em;
    width: 68%;
    margin: 0 auto;
}

.panelbody-2 .list-item{
    margin: 25px 0;
    font-size: 1.1em;
}

.panelbody-2 .list-num{
    list-style:none;
    margin: 0;
    padding: 0;
}

.panelbody-2 .list-num li{
    counter-increment: item;
}

.panelbody-2 .list-num li:before{
    margin-right:10px;
    content: counter(item);
    border-radius:100%;
    color:#fff;
    background-color: #9469A0;
    font-size: .8em;
    width:27px;
    height: 27px;
    text-align:center;
    display:inline-block;
    font-family: 'Copse';
}

.popup-message .modal-left-info{
    float: left;
    width: 50%;
}

.modal-left-info p{
    text-align: left;
    margin-top: 33px;
    font-size: 1em;
}

#AmazonPayButton{
    float: right;
    width: 50%;
}

.success-modal-message a{
    display: block;
    margin: 8px auto;
    text-align: center;
}

.video-modal{
    width: 300px;
    display: block;
    margin: 10px auto;
}

.list-item span{
    width: 336px;
    float: right;
    color: #343135;
    font-size: .95em;
}

.p-text-container{
    background-color: #fff;
    padding: 4px 22px;
}

.p-text-container p{
    text-align: center;
    font-size: .9em;
}

.p-text-container textarea{
    display: block;
    margin: 0 auto;
    width: 92%;
}

.p-text-container .p-heading{
    color: #9469A0;
    font-size: 1.2em;
    font-weight: 600;
    border-bottom: 2px solid #9469A0;
    padding: 16px 0 0;
}

.p-text-container .upload-facebook{
    margin: 10px auto;
    width: 39%;
    display: block;
}

.paneltabs-2{
    background-color: #58355F;
}

.paneltabs-2 ul{
    padding: 10px;
    margin: 0 auto;
    padding: 10px 48px;
}

.paneltabs-2 li{
    padding: 12px 20px;
    font-family: 'Copse', serif;
    color: #fff;
    display: inline;
    font-size: 1.2em;
    cursor: pointer;
}

.paneltabs-2 li.active-tab{
    color: #58355F;
    background-color: #EDEBED;
}

.center-pro-modal{
    margin: 24px auto 0;
}

.center-pro-modal div{
    float: left;
}

.popup-message .vertical-focus-bar{
    background-color: #329766;
    width: 75px;
    padding: 16px 0 0;
}

.vertical-focus-bar p{
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 3px;
}

.vertical-focus-bar h5{
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 1.1em;
    position: relative;
    top: -10px;
    margin-bottom: -0px;
}

.vertical-text{
    margin-bottom: 10px;
}


.popup-message .horizontal-focus-box{
    width: 350px;
    background-color: #fff;
    padding: 27px 25px 16px;
}

.horizontal-focus-box p{
    padding: 2px 0 4px;
    text-align: left;
    color: #58355F;
}

.horizontal-focus-box p img{
    margin-right: 16px;
}


/* ====================== Error in User Code ==================== */

.user-code-error-details {
    font-size: 1.5em;
}

.user-code-error-details .name {
    font-weight: bold;
}

/* ======================       Share and Save: Action Modals          ============================= */

.action-modal {
    position: absolute;
    top: 15%;
    left: 50%;
    z-index: 10;
    width: 500px;
    margin-left: -250px;
}

.action-modal .a-header {
    width: 100%;
    background: #329766;
    padding: 12px 15px 1px;
    text-align: center;
    color: #fff;
    font-size: 1.7em;
    text-transform: uppercase;
}

.a-header p{

}

.action-modal .a-body {
    width: 100%;
    background-color: #EFF3F4;
    color: #323762;
    padding: 23px 25px 40px;
}

.action-modal .c-desc {
    text-align: center;
    color: #323762;
    font-size: 1.7em;
    padding: 0 0 15px;
}


.action-modal .m-desc {
    text-align: center;
    color: #323762;
    font-size: 1.7em;
    padding: 0 0 15px;
}

.action-modal label {
    display: block;
}

.action-modal textarea {
    width: 100%;
    margin-bottom: 15px;
}

.action-modal .progressDiv {
    width: 100%;
    margin-top: 21px;
}

.action-modal .progress-bar {
    background: #58355F !important;
}

.btn-center {
    width: 97%;
    margin: 0 auto;
}

.btn.dropdown-toggle{
    margin: 0 auto 10px;
    display: inline;
}

.dropdown .selected-dropdown-link{
    width: 200px;
    font-weight: 600;
    color: #9469A0;
    text-align: left;
    padding: 0px 15px;
}



.select-dropdown-menu li{
    cursor: pointer;
    padding: 3px 15px;
}

.select-dropdown-menu li:hover{
    background-color: #C2DCE2;
}


.sm-dropdown{
    display: inline;
    margin-left: 4%;
}

.clear-array-btn{
    display: inline-block;
    margin-top: -1px;
    width: 100px;
}

.open .selected-dropdown-link{
    color: #9469A0!important;
    font-weight: 600;
}

.dropdown .dropdown-arrow{
  float: right;
  margin: 15px 0 0;
}

.action-m {
    z-index: 10;
    position: relative;
}

.action-modal .generalInput {
    width: 100%;
    margin: 0 auto 15px;
}

.s-btn {
    padding: 10px 28px;
    margin-left: 355px;
}



/* ======================       AddThis          ============================= */
.upload-facebook {
    background: #323762 !important;
    padding: 9px 16px !important;
    color: #fff !important;
    margin-bottom: 10px;
}

.at-svc-facebook {
    background: #58355F !important;
    width: 65px !important;
    max-width: 197px !important;
    padding: 9px 16px !important;
    height: 47px !important;
    max-height: 47px !important;
    color: #fff !important;
    border-radius: 1px!important;
}

.at-svc-facebook img {
    padding-right: 5px !important
}
.at-svc-twitter {
    background: #58355F !important;
    width: 65px !important;
    max-width: 197px !important;
    padding: 9px 16px !important;
    height: 47px !important;
    max-height: 47px !important;
    color: #fff !important;
    right: -19px!important;
    position: relative!important;
    border-radius: 1px!important;
}

.at-svc-twitter img {
    padding-right: 5px !important
}


.addthis-spacing{margin: 0px 20px!important;}


.hoc-resource-body{
    background-color: #fff;
    float: left;
    width: 80%;
    padding: 25px 50px;
    margin-left: 20%;
}

.hoc-resource-header{
    color: #49154B;
    font-size: 1.9em;
    font-weight: 600;
    border-bottom: 3px solid #49154B;
    display: inline-block;
    padding-bottom: 4px;
}

.hoc-resource-body h2{
    color: #3E323F;
    font-size: 1.5em;
    padding: 25px 0 15px;
}

.hoc-resource-body p{
    line-height: 1.8em;
}


/* ==========================================================================
Helper classes
========================================================================== */

/*
* Image replacement
*/

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/


.is-hidden {
    display: none !important;
    visibility: hidden;
}

/* JS is styling */

.is-inactive {
    display: none;
    margin-left: 165px;
}

/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
* Hide visually and from screenreaders, but maintain layout
*/

.invisible {
    visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/

.clearfix {
    *zoom: 1;
}

.mobile-display {
    display: none;
    padding: 25px 35px;
    text-align: center;
}

.mobile-display img {
    display: block;
    margin: 0 auto;
}

.mobile-display h1 {
    font-family: 'Copse';
    font-size: 1.7em;
    color: #441B4B;
    line-height: 1.3em;
}

.mobile-display p {
    font-family: 'Open Sans';
    color: #333;
}

.mobile-display a {
    color: #309766;
}

@media only screen and (max-width: 460px) {
    .general-display {
        display: none;
    }

    .mobile-display {
        display: block;
    }

    .nav-tabs a {
        font-size: .9em !important;
    }
}

@media only screen and (max-width: 720px) {
    .s-vid-bg{

        max-width: 275%;
    }
}

@media only screen and (max-width: 950px) {
    .white-bg-80 h3{
        font-size: 1.75em;;
    }
    .center-header{
        font-size: 3em;
    }
}

@media only screen and (max-width: 330px) {
    .white-bg-80 h3{
        font-size: 1.25em;
    }

    .white-bg-80 p{
        font-size: 1em;
        line-height: 1.7em;
    }
}


@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
    * Don't show links for images, or javascript/internal links
    */
    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}


@media only screen and (max-width: 900px) {
    .center-imgs-cont img{
        width: 100%;
    }
}


@media only screen and (max-width: 750px) {
    .hoc-h1-btns{
        width: 50%;
    }
}

@media only screen and (max-width: 425px) {
    .hoc-h1-btns{
        width: 80%;
    }
    .center-imgs-cont{
        width: 100%;
    }
}

/* ==========================================================================
Profile page tabs.
========================================================================== */


/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
    display: block;
    clear: both;
    content: '';
}

.tab-links li {
    text-transform: uppercase;
    margin: 0px 5px;
    float: left;
    list-style: none;
}

.tab-links a {
    padding: 9px 15px;
    display: inline-block;
    border-radius: 3px 3px 0px 0px;
    background: #7FB5DA;
    font-size: 16px;
    font-weight: 600;
    color: #4c4c4c;
    transition: all linear 0.15s;
    font-weight: 400;
}

.tab-links a:hover {
    background: #a7cce5;
    text-decoration: none;
}

li.active a, li.active a:hover {
    background: #fff;
    color: #4c4c4c;
    font-weight: 600;
}

.buy-stop-motion label{margin-right: 10px;}
.buy-stop-motion .big-action-btn{text-align: center; width:100%;}

.action-modal .warning-text{
    color: #C73311;
    padding-bottom: 0;
}

.finish-btn-container .center-btn{
    display: block;
    margin: 30px auto 0;
    float: none;
    font-weight: 600;
    text-align: center;
}

/* ==========================================================================
Amazon widget.
#addressBookWidgetDiv{width: 400px; height: 228px;}


#walletWidgetDiv{width: 400px; height: 228px;}


#consentWidgetDiv {width: 400px; height: 140px;}


#readOnlyAddressBookWidgetDiv {width: 400px; height: 185px;}


#readOnlyWalletWidgetDiv {width: 400px; height: 185px;}

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

.amazon-payments-error{
    width: 300px;
    color: #D8000C;
    background-color: #FFBABA;
    argin: 10px 0px;
    padding:12px;
    border: 2px solid;
    border-radius: 25px;
}

.js-color-picker{cursor: pointer;}
/*.js-color-picker:before{
    content: "";
    width: 10px;
    height: 10px;
    background-color: blue;
}*/





/* ==========================================================================
    Pricing Subscribe Page with Stripe
   ========================================================================== */

.general-header{
    width: 90%;
    font-size: 1.86em;
    padding-bottom: 15px;
    margin-top: 25px;
    margin: 15px auto 30px;
    font-weight: 600!important;
    color: #58365F;
    border-bottom: 2px solid #58365F;
}

.pricing-header{
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;
    padding: 20px 0;
    font-size: 1.4em;
}

.pricing-header.color-1{
    background-color: #633F6B;
}


.pricing-header.color-2{
    background-color: #401B51;
}

.pricing-body{
    width: 100%;
    text-align: center;
    padding: 30px 10px;
    margin-top: -10px;
    height: 245px;
}

.col-md-4 .pricing-body{
    height: 300px;
}

.student-calculator-container{
    color: #fff;
    margin-top: 26px;
}

.js-students-result{
margin-top: 6px;
    font-size: 1.7em;
}

.student-calculator{
    display: inline-block;
    border-radius: 4px;
    text-align: right;
    width: 28%;
    margin: 0 auto;
    padding: 5px 9px;
    border: solid 1px #BDBEC1;
    outline: 0;
    background: #FFFFFF;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}

.pricing-body.color-1{
    background-color: #774B83;
}

.pricing-body.color-2{
    background-color: #502668;
}

.pricing-body h3{
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    font-size: 4em;
    font-weight: 300;
}

.price-sub{
    color: #fff;
    font-size: 1.75em;
    text-transform: uppercase;
    font-weight: 100;
    margin-top: -5px;
}

.pricing-link{
    color: #fff;
    font-size: 1.2em;
    text-decoration: underline;
    margin-top: 58px;
    margin-bottom: 10px;
}

.pricing-link:hover{
    color: #fff;
}


.pricing-call-btn{
    font-size: 1.2em;
    padding: 10px 1px;
    width: 61%;
    background-color: #fff;
    border-radius: 3px;
    font-weight: 600;
    display: block;
    margin: 26px auto 0px;

}

.pricing-call-btn.color-1{
    color: #774B83;
}

.pricing-call-btn.color-2{
    color: #502668;
}


.stripe-button-el{
    margin-top: 24px!important;
    margin-bottom: 3px!important;
}

.pricing-included{
    width: 100%;
    padding: 15px 13px;
    font-size: 1.05em;
    margin-bottom: 0;
}

.pricing-included.color-1{
    background-color: rgba(221,221,222,.6);
}


.pricing-included.color-2{
    background-color: #FAFAFF;
}

.pricing-included .glyphicon{
    color: #502668;
}

.included-text{
    margin-left: 3px;
    text-align: center;
}

.center-bottom-style{
    text-align: center;
    font-size: 1.6em;
    font-weight: 100;
    color: #401B51;
}

.center-bottom-style a{
    color: #774B83;
    display: inline;
}

.top-link{
    font-size: 1.3em;
    margin-top: 2px;
    margin-right: 16px;
}

.center-bottom-style.boldText{
    font-weight: 400;
    font-size: 1.75em;
}

.top-link{
    font-size: 1.3em;
    margin-top: 2px;
    margin-right: 16px;
}

.strikethrough{
    margin-top: 12px;
    left: 33%;
    width: 36%;
    position: absolute;
    background-color: #FFFFFF;
    color: #FDFBFB;
    border-color: #FFFFFF;
    transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}

.session-save-input{
    text-align: center;
    width: 65%;
    margin: 0 auto;
    display: block;
    padding: 9px;
    border: solid 1px #BDBEC1;
    outline: 0;
    font: normal 13px/100% 'Open Sans', Tahoma, sans-serif;
    background: #FFFFFF;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}



/* ==========================================================================
Climate contest Gallery Page
========================================================================== */
.mountain-bg{
    background-image: url('/img/contest/mountains-blue-bg-01.png');
    background-repeat: repeat-x;
    background-color: #E9F6FA;
    margin-bottom: -40px;
    padding-bottom: 75px;
    background-position-x: center;
    padding-top: 50px;
}

.gallery-container{
    margin: 0 auto 55px;
    width: 85%;
    background-color: #fff;
}

.gallery-container video{
    width: 100%;
}

.winner-video-container{
    margin: 40px 13% 60px;
    position: relative;
}

.winner-video-container p{
    margin-top: 20px;
    font-size: 1.5em;
    color: #273072;
}

.gallery-container .video-container{
    padding: 80px 4% 25px;
}

.gallery-container .video-container video{
    padding: 15px 0 7px;
}

.gallery-container .video-container p{
    margin-top: 12px;
    font-size: 1.2em;
    text-align: center;

}

.gallery-container .contest-heading{
    padding: 30px 0 35px;
    text-align: center;
    margin: 0;
    width: 100%;
    color: #273072;
    font-weight: 200;
    line-height: 1em;
    font-size: 3.2em;
}

.gallery-container h2{
    font-family: 'Open Sans';
    text-transform: uppercase;
    font-weight: 400;
    font-size: 2.3em;
    letter-spacing: .1em;
    color: #34B66A;
    text-align: center;
}

.gallery-container h3{
    text-align: center;
    font-size: 2em;
    font-weight: 400;
    color: #273072;
}

.climate-descr-text p{
    font-size: 1.3em;
    line-height: 2em;
    margin-top: 30px;
}

.abs-ribbon-placement{
    position: absolute;
    top: -29px;
    width: 180px;
    right: -34px;
}


.gallery-logo-container{
    margin: 45px auto 0px;
}

.gallery-logo-container img{
    width: 31%;
}


@media only screen and (max-width: 950px) {
    .abs-ribbon-placement {
        width: 25%;
    }
    .gallery-container .contest-heading{
        font-size: 2.2em;
    }
    .winner-video-container p{
        font-size: 1.1em;
    }
    .climate-descr-text p{
        font-size: 1.1em;
    }
    .gallery-container{
        padding: 0 4%;
    }
    .gallery-container h3{
        font-size: 1.3em;
        line-height: 1.5em;
    }
    .gallery-logo-container img{
        width: 42%;
    }
}


.gallery-container .CodeMirror{
    height: 100px;
    box-shadow: none!important;
}

.gallery-container .project-block{
}

.gallery-container .project-descr{
    height: 140px;
}

.gallery-container .runner-video-header p{
    padding-top: 15px;
    margin-bottom: 0;
    text-align: left;
    color: #34B66A;
    padding-left: 12px;
    font-size: 1.4em;
}

.gallery-container .descr-text-bottom p{
    text-align: left;
    font-size: 1em;
}

.project-descr-top{
    border-bottom: #BBC8D0 solid 1px;
    margin: 0 -5%;
    padding: 0 5%;
}

.ribbon-text-dec img{
    width: 86%;
    display: block;
    margin: 0 auto;
    margin-top: -46px;
    position: relative;
    z-index: 0;
}

.gallery-container .ribbon-text-dec p{
    margin-top: 0;
    font-size: 1.3em;
    color: #fff;
    font-weight: 100;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}


.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}


/* Sorry for the placement.  If this goes somewhere else, feel free to move it. */
.code-history-item.current {
    border: 1px solid black;
}

.code-history-item.future {
    background-color: #ddd;
}

#media-library {
	margin-top: 1em;
}


action {
    color: #b700ff;
    font-weight: 700;
    font-size: 1.15em;
}

vocabulary {
    font-weight: 700;
}

code {
   font-family: monospace;
   color: #f00;
}

.hint-btn{
    font-weight: 700;
    cursor: pointer;
    color: #9469A0;
}

.vc-pagination {
    margin-bottom: 40px;
    margin-top: 30px;
    overflow: auto;
}

.vc-pagination a {
    color: #441B4B;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    margin: 0 15px;
}

.pagination-next {
    float: right;
}

.circle-featured-projects{
}

.btn-circle.btn-xl{
    width: 70px;
    height: 70px;
    padding: 10px 12px 21px 15px;
    font-size: 41px;
    line-height: 1.33;
    border-radius: 35px;
    text-align: center;
    transform: rotate(15deg);
    background-color: #35B2E2!important;
    border-color: #2a82a5;
    position: absolute;
    right: 0;
    top: 5px;
}

.snapchat-like-btn-container .checked-heart-btn .glyphicon-heart:before {
    content: "voted";
    font-family: 'Open Sans';
}

.snapchat-like-btn-container .heart-btn {
    margin-left: 30px;
    border-radius: 2px;
    padding: 4px 10px 7px;
}

.snapchat-like-btn-container .unchecked-heart-btn{
    background-color: #9A57A2;
    color: #fff;
}

.snapchat-like-btn-container .unchecked-heart-btn .glyphicon-heart:before {
    content: "vote!";
    font-family: 'Open Sans';
}

.snapchat-like-btn-container .like-count, .snapchat-like-btn-container .like-label{
    font-family: 'Open Sans';
}

.gallery .controls {
    font-size: 1.1em;
    margin-top: 6px;
}

.gallery .thumbnail-holder {
    position: relative;
    height: 13vw;
    overflow: hidden;
}

.gallery .thumbnail-holder a img {
    width: 100%;
}

.vid-descr .gallery-label {
    display: inline-block;
    width: 100%;
}

.vid-descr {
    padding: 8px 8px 10px;
}

.vid-descr .title {
    font-size: 1.15em;
}

.gallery .vid-descr .description {
    height: 2rem;
}


/* this undoes the effects of the .gallery selectors earlier in this file.
a refactoring of styles will resolve this */
.gallery-new {
    background-color: initial;
    padding-bottom: 0;
    width: 100%;
}

.gallery-new .title {
    margin: 4px 0 0;
}

@media only screen and (max-width: 786px) {
    .gallery-new .thumbnail-holder {
        height: auto;
        padding-top: 0;
    }

    .gallery-new .thumbnail-holder a {
        position: static;
        transform: none;
    }

    .gallery-new .thumbnail-holder a img {
        position: relative;
        left: unset;
        top: unset;
        transform: none;
    }

    .gallery-new .vid-descr {
        overflow: auto;
    }

}

.main-btn-courses {
    background: #47A3FF;
    border: none;
    border-radius: 2px;
    color: #FFFFFF;
    font-size: 15px;
    padding: 14px 5px;
    white-space: initial;
}

.main-vidcode-logo img{
    margin-top: 5px;
}

/* This styles the header according to new styles*/
.btn-primary {
    background-color: #6A00F5;
    padding: 6px 10px;
    border-radius: 2px;
}
.shadow {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}

#header {
     background-color: #fff;
     border-bottom: 3px solid #7e79c4;
     padding-top: 4px;
}
#header .btn-primary {
    border-radius: 35px;
    margin-left: 17px;
    padding: 10px 28px;
}
.btn-primary:hover {
    background-color: #A300FB !important;
}

 #header a {
     color: #4f376d;
}
 #header a:hover {
     color: #36264b;
}
 #header .header-btn {
     background-color: #47a3ff;
     border-radius: 5px;
     display: inline-block;
     margin-top: 5px;
}
 #header .header-btn a {
     color: #fff;
     display: inline-block;
     font-size: 1em;
     padding: 6px 10px;
     text-decoration: none;
}
 #header .header-btn a:hover {
     color: #fff;
}
 #header .header-btn:hover {
     background-color: #3276b1;
}
 #header li a, #header li.open a {
     border-width: 0 0 4px;
     font-size: 0.88em;
     font-weight: 600;
}
 #header li a:focus, #header li.open a:focus, #header li a:hover, #header li.open a:hover {
     background-color: transparent;
     border-color: transparent;
     text-decoration: underline;
}
 #header li a:focus, #header li.open a:focus {
     outline: none;
}
 #header li a.btn, #header li.open a.btn {
     color: white;
     border: unset;
     border-radius: 5px;
}
 #header li a.btn:hover, #header li.open a.btn:hover {
     background-color: #0089a4;
     text-decoration: none;
}
 #header li .dropdown-menu li a, #header li.open .dropdown-menu li a {
     border-left-style: solid;
     border-left-width: 4px;
     border-left-color: transparent;
}
 #header li .dropdown-menu li a:focus, #header li.open .dropdown-menu li a:focus {
     border-left-color: #4f376d;
}
 #header .main-vidcode-logo {
     display: inline-block;
     padding: 4px 15px 4px 0;
}
 #header .main-vidcode-logo img {
     width: 145px;
}

 #header .main-vidcode-logo #snap-logo {
    width: 70px;
 }

 #header .nav-tabs {
     border-bottom: none;
}
 #header .open > a, #header .open > a:hover, #header .open > a:focus {
     border-color: transparent;
}
 @media screen and (max-width: 576px) {
     #header .main-vidcode-logo #image {
         max-width: 100px;
    }
}