/*
Son todos aquellos elemntos propios de Daily Expressions.
Para realizar los bocadillos, manos, profesor...

1. Ballons
	1.1 Peak

2. Teacher
	2.1 Teacher

3. Paper
	3.1 hole paper

4. Hand Clock
	4.1 Hand clock
	4.2 Clock

5. Hand Up
	5.1 Hand Up

6. Hand Ok and bad
	6.1 Hand ok
	6.2 Hand bad

7. Star
	7.1 star

8. hand_answer 
	8.1 hand_answer 

9. bulb
	9.1 bulb
	
*/


/* 1. Ballons */

/* 1.1 Peak */
.beack{
	max-width: 207px;
	max-height: 140px;
	width: 100%;
	height: 0;
    padding-bottom: 67.6%;

	background-size: 100%;
	background-repeat: no-repeat;
}

.beack.green{
	background-image: url(img/beack_green.png);
}


/* 2. Teacher */

/* 2.1 Teacher */
.teacher{
	max-width: 354px;
	max-height: 407px;
	width: 100%;
	height: 0;
    padding-bottom: 115%;

	background-image: url(img/teacher.png);
	background-size: 100%;
	background-repeat: no-repeat;
}

/* 3. Paper */

/* 3.1 Hole paper */
.hole_paper{
	width: 100%;
	padding-bottom: 7.3%;

	background-image: url(img/paper_hole.png);
	background-repeat: repeat-x;
	background-size: 7.3%;
}

.hole_paper.bottom{
	width: 100%;
	padding-bottom: 7.3%;

	background-image: url(img/paper_hole_bottom.png);
	background-repeat: repeat-x;
	background-size: 7.3%;
}

/* 4. Hand Clock */

/*4.1 Hand clock*/
	
.hand_clock{
	position: absolute;

	max-width: 139px;
	max-height: 368px;
	width: 100%;
	height: 0;
    padding-bottom: 263.7%;

    background-image:url(img/hand_clock.png);
	background-size: 100%;
	background-repeat: no-repeat;

	font-family: 'anonymous', arial;
}

/* 4.2 Clock */
.hand_clock .clock{
	position: absolute;
	top: 50.3%;
	left: 41.5%;
	width: 21%;
	height: 8.5%;
	background-color: #fff;
	text-align: center;
}

.hand_clock .clock{
	font-size: 0.15em;
}

.hand_clock .clock .time{
	font-size: 2em;
}
.hand_clock .clock .seg{
	font-size: 3.8em;
}

/* 5. Hand Up */

/* 5.1 Hand Up */
.hand_up{
	position: absolute;

	max-width: 232px;
	max-height: 608px;
	width: 100%;
	height: 0;
    padding-bottom: 261.7%;

    background-image:url(img/hand_up.png);
	background-size: 100%;
	background-repeat: no-repeat;

	font-family: 'anonymous', arial;
}


/* 6. Hand Ok */
/* 6.1 Hand ok */

.hand_ok{
	position: relative;

	max-width: 1187px;
	max-height: 652px;
	width: 100%;
	height: 0;
    padding-bottom: 54.9%;

    background-image:url(img/hand_ok.png);
	background-size: 100%;
	background-repeat: no-repeat;

	font-family: 'anonymous', arial;
}


.hand_ok .clock{
	position: absolute;
	top: 54.3%;
	left: 40%;
	width: 12%;
	height: 14%;
	background-color: #fff;
	text-align: center;
}

.hand_ok .clock .time{
	font-size: 2em;
}
.hand_ok .clock .seg{
	font-size: 3.8em;
	line-height: 0.7em;
}

/* 6.2 Hand bad */
.hand_ok.bad{
	background-image:url(img/hand_bad.png);
}
.hand_ok.bad .clock{
	top: 31.3%;
}


/* 7. Star */
/* 7.1 star */
.star{
	position: relative;

	width: 100%;
	height: 0;
    padding-bottom: 100%;

	background-size: 100%;
	background-repeat: no-repeat;
}
.star.orange{
    background-image:url(img/star.png);
}

/* 8. hand_answer */
/* 8.1 hand_answer */
.hand_answer{
	position: absolute;

	max-width: 232px;
	max-height: 608px;
	width: 100%;
	height: 0;
    padding-bottom: 100%;

    background-image:url(img/hand_pencil_answer.png);
	background-size: 100%;
	background-repeat: no-repeat;

	font-family: 'anonymous', arial;
}

.wp_hand_answer{
	position: absolute;
	right: -10%;
	width: 65%;
	top: 8%;
}

.modal_layer_hand{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0%;
	left: 0%;
	background-color: #fff;
	opacity: 0.8;
}

.hand_answer .clock{
	position: absolute;
	top: 67%;
	left: 46.5%;
	width: 12%;
	height: 9%;
	background-color: #fff;
	text-align: center;
	font-size: 0.8em;
}

.hand_answer .clock .time{
	font-size: 2em;
}
.hand_answer .clock .seg{
	font-size: 3.6em;
	line-height: 0.6em;
}

/* 9. bulb */
/* 9.1 bulb */
.bulb{
	position: relative;

	width: 100%;
	height: 0;
    padding-bottom: 371.4%;

    background-image:url(img/thinking.png);
	background-size: 100%;
	background-repeat: no-repeat;
}

.circle_bulb{
	background-color: rgb(255, 184, 0);
	width: 162%;
	padding-bottom: 162%;
	border-radius: 50%;
	position: absolute;
	bottom: -12%;
	right: -31%;
	opacity: 0.8;
}

@keyframes bulb_go
{
0%   { opacity: 0.4}
15% {  opacity: 0.8}
25% {  opacity: 0.8}
100% {  opacity: 0.4}
}

@-webkit-keyframes bulb_go /* Safari and Chrome */
{
0%   { opacity: 0.4}
15% {  opacity: 0.8}
25% {  opacity: 0.8}
100% {  opacity: 0.4}
}

@-moz-keyframes bulb_go /* Safari and Chrome */
{
0%   { opacity: 0.4}
15% {  opacity: 0.8}
25% {  opacity: 0.8}
100% {  opacity: 0.4}
}