@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);

body {
	font-family: 'Lato';
	background-color: #f0f0f0;
	margin: 0px auto;
	max-width: 1150px;
  padding: 5%;
  padding: 7%;
  margin-left: 0px;
}

#overlay {
	position: absolute;
	top: 0px;
	left: 0px;
	-o-transform : scaleX(-1);
	-webkit-transform : scaleX(-1);
	transform : scaleX(-1);
	-ms-filter : fliph; /*IE*/
	filter : fliph; /*IE*/

	width : 600px;
	height : 450px;
}

#videoel {
	-o-transform : scaleX(-1);
	-webkit-transform : scaleX(-1);
	transform : scaleX(-1);
	-ms-filter : fliph; /*IE*/
	filter : fliph; /*IE*/

	width : 600px;
	height : 450px;
}

#container {
	position : relative;
	width : 370px;
	/*margin : 0px auto;*/
}

#content {
	margin-top : 50px;
	margin-left : auto;
	margin-right : auto;
	max-width: 600px;
}

#sketch, #filter {
	display: none;
}

h2 {
	font-weight : 400;
}

.btn {
	font-family: 'Lato';
	font-size: 16px;
}

#controls {
	text-align : center;
}

#emotion_container {
	width: 600px;
}

#emotion_icons {
	height: 50px;
	padding-left: 40px;
}

.emotion_icon {
	width : 40px;
	height : 40px;
	margin-top: 5px;
	/*margin-left : 13px;*/
	margin-left : 35px;
}

#emotion_chart, #emotion_icons {
	margin: 0 auto;
	width : 400px;
}

#icon1, #icon2, #icon3, #icon4, #icon5, #icon6 {
	visibility : hidden;
}

/* d3 */
.bar {
	fill : steelblue;
	fill-opacity : .9;
}

/* responsive */
@media (max-width: 766px, max-length:766px) {
  body { padding-top: 140px; }
}

.marker {
    border-style:solid;
    border-width: thin;
}

.col-centered{
    text-align: center;
    float: none;
    margin: 0 auto;
}

.col-sm-offset{
  padding:0;
}

#wrapper .text{

visibility: hidden;
}

#wrapper:hover .text{

  color: white;
visibility:visible;
}

.task-item{
	width: 25px;
}

.btn-danger{
	color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
	width: '20px';
	height: '20px';
	display: inline-block;
    /* padding: 6px 12px; */
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}