@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;
}