@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src:
		local('Roboto'),
		local('Roboto-Regular'),
		url('../assets/fonts/Roboto_400.eot?#iefix') format('embedded-opentype'),
		url('../assets/fonts/Roboto_400.woff') format('woff'),
		url('../assets/fonts/Roboto_400.woff2') format('woff2'),
		url('../assets/fonts/Roboto_400.svg#Roboto') format('svg'),
		url('../assets/fonts/Roboto_400.ttf') format('truetype');
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	src:
		local('Lato Regular'),
		local('Lato-Regular'),
		url('../assets/fonts/Lato_400.eot?#iefix') format('embedded-opentype'),
		url('../assets/fonts/Lato_400.woff') format('woff'),
		url('../assets/fonts/Lato_400.woff2') format('woff2'),
		url('../assets/fonts/Lato_400.svg#Lato') format('svg'),
		url('../assets/fonts/Lato_400.ttf') format('truetype');
}

html {
  position: relative;
  min-height: 100%;
  scroll-padding-top: 70px;
}

.kickstarter {
	position:fixed;
	bottom:0px;
	right:40px;

}
.kickstarter #close {
	background: none;
	position:absolute;
	bottom:0px;
	width:40px;
	height:40px;
	left:280px;
	z-index:10;
}

body {
	padding-top: 70px;
	font-family: Roboto;
	color:#333;
	min-height: 100%;
}

div.content {min-height:54vh}

pre, textarea {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
	min-height:3em;
	margin-top:10px;
	padding:1em 1em;
}
textarea {
	width:100%;
	display: block;
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.42857143;
	color: #333;
	/*word-break: break-all;*/
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
}

a {color:green;}
a:hover {color:darkgreen}
.row a {text-decoration:underline}
a.btn {text-decoration:none}
p {margin-bottom:20px}
h1,h2,h3,h4 {margin-bottom:20px;line-height:1.4em;}

.btn-primary { background:green; }
.btn-primary:hover, .btn-primary:active {background:darkgreen}

.btn-run {background:#333;color:white;box-shadow: 5px 3px 6px rgba(0,0,0,0.75);}
.btn-run:hover, .btn-run:active {background:#fff;color:#222}

.index-run {width:100%;margin-top:50px;text-align:center;}

.nav > li > a {
  padding: 15px 12px;
}

.navbar input.form-control {
	background:none;
	opacity:0.9;
}
.navbar input.form-control:focus {
  color:black;
}

.inclass {
  color: green !important;
  margin-top: -5px;
}
.navbar .inclass:hover {
  color: gray !important;
}

input.form-control:focus, textarea.form-control:focus, .news-input:focus {
    border:1px solid green;
    box-shadow: none;
}

.navbar .search {margin-left:40px;margin-top:3px}
.navbar .search-results {margin-left:15px;min-width:200px;}
.navbar .search-results a {color:green}
.navbar .search-results a:hover {color:darkgreen;background:none}
.navbar .search-results span {margin-left:15px;}

.navbar .input-group {width:200px;}

* {
  box-sizing: border-box;
}

.slider {
	width: 100%;
	margin: 15px auto;
}

.slick-slide {
  margin: 0px 20px;
  overflow:hidden;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
	color: green;
}

.mini-carousel {
	border: 1px solid #eee;
	border-radius: 4px;
	/*box-shadow: 1px 1px rgba(0,0,0,0.15);*/
}

.mini-carousel .title {width:100%}

.mini-carousel .title-text {
	padding-left:20px;
	font-size:1.7em;
	text-transform:none;
}

.mini-carousel .show-all {
	padding-right:20px;
	float:right;
}

.mini-carousel img.thumbnail {
    margin-bottom: 5px;
}

.jumbotron.mini-carousel {padding-top:10px;padding-bottom:10px}

.mini-carousel .project.empty .thumbnail {
    display: none;
    margin-bottom: 5px;
}

.mini-carousel .project.empty .name {
    display: inline-block;
    border: 2px dashed #dddddd;
    border-radius: 5px;
    height: 120px;
    width: 160px;
}

.mini-carousel .project.empty .author {
    display: none;
}

.big-carousel {
	margin-bottom:20px;
}

.big-carousel .slick-prev:before,
.big-carousel .slick-next:before {
	color: black;
}

mini-carousel

.mini-arousel .project {
	display:none;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  border-radius: 4px;
  margin-bottom: 20px;
  margin-top:30px;
  margin-left:0px;
  margin-right:0px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
border-radius: 4px;
  height: 300px;
  background-color: #fff;
}


.carousel-inner > .item > img {

  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
}

.carousel-inner {
  /* make sure your .items will get correct height */
  height: 100%;
}

.item {
  background-size: cover;
  background-position: 50% 50%;
  width: 100%;
  height: 100%;
}

.carousel h2 {font-size:1.7em;line-height:1.4bem;}
.carousel-caption a {color:white;text-decoration:underline}
.carousel-caption {}
.carousel-indicators {bottom:10px;}


/* bootstrap overrides */
.jumbotron {
  background-color: transparent;
}

.footer {
  /*position:absolute;
  bottom: 0px;*/
  width: 100%;
  margin-top:80px;
  padding:40px 0px 40px 0px;
  line-height:1.7em;
  background-color: #f5f5f5;

}

.navbar {border-bottom:1px dotted #666;}
.navbar-right a {text-transform:uppercase}
.navbar-right a.username {text-transform:none}

/*.navbar-nav > li > a  {padding: 10px 15px;}*/
.navbar-brand { padding:10px 8px;height:20px}
/*.navbar-collapse {padding:0px 15px;margin-top:0px;}*/


.big-thumbnail img, .small-thumbnail img{
	border: 1px solid #eee;
	border-radius: 4px;
	box-shadow: 1px 1px rgba(0,0,0,0.15);
}

.big-thumbnail div.fileinput {margin-top:10px}

.notes {margin: 30px 0px 30px 0px}
.notes pre {min-height:5em}
.notes pre.publ {font-family: Roboto;border:0;background:none;padding:0}
.notes .content {min-height:50px}
.notes .inplace {margin-bottom:30px;background:#f9f9f9;padding:5px; border: 1px dashed #ccc}

.about .inplace {margin-bottom:30px;background:#f9f9f9;padding:5px; border: 1px dashed #ccc}
.location .inplace {margin-bottom:30px;background:#f9f9f9;padding:5px; border: 1px dashed #ccc}

#taglinks a, #catlinks a { padding-right:10px}
#taglinks, #catlinks { padding-left:30px}


.updatebutton {float:right;margin-top:-30px}

.myprojects .browser {min-height:300px}
.myprojects .search {width:90%}
.myprojects .search:focus {color:#000}

/* Project Browser */

.browser {
    padding: 15px;
    padding-bottom:25px;
    margin:0px;
    margin-bottom: 1em;
	border: 1px solid #eee;
	border-radius: 4px;
	box-shadow: 1px 1px rgba(0,0,0,0.15);
}

.browser .search input {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.5em;
    border: 1px solid #dfdedd;
    border-radius: 5px;
    padding: 0.25em 1em;
    margin-bottom: 1em;
}

.browser .project-list {
    margin: 1em 0;
    height: 20em;
    overflow-y: scroll;
    overflow-x: hidden;
}

.browser .project-item bv{
    padding: 0.1em 0 0.1em 0.5em;
    margin-right: 0.5em;
    line-height: 1.5em;
    border: 2px solid transparent;
}

.browser .project-item:hover {
    border: 2px dashed #eaebeb;
}

.browser .project-item.selected {
    background-color: #eaebeb;
}

.browser .project-item .yes {
    color: #008000;
}

.browser .project-item .no {
    color: #CE0F0F;
}

.browser .bottom-controls .pure-button {
    width: 90%;
}

.browser .big-thumbnail {
    margin-top: 4em;
	border: 1px solid #eee;
	border-radius: 4px;
	box-shadow: 1px 1px rgba(0,0,0,0.15);
}

.project-views {color:#999;font-size:0.9em;font-style: italic}

#likes {font-size:1.5em;float:left}
.liked {color:green;}
.liker-dropdown {float:left}
.liker-dropdown-menu {padding-left:10px,}
.liker-dropdown-menu a { text-decoration:none;color:green}

/* custom additions */
.run {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	display: flex;
    justify-content: center;
    align-items: center;
}

.run iframe {height:100%;width:100%;border:0;padding-top:55px}
.gravatar {margin-right:10px}
.spacer {height:20px}
.cell {padding:10px;}
.dlink a {text-decoration:underline}
.bmargin {margin-bottom:30px}


img.fluid {
    width:100%;margin:5px 0px 10px 0px;
    /* box-shadow: 10px 6px 12px rgba(0,0,0,0.35); */
}

.flash {
    animation: flasher 1s linear;
}

@keyframes flasher {
    0% { background: #eaebeb; }
    50% { opacity: 0.0; }
    100% {
        background: auto;
        opacity: 1;
    }
}

.flash {
    animation: flasher 1s linear;
}

.alternate.empty {
	border: 2px dashed #dddddd;
    border-radius: 5px;
}


.clickable {
    cursor: pointer;
}

.loading {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	display: flex;
    justify-content: center;
    align-items: center;

}

.social a {
	text-decoration:none
}

.betalink {
	font-size: .8em;
	margin-left:20px;
	color:#a0a0a0;
}

#user-grid .user-grid-item {
  padding-bottom: 1em;
}
.user-grid-item {
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-word;
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.comment-item { margin: 15px 0px; padding: 15px 0px 5px 0px; border-top:1px solid #eee}
.comment-item { margin-bottom:20px }
.comment-item p { margin-bottom:5px;padding:5px 0px;  white-space: pre-wrap;}
.comment-item .author { font-size:0.8em; font-weight: bold; color:black}
.comment-item .author a { color:black}
.comment-item .date {color: #ddd; font-size:0.7em;}


.remixedfrom  { margin-bottom: 50px }
.remixedfrom .row { margin-left: 0px }
.remixedfrom .item { margin-bottom:10px }

.remixedfrom .small-thumbnail a { padding-left: 5px }
.remixedfrom h5 { font-size:1.3em; margin-bottom:5px}


.campaign-feature-form {
	position:relative;top:-80px;
}

.myclassrooms li { padding-bottom: 10px; padding-left: 10px }
.myclassrooms li .title { font-size: 1.2em }
.myclassrooms ul { padding-left: 20px}



.light {color:#aaa}

h3 a::before {
  display: block;
  content: " ";
  margin-top: -120px;
  height: 120px;
  visibility: hidden;
  pointer-events: none;
}

a h3::before {
  dis  <div class="col-12">play: block;
  content: " ";
  margin-top: -120px;
  height: 120px;
  visibility: hidden;
  pointer-events: none;
}

.tweets { display: flex; margin:40px 0px 10px 0px; font-size:0.8em;}
.tweets div {width:33%; margin-right:5px;}
.tweets iframe { border:0; width: 100%; height:auto; transform(scale:0.5); overflow:hidden; height:500px}
.moretweets { width: 100%; padding-right:20px;text-align:right; margin-bottom:40px}

.myclassrooms ul {
    padding: 0px;
}
.myclassrooms li {
  list-style-type: none;
  padding-left: 5px;
  border-bottom: 1px solid #c0c0c0;
  margin-bottom: 10px;
}
.myclassrooms .classdate { color:#777; font-size: 0.8em}

.removeproject {
  background:white; border: 1px solid red; color:red; border-radius: 20px; font-size: 1.3em;
  margin:0px;padding-top:0px;padding-bottom:0px; padding-left: 0.6em; padding-right:0.6em;
    position:absolute; right:0; top:-10px
}
.removeuser {
  background:white; border: 1px solid red; color:red; border-radius: 20px; font-size: 1.3em;
  margin:0px;padding-top:0px;padding-bottom:0px; padding-left: 0.6em; padding-right:0.6em;
  position:absolute; right:25%; top:-16px
}

.editbox {
  border: 1px solid #c0c0c0;
  border-radius: 6px;
  padding: 20px
}

.boxxed {
  border: 1px solid #c0c0c0;
  border-radius: 6px;
  padding: 0px 20px
}

.unittitle {
  border-bottom: 1px solid black;
  margin-bottom: 1em;
}
.unittitle h1 {   margin-bottom: 0px; cursor: pointer; margin-top:0px}
.unit { margin-bottom: 10px;}
.unit .unitprojects h1 { font-size: 1.6em}
.unitbody { display:none;}
.unit_desc { margin-bottom: 5px;}
.unitprojects { margin-bottom: 40px }
.unitprojects .projects { margin-bottom: 40px }

.members { background: #e0e0e0; padding: 15px 10px 15px 10px; border-bottom: 1px solid #c0c0c0}

@media(max-width:768px) {
	.navbar ul { margin-right:0}
	.navbar .search {margin-left:15px}
	.navbar .search-results {margin-left:0}
	.navbar-collapse{ max-height:520px !important}
	h1 {font-size:1.8em }
	h2 {font-size:1.6em }
	h3 {font-size:1.4em }
	h4 {font-size:1.2em }
	.slider {
		width: 90%;
		margin: 15px auto;
	}
	.campaign-feature-form {
		position:relative;top:0px;
		margin-top:0px;
	}
	.award {display:none}
}

.sending, .senderror {width:100%;text-align:center;}
.senderror {color:red}
.brandtext {padding-left:10px}
.donover {transform: rotate(-10deg);width:200px;position:relative;top:-40px;right:-50px;float:right}


@media (min-width:768px){
  .brandtext {display:none}
}

@media(max-width:1024px) {
	.navbar ul { margin-right:0}
	.navbar .search {margin-left:0px;}
	.navbar .search-results {margin-left:0}
	.navbar .input-group {width:150px;}
}

@media (min-width:1200px){
    .auto-clear .col-lg-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-lg-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-lg-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-lg-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-lg-6:nth-child(odd){clear:left;}
}
@media (min-width:992px) and (max-width:1199px){
    .auto-clear .col-md-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-md-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-md-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-md-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-md-6:nth-child(odd){clear:left;}
}
@media (min-width:768px) and (max-width:991px){
    .auto-clear .col-sm-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-sm-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-sm-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-sm-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-sm-6:nth-child(odd){clear:left;}
}
@media (max-width:767px){
    .auto-clear .col-xs-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-xs-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-xs-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-xs-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-xs-6:nth-child(odd){clear:left;}
    .donover { right:-10px; top:-30px }
}

@media (max-width:992px) {
  #tweets div {width:50%;}
  .tweets div:nth-child(3){display:none}
}

@media (max-width:461px) {
  #tweets div {width:100%;}
  .tweets div:nth-child(2){display:none}
}