Ajax Loader
HTML
<!DOCTYPE HTML>
1
<!DOCTYPE HTML>
2
<HTML>
3
 
4
  <head>
5
 
6
  <title>Minions CSS</title>
7
 
8
  <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
9
 
10
  </head>
11
 
12
 
13
 
14
 
15
  <body>
16
 
17
    
18
 
19
    <div class="container">
20
 
21
        <h1>Minions in Pure CSS</h1>
22
        <h6>By <a href="www.amrzek.com">Amr Zakaria</a></h6>
23
 
24
      <div class="bill">
25
 
26
        <div class="lights">
27
          <span class="white_light"></span>
28
          <span class="dark_light"></span>
29
        </div>
30
        <div class="hair">
31
          <span class="hair1"></span>
32
          <span class="hair1 make_it_left_hair1"></span>
33
          <span class="hair2"></span>
34
        </div>
35
 
36
        <div class="eyes">
37
          <div class="eye_animate"></div>
38
 
39
          <div class="glasses"></div>
40
            <div class="white_part">
41
              <div class="brown_eye">
42
                <span class="black_part"></span>
43
              </div>
44
            </div>
45
        </div>
46
 
47
        <div class="black_tie">
48
          <span class="right_tie">
49
            <div class="top_tie"></div>
50
            <div class="down_tie"></div>
51
          </span>
52
          <span class="left_tie">
53
            <div class="top_tie"></div>
54
            <div class="down_tie"></div>
55
          </span>
56
        </div>
57
 
58
        <div class="smile"></div>
59
 
60
        <div class="arm"></div>
61
        <div class="hand"><span class="hand_parts"><span></div>
62
 
63
        <div class="arm make_it_right_arm"></div>
64
        <div class="hand make_it_right_hand"><span class="hand_parts"><span></div>
65
 
66
        <div class="curves">
67
          <span class="curve1"></span>
68
          <span class="curve1 make_it_left_curve"></span>
69
          <span class="curve2"></span>
70
        </div>
71
 
72
        <div class="clothes">
73
          <div class="main"></div>
74
          <div class="blue_borders"></div>
75
          <div class="right_shirt"></div>
76
          <div class="right_shirt make_it_left"></div>
77
          <div class="bottom"></div>
78
        </div>
79
 
80
        <div class="pocket">
81
          <div class="logo"></div>
82
          <span class="lines"></span>
83
        </div>
84
 
85
        <div class="legs">
86
          <div class="right_leg"></div>
87
          <div class="right_leg make_it_left_leg"></div>
88
          <div class="shoes"><span class="small_shoes"></span></div>
89
          <div class="shoes make_it_left_shoes"><span class="small_shoes"></span></div>
90
        </div>
91
 
92
        <h2>Bill</h2>
93
      </div>
94
 
95
 
96
 
97
 
98
 
99
      <div class="jerry">
100
 
101
        <div class="lights">
102
          <span class="white_light"></span>
103
          <span class="dark_light"></span>
104
        </div>
105
        <div class="jerry_hair">
106
          <ul>
107
          <li class="h1"></li>
108
          <li class="h2"></li>
109
          <li class="h3"></li>
110
          <li class="h4"></li>
111
          <li class="h5"></li>
112
          <li class="h6"></li>
113
          <li class="h7"></li>
114
          <li class="h8"></li>
115
          <li class="h9"></li>
116
          <li class="h10"></li>
117
          <li class="h11"></li>
118
          <li class="h12"></li>
119
          </ul>
120
        </div>
121
 
122
        <div class="eyes1">
123
          <div class="eye_animate"></div>
124
 
125
          <div class="glasses"></div>
126
            <div class="white_part">
127
              <div class="brown_eye">
128
                <span class="black_part"></span>
129
              </div>
130
            </div>
131
        </div>
132
 
133
        <div class="eyes2">
134
          <div class="eye_animate"></div>
135
 
136
          <div class="glasses"></div>
137
            <div class="white_part">
138
              <div class="brown_eye">
139
                <span class="black_part"></span>
140
              </div>
141
            </div>
142
        </div>
143
 
144
        <div class="jerry_hand">
145
          <div class="jerry_lh"></div>
146
          <div class="animated_lh">
147
            <span class="gloves_lh"></span>
148
            <span class="gloves_lh2"></span>
149
          </div>
150
 
151
          <div class="jerry_rh"></div>
152
          <span class="gloves_rh"></span>
153
        </div>
154
 
155
        <div class="black_tie">
156
          <span class="right_tie">
157
            <div class="top_tie"></div>
158
            <div class="down_tie"></div>
159
          </span>
160
          <span class="left_tie">
161
            <div class="top_tie"></div>
162
            <div class="down_tie"></div>
163
          </span>
164
        </div>
165
 
166
        <div class="jerry_smile">
167
          <span class="teeth1"></span>
168
          <span class="teeth2"></span>
169
        </div>
170
 
171
        <div class="curves">
172
          <span class="jerry_curve1"></span>
173
          <span class="jerry_curve1 jerry_left_curve"></span>
174
          <span class="jerry_curve2"></span>
175
        </div>
176
 
177
        <div class="clothes">
178
          <div class="main_jerry"></div>
179
          <div class="right_shirt jerry_right_shirt"></div>
180
          <div class="right_shirt jerry_left_shirt"></div>
181
          <div class="jerry_bottom"></div>
182
        </div>
183
 
184
        <div class="pocket">
185
          <div class="logo"></div>
186
          <span class="lines"></span>
187
        </div>
188
 
189
        <div class="legs">
190
          <div class="jerry_shoes"><span class="jerry_small_shoes"></span></div>
191
          <div class="jerry_shoes jerry_left_shoes"><span class="jerry_small_shoes"></span></div>
192
        </div>
193
 
194
        <h2>Jerry</h2>
195
 
196
 
197
      </div>
198
 
199
 
200
      <div class="evil">
201
 
202
        <ul class="evil_hair">
203
          <li class="eh1"></li>
204
          <li class="eh2"></li>
205
          <li class="eh3"></li>
206
          <li class="eh4"></li>
207
          <li class="eh5"></li>
208
        </ul>
209
 
210
        <div class="eyes">
211
          <div class="eye_animate"></div>
212
 
213
          <div class="glasses"></div>
214
            <div class="white_part">
215
              <div class="brown_eye">
216
                <span class="black_part"></span>
217
              </div>
218
            </div>
219
        </div>
220
 
221
        <div class="black_tie">
222
          <span class="right_tie">
223
            <div class="top_tie"></div>
224
            <div class="down_tie"></div>
225
          </span>
226
          <span class="left_tie">
227
            <div class="top_tie"></div>
228
            <div class="down_tie"></div>
229
          </span>
230
        </div>
231
 
232
        <div class="evil_mouth">
233
          <span class="evil_teeth"></span>
234
          <span class="evil_teeth1"></span>
235
        </div>
236
 
237
        <div class="clothes">
238
          <div class="right_shirt evil_right_shirt"></div>
239
          <div class="right_shirt evil_left_shirt"></div>
240
          <div class="evil_bottom"></div>
241
          <div class="evil_logo"><p>M</p></div>
242
        </div>
243
 
244
        <div class="legs">
245
          <div class="evil_right_leg"></div>
246
          <div class="evil_right_leg evil_left_leg"></div>
247
          <div class="shoes evil_right_shoes"><span class="small_shoes"></span></div>
248
          <div class="shoes evil_left_shoes"><span class="small_shoes"></span></div>
249
        </div>
250
 
251
 
252
        <div class="evil_hand">
253
          <div class="evil_rh">
254
            <span class="evil_gloves_rh"></span>
255
          </div>
256
          <div class="evil_lh">
257
            <span class="evil_gloves_lh"></span>
258
          </div>
259
        </div>
260
 
261
        <h2>Evil</h2>
262
 
263
      </div>
264
 
265
 
266
    </div>
267
 
268
  </body>
269
 
270
</HTML>
271
 
 
CSS
* { margin: 0; padding: 0;}
1
* { margin: 0; padding: 0;}
2
 
3
body {
4
  position: relative;}
5
 
6
.container {width: 970px;margin: 0 auto;padding-top: 70px;transition: ease 0.3s all;
7
-webkit-transition: ease 0.3s all;}
8
 
9
.container h1, h6 {text-align: center;color: #696969; font-family: tahoma;}
10
 
11
h6 {color:#BDBDBD; margin-bottom: 30px}
12
 
13
h6 a {text-decoration: none;color:#95A4B8;}
14
 
15
h6 a:hover {color:#6180A8;}
16
 
17
.bill {background: #f1cb48;
18
background: -moz-linear-gradient(left,  #f1cb48 0%, #f9d65c 24%, #f9d65c 48%, #e6bc3b 99%);
19
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f1cb48), color-stop(24%,#f9d65c), color-stop(48%,#f9d65c), color-stop(99%,#e6bc3b));
20
background: -webkit-linear-gradient(left,  #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
21
background: -o-linear-gradient(left,  #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
22
background: -ms-linear-gradient(left,  #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
23
background: linear-gradient(to right,  #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
24
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1cb48', endColorstr='#e6bc3b',GradientType=1 );
25
; width: 140px;height: 290px;
26
border-radius: 70px;
27
float: left;
28
margin-left: 30px;
29
position: relative;
30
transition: ease 0.3s all;
31
-webkit-transition: ease 0.3s all;
32
}
33
 
34
 
35
 
36
.bill *, .jerry *, .evil * {position: absolute; box-sizing:content-box;
37
    -moz-box-sizing:content-box;}
38
 
39
.glasses {background-color: rgba(0, 0, 0, 0);
40
border: #949699 solid 11px;
41
width: 57px;
42
height: 57px;
43
border-radius: 50%;
44
top: 30px;
45
left: 31px;
46
z-index: 99;}
47
 
48
.eye_animate { width: 57px;  
49
    height: 0px;  
50
    border-radius: 31%;
51
    background-color: #F9D65C;  
52
    top: 41px;  
53
    left: 42px;
54
    z-index: 9;
55
    animation: eyes_animation 1.5s ease 2s infinite;
56
    -o-animation: eyes_animation 1.5s ease 2s infinite;
57
    -moz-animation: eyes_animation 1.5s ease 2s infinite;
58
    -webkit-animation: eyes_animation 1.5s ease 2s infinite;
59
}
60
 
61
 
62
@-moz-keyframes eyes_animation
63
{
64
0%   {height:0px;}
65
15% {height:57px;}
66
30% {height:0px;}
67
100% {height:0px;}
68
}
69
 
70
@-webkit-keyframes eyes_animation
71
{
72
0%   {height:0px;}
73
15% {height:57px;}
74
30% {height:0px;}
75
100% {height:0px;}
76
}
77
 
78
@-o-keyframes eyes_animation
79
{
80
0%   {height:0px;}
81
15% {height:57px;}
82
30% {height:0px;}
83
100% {height:0px;}
84
}
85
 
86
@keyframes eyes_animation
87
{
88
0%   {height:0px;}
89
15% {height:57px;}
90
30% {height:0px;}
91
100% {height:0px;}
92
}
93
 
94
.yellow_part {width: 57px;
95
height: 57px;
96
background-color: #F9D65C;
97
top: 11px;
98
left: 11px;}
99
 
100
.white_part * {border-radius: 50%}
101
 
102
.white_part {width: 57px;
103
border-radius: 50%;
104
height: 48px;
105
background-color: #FFF;
106
top: 44px;
107
left: 42px;
108
box-shadow: 0 0 16px rgba(0, 0, 0, 0.3) inset;}
109
 
110
.brown_eye {background-color: #a87a51;width: 21px;
111
height: 21px;
112
top: 13px;
113
right: 18px;}
114
 
115
.black_part {background-color: black;width: 8px;
116
height: 8px;
117
top: 6px;
118
left: 6px;}
119
 
120
.black_part:after {background-color: #FFF;
121
width: 3px;
122
height: 3px;
123
left: 1px;
124
border-radius: 50%;
125
position: absolute;
126
content: '';
127
-webkit-filter: blur(1px);
128
-o-filter: blur(1px);
129
}
130
 
131
.black_part:before {background-color: #FFF;
132
width: 3px;
133
height: 3px;
134
left: 1px;
135
border-radius: 50%;
136
position: absolute;
137
content: '';
138
-webkit-filter: blur(1px);
139
-o-filter: blur(1px);
140
}
141
 
142
.black_tie {top: 61px;
143
right: 0px;}
144
 
145
.right_tie {-webkit-transform: rotate(2deg);
146
    -o-transform: rotate(2deg);
147
    -ms-transform: rotate(2deg);
148
    -moz-transform: rotate(2deg);
149
    transform: rotate(2deg)}
150
 
151
.right_tie * {right: -3px;}
152
 
153
.top_tie {background-color: #3E3E3C;
154
width: 28px;
155
height: 8px;
156
right: -2px;
157
border-top-right-radius: 6px;
158
border-bottom-right-radius: 2px;
159
border: 1px solid #30302E;
160
border-top-left-radius: 3px;}
161
 
162
.top_tie:after {background-color: #FFF;
163
width: 5px;
164
height: 10px;
165
right: 25px;
166
z-index: 9999;
167
position: absolute;
168
content: '';
169
border-radius: 36%;
170
border: 1px solid #30302E;
171
bottom: -1px;}
172
 
173
.down_tie {background-color: #3E3E3C;
174
width: 28px;
175
height: 8px;
176
right: -2px;
177
top: 9px;
178
border-top-right-radius: 2px;
179
border-bottom-right-radius: 6px;
180
border: 1px solid #30302E;
181
border-top-left-radius: 2px;}
182
 
183
.down_tie:after {background-color: #FFF;
184
width: 5px;
185
height: 10px;
186
right: 25px;
187
z-index: 9999;
188
position: absolute;
189
content: '';
190
border-radius: 36%;
191
border: 1px solid #30302E;
192
bottom: -2px;}
193
 
194
 
195
.left_tie {-webkit-transform: scaleX(-1) rotate(2deg);
196
  -moz-transform: scaleX(-1) rotate(2deg);
197
    -ms-transform: scaleX(-1) rotate(2deg);
198
    -o-transform: scaleX(-1) rotate(2deg);
199
    transform: scaleX(-1) rotate(2deg);
200
right: 116px;}
201
 
202
.left_tie * {left: -3px;}
203
 
204
 
205
.clothes .main {background-color: #35668F;
206
width: 80px;
207
height: 67px;
208
top: 193px;
209
left: 29px;
210
z-index: 99999;
211
border-left: 1px dotted #FFF;
212
border-right: 1px dotted #FFF;}
213
 
214
.clothes .main:before {content: '';
215
position: absolute;
216
background: #f1cb48;
217
background: -moz-linear-gradient(right, #F1CB48 -11%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 109%);
218
background: -webkit-gradient(linear, right top, left top, color-stop(-11%,#F1CB48), color-stop(24%,#F9D65C), color-stop(48%,#F9D65C), color-stop(109%,#E6BC3B));
219
background: -webkit-linear-gradient(left, #F1CB48 -11%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 109%);
220
background: -o-linear-gradient(right, #F1CB48 -11%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 109%);
221
background: -ms-linear-gradient(right, #F1CB48 -11%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 109%);
222
background: linear-gradient(to right, #F1CB48 -11%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 109%);
223
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1cb48', endColorstr='#e6bc3b',GradientType=1 );
224
width: 110px;
225
border-radius: 50%;
226
height: 57px;
227
left: -14px;
228
top: -49px;
229
}
230
 
231
.clothes .main:after {content: '';
232
position: absolute;
233
width: 100px;
234
background: #35668F;
235
background: -moz-radial-gradient(top, ellipse cover, #35668f 57%, #003e82 120%);
236
background: -webkit-gradient(radial, top center, 0px, top center, 100%, color-stop(57%,#35668f), color-stop(120%,#003e82));
237
background: -webkit-radial-gradient(top, ellipse cover, #35668F 57%,#003E82 120%);
238
background: -o-radial-gradient(top, ellipse cover, #35668f 57%,#003e82 120%);
239
background: -ms-radial-gradient(top, ellipse cover, #35668f 57%,#003e82 120%);
240
background: radial-gradient(ellipse at top, #35668F 57%,#003E82 120%);
241
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35668f', endColorstr='#003e82',GradientType=1 );
242
border-radius: 50%;
243
height: 30px;
244
left: -10px;
245
top: 73px;}
246
 
247
.right_shirt {background-color: #35668F;
248
width: 45px;
249
height: 10px;
250
top: 201px;
251
left: 96px;
252
border: 1px dotted #DDD;
253
-webkit-transform: rotate(-13deg);
254
-moz-transform: rotate(-13deg);
255
-ms-transform: rotate(-13deg);
256
-o-transform: rotate(-13deg);
257
transform: rotate(-13deg);
258
border-bottom-right-radius: 9px;
259
z-index: 99999;}
260
 
261
 
262
.right_shirt:before {background-color: #000;
263
height: 8px;
264
width: 8px;
265
left: 2px;
266
position: absolute;
267
content: '';
268
border-radius: 50%;
269
top: 1px;}
270
 
271
 
272
.right_shirt:after {background-color: #35668F;
273
height: 2px;
274
width: 2px;
275
left: 5px;
276
position: absolute;
277
content: '';
278
border-radius: 50%;
279
top: 4px;}
280
 
281
.make_it_left {left: -2px;
282
-webkit-transform: scaleX(-1) rotate(-13deg);
283
-moz-transform: scaleX(-1) rotate(-13deg);
284
-ms-transform: scaleX(-1) rotate(-13deg);
285
-o-transform: scaleX(-1) rotate(-13deg);
286
transform: scaleX(-1) rotate(-13deg);
287
}
288
 
289
.clothes {z-index: 9999;}
290
 
291
.clothes .bottom {width: 142px;
292
background: #35668F;
293
background: -moz-radial-gradient(top, ellipse cover, #35668f 61%, #003e82 100%);
294
background: -webkit-gradient(radial, top center, 0px, top center, 100%, color-stop(61%,#35668f), color-stop(100%,#003e82));
295
background: -webkit-radial-gradient(top, ellipse cover, #35668F 61%,#003E82 100%);
296
background: -o-radial-gradient(top, ellipse cover, #35668f 61%,#003e82 100%);
297
background: -ms-radial-gradient(top, ellipse cover, #35668f 61%,#003e82 100%);
298
background: radial-gradient(ellipse at top, #35668F 61%,#003E82 100%);
299
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35668f', endColorstr='#003e82',GradientType=1 );
300
filter: inherit;
301
height: 50px;
302
top: 240px;
303
left: -1px;
304
border-bottom-right-radius: 25px;
305
border-bottom-left-radius: 26px;}
306
 
307
.clothes .bottom:before {content: '';
308
position: absolute;
309
width: 140px;
310
border-radius: 50%;
311
height: 34px;
312
left: 0px;
313
top: -19px;
314
background: #f1cb48;
315
background: -moz-linear-gradient(right, #F1CB48 0%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 99%);
316
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#F1CB48), color-stop(24%,#F9D65C), color-stop(48%,#F9D65C), color-stop(99%,#E6BC3B));
317
background: linear-gradient(to right, #F1CB48 0%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 99%);
318
background: -o-linear-gradient(right, #F1CB48 0%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 99%);
319
background: -ms-linear-gradient(right, #F1CB48 0%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 99%);
320
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1cb48', endColorstr='#e6bc3b',GradientType=1 );
321
}
322
 
323
.smile {background-color: #000;
324
border-radius: 50%;
325
width: 79px;
326
height: 37px;
327
top: 114px;
328
z-index: 99999;
329
right: 31px;}
330
 
331
.smile:before {position: absolute;
332
content: '';
333
border-radius: 50%;
334
width: 100px;
335
height: 37px;
336
top: -3px;
337
right: -13px;
338
background: #f1cb48;
339
background: -moz-linear-gradient(right, #F1CB48 -40%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 109%);
340
background: -webkit-gradient(linear, right top, left top, color-stop(-40%,#F1CB48), color-stop(24%,#F9D65C), color-stop(48%,#F9D65C), color-stop(109%,#E6BC3B));
341
background: -webkit-linear-gradient(left, #F1CB48 -40%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 109%);
342
background: -o-linear-gradient(right, #F1CB48 -40%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 109%);
343
background: -ms-linear-gradient(right, #F1CB48 -40%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 109%);
344
background: linear-gradient(to right, #F1CB48 -40%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 109%);
345
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1cb48', endColorstr='#e6bc3b',GradientType=1 );}
346
 
347
.legs {top: 285px}
348
 
349
.right_leg {background: #003e82;
350
background: -moz-linear-gradient(top,  #003e82 0%, #35668f 40%);
351
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003e82), color-stop(40%,#35668f));
352
background: -webkit-linear-gradient(top,  #003e82 0%,#35668f 40%);
353
background: -o-linear-gradient(top,  #003e82 0%,#35668f 40%);
354
background: -ms-linear-gradient(top,  #003e82 0%,#35668f 40%);
355
background: linear-gradient(to bottom,  #003e82 0%,#35668f 40%);
356
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003e82', endColorstr='#35668f',GradientType=0 );
357
width: 45px;
358
height: 38px;
359
left: 73px;
360
border-bottom-left-radius: 4px;}
361
 
362
.right_leg:before {position: absolute;
363
content: '';
364
border-radius: 50%;
365
width: 40px;
366
height: 73px;
367
left: 28px;
368
background-color: #FFF;
369
top: 5px;}
370
 
371
.make_it_left_leg {left: 23px;
372
-webkit-transform: scaleX(-1);
373
-moz-transform: scaleX(-1)}
374
 
375
.shoes {background-color: #231F20;
376
width: 45px;
377
height: 9px;
378
top: 36px;
379
left: 74px;
380
border-top-right-radius: 14px;
381
-webkit-transform: rotate(2deg);
382
-moz-transform: rotate(2deg);
383
-ms-transform: rotate(2deg);
384
-o-transform: rotate(2deg);
385
transform: rotate(2deg);
386
}
387
 
388
.shoes:after {position: absolute;
389
content: '';
390
border-top-right-radius: 30%;
391
width: 30px;
392
height: 6px;
393
background-color: #231F20;
394
top: 8px;
395
right: 0px;
396
border-bottom-right-radius: 31%;
397
border-bottom-left-radius: 50%;
398
-webkit-transform: rotate(2deg);
399
-moz-transform: rotate(2deg);
400
-ms-transform: rotate(2deg);
401
-o-transform: rotate(2deg);
402
transform: rotate(2deg);
403
}
404
 
405
.shoes:before {position: absolute;
406
content: '';
407
width: 9px;
408
height: 6px;
409
background-color: #231F20;
410
top: 6px;
411
left: 0px;
412
border-bottom-right-radius: 40%;
413
}
414
 
415
.small_shoes {
416
border-radius: 40%;
417
width: 30px;
418
height: 10px;
419
background-color: #231F20;
420
top: -4px;
421
right: 4px;
422
-webkit-transform: rotate(9deg);
423
-moz-transform: rotate(9deg);
424
-ms-transform: rotate(9deg);
425
-o-transform: rotate(9deg);
426
transform: rotate(9deg);
427
}
428
 
429
.small_shoes:before {position: absolute;
430
content: '';
431
width: 18px;
432
height: 6px;
433
background-color: #35668F;
434
top: -1px;
435
left: -1px;
436
-webkit-transform: rotate(-12deg) !important;
437
-moz-transform: rotate(-12deg) !important;
438
-ms-transform: rotate(-12deg) !important;
439
-o-transform: rotate(-12deg) !important;
440
transform: rotate(-12deg) !important;
441
border-bottom-right-radius: 4px;
442
}
443
 
444
.make_it_left_shoes {left: 22px;
445
-webkit-transform: scaleX(-1);
446
-moz-transform: scaleX(-1);
447
-ms-transform: scaleX(-1);
448
-o-transform: scaleX(-1);
449
transform: scaleX(-1)
450
}
451
 
452
.arm {width: 77px;
453
height: 89px;
454
background: #f1cb48;
455
background: -moz-linear-gradient(-45deg,   #F1CB48 0%,#F9D65C 24%,#E6BC3B 99%);
456
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#F1CB48), color-stop(24%,#F9D65C), color-stop(99%,#E6BC3B));
457
background: -webkit-linear-gradient(-45deg,   #F1CB48 0%,#F9D65C 24%,#E6BC3B 99%);
458
background: -o-linear-gradient(-45deg,  #F1CB48 0%,#F9D65C 24%,#E6BC3B 99%);
459
background: -ms-linear-gradient(-45deg,  #F1CB48 0%,#F9D65C 24%,#E6BC3B 99%);
460
background: linear-gradient(135deg, #F1CB48 0%,#F9D65C 24%,#E6BC3B 99%);
461
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1cb48', endColorstr='#e6bc3b',GradientType=1 );
462
 
463
 
464
top: 192px;
465
border-bottom-left-radius: 11px;
466
border-top-left-radius: 55px;
467
z-index: 5555;
468
-webkit-transform: rotate(27deg);
469
-moz-transform: rotate(27deg);
470
-ms-transform: rotate(27deg);
471
-o-transform: rotate(27deg);
472
transform: rotate(27deg);
473
left: -12px;}
474
 
475
.arm:before {position: absolute;
476
content: '';
477
width: 36px;
478
height: 19px;
479
background-color: #F3CF55;
480
top: 76px;
481
left: -7px;
482
-webkit-transform: rotate(69deg);
483
-moz-transform: rotate(69deg);
484
-ms-transform: rotate(69deg);
485
-o-transform: rotate(69deg);
486
transform: rotate(69deg);
487
border-bottom-left-radius: 19px;
488
border-bottom-right-radius: 9px;
489
}
490
 
491
.arm:after {position: absolute;
492
content: '';
493
width: 52px;
494
height: 16px;
495
background-color: #FFF;
496
top: 73px;
497
left: 0px;
498
-webkit-transform: rotate(72deg);
499
-moz-transform: rotate(72deg);
500
-ms-transform: rotate(72deg);
501
-o-transform: rotate(72deg);
502
transform: rotate(72deg);
503
border-radius: 50%;
504
}
505
 
506
 
507
.hand {width: 19px;
508
height: 11px;
509
background-color: #231F20;
510
left: -28px;
511
top: 270px;
512
z-index: 99999;
513
border-bottom-left-radius: 8px;
514
border-bottom-right-radius: 8px;
515
-webkit-transform: rotate(4deg);
516
-moz-transform: rotate(4deg);
517
-ms-transform: rotate(4deg);
518
-o-transform: rotate(4deg);
519
transform: rotate(4deg);
520
}
521
 
522
 
523
.hand:before {width: 27px;
524
position: absolute;
525
content: '';
526
height: 25px;
527
background-color: #231F20;
528
left: 4px;
529
top: 4px;
530
border-bottom-left-radius: 10px;
531
border-bottom-right-radius: 0px;
532
border-top-left-radius: 3px;
533
border-top-right-radius: 18px;
534
-webkit-transform: rotate(-17deg);
535
-moz-transform: rotate(-17deg);
536
-ms-transform: rotate(-17deg);
537
-o-transform: rotate(-17deg);
538
transform: rotate(-17deg);
539
}
540
 
541
.hand:after {width: 14px;
542
position: absolute;
543
content: '';
544
height: 14px;
545
background-color: #231F20;
546
left: 7px;
547
top: 21px;
548
border-radius: 50%;
549
}
550
 
551
.hand_parts {width: 16px;
552
height: 16px;
553
background-color: #231F20;
554
left: 19px;
555
top: 21px;
556
border-radius: 47%;}
557
 
558
.hand_parts:after {
559
position: absolute;
560
content: '';
561
width: 16px;
562
height: 16px;
563
background-color: #231F20;
564
left: 1px;
565
top: -11px;
566
border-radius: 47%;
567
}
568
 
569
.make_it_right_arm {left: 57px;
570
-webkit-transform: scaleX(-1);
571
-moz-transform: scaleX(-1);
572
-ms-transform: scaleX(-1);
573
-o-transform: scaleX(-1);
574
transform: scaleX(-1);
575
top: 186px;
576
height: 92px;
577
z-index: -1;
578
border-left: 14px #E6BC3B solid;}
579
 
580
.make_it_right_hand {left: 137px;
581
top: 266px;
582
z-index: 7777;
583
-webkit-transform: scaleX(-1) rotate(27deg);
584
-moz-transform: scaleX(-1) rotate(27deg);
585
-ms-transform: scaleX(-1) rotate(27deg);
586
-o-transform: scaleX(-1) rotate(27deg);
587
transform: scaleX(-1) rotate(27deg);}
588
 
589
 
590
 
591
.hair1 {background-color: rgba(0, 0, 0, 0);
592
width: 25px;
593
height: 48px;
594
top: -37px;
595
border-radius: 53%;
596
border-bottom-left-radius: 3px;
597
border-left: solid #000 1px;
598
left: 75px;
599
-webkit-transform: rotate(8deg);
600
-moz-transform: rotate(8deg);
601
-ms-transform: rotate(8deg);
602
-o-transform: rotate(8deg);
603
transform: rotate(8deg);
604
}
605
 
606
 
607
.hair1:after {background-color: rgba(0, 0, 0, 0);
608
position: absolute;
609
content: '';
610
width: 25px;
611
height: 35px;
612
top: 14px;
613
border-radius: 43%;
614
border-bottom-left-radius: 1px;
615
border-left: solid #000 1px;
616
left: 1px;
617
-webkit-transform: rotate(4deg);
618
-moz-transform: rotate(4deg);
619
-ms-transform: rotate(4deg);
620
-o-transform: rotate(4deg);
621
transform: rotate(4deg);}
622
 
623
.hair1:before {background-color: rgba(0, 0, 0, 0);
624
position: absolute;
625
content: '';
626
width: 25px;
627
height: 29px;
628
top: 21px;
629
border-radius: 43%;
630
border-bottom-left-radius: 1px;
631
border-left: solid #000 1px;
632
left: 3px;
633
-webkit-transform: rotate(11deg);
634
-moz-transform: rotate(11deg);
635
-ms-transform: rotate(11deg);
636
-o-transform: rotate(11deg);
637
transform: rotate(11deg);}
638
 
639
.make_it_left_hair1 {left: 44px;
640
-webkit-transform: scaleX(-1) rotate(13deg);
641
-moz-transform: scaleX(-1) rotate(13deg);
642
-ms-transform: scaleX(-1) rotate(13deg);
643
-o-transform: scaleX(-1) rotate(13deg);
644
transform: scaleX(-1) rotate(13deg);}
645
 
646
 
647
.hair2 {background-color: rgba(0, 0, 0, 0);
648
width: 25px;
649
height: 48px;
650
top: -43px;
651
border-radius: 43%;
652
border-bottom-left-radius: 3px;
653
border-left: solid #000 1px;
654
left: 73px;
655
-webkit-transform: rotate(5deg);
656
-moz-transform: rotate(5deg);
657
-ms-transform: rotate(5deg);
658
-o-transform: rotate(5deg);
659
transform: rotate(5deg);}
660
 
661
 
662
.hair2:before {background-color: rgba(0, 0, 0, 0);
663
width: 25px;
664
position: absolute;
665
content: '';
666
height: 48px;
667
border-radius: 43%;
668
border-bottom-left-radius: 3px;
669
border-left: solid #000 1px;
670
left: -29px;
671
-webkit-transform: scaleX(-1) rotate(15deg);
672
-moz-transform: scaleX(-1) rotate(15deg);
673
-ms-transform: scaleX(-1) rotate(15deg);
674
-o-transform: scaleX(-1) rotate(15deg);
675
transform: scaleX(-1) rotate(15deg);}
676
 
677
 
678
.blue_borders {background-color: #35668F;
679
width: 89px;
680
height: 79px;
681
top: 180px;
682
left: 26px;
683
z-index: 2;}
684
 
685
.blue_borders:before {position: absolute;
686
content: '';
687
background-color: #35668F;
688
width: 91px;
689
height: 17px;
690
border-bottom-right-radius: 9px;
691
-webkit-transform: rotate(-13deg);
692
-moz-transform: rotate(-13deg);
693
-ms-transform: rotate(-13deg);
694
-o-transform: rotate(-13deg);
695
transform: rotate(-13deg);
696
top: 24px;
697
left: 25px;
698
}
699
 
700
.blue_borders:after {position: absolute;
701
content: '';
702
background-color: #35668F;
703
width: 91px;
704
height: 17px;
705
border-bottom-left-radius: 9px;
706
-webkit-transform: rotate(13deg);
707
-moz-transform: rotate(13deg);
708
-ms-transform: rotate(13deg);
709
-o-transform: rotate(13deg);
710
transform: rotate(13deg);
711
top: 24px;
712
left: -27px;}
713
 
714
.white_light {width: 5px;
715
height: 43px;
716
left: 35px;
717
background-color: #FFFFFF;
718
opacity: 0.2;
719
top: 2px;
720
border-radius: 50%;
721
-moz-box-shadow: 0px 3px 9px 8px rgba(0,0,0,1);
722
box-shadow: 0px 3px 10px 8px #FFFFFF;
723
-webkit-transform: rotate(49deg);
724
-moz-transform: rotate(49deg);
725
-ms-transform: rotate(49deg);
726
-o-transform: rotate(49deg);
727
transform: rotate(49deg);
728
}
729
 
730
 
731
 
732
.dark_light {
733
width: 7px;
734
height: 50px;
735
top: 10px;
736
left: 105px;
737
background-color: #cd9f08;
738
opacity: 0.2;
739
border-radius: 50%;
740
-moz-box-shadow: 0px 3px 10px 8px rgba(0,0,0,1);
741
box-shadow: 0px 3px 10px 8px #cd9f08;
742
-webkit-transform:rotate(-42deg);
743
   -moz-transform:rotate(-42deg);
744
    -ms-transform:rotate(-42deg);
745
     -o-transform:rotate(-42deg);
746
        transform:rotate(-42deg);
747
}
748
 
749
 
750
.pocket {width: 40px;
751
height: 37px;
752
background-color: #245580;
753
top: 215px;
754
z-index: 99999;
755
left: 49px;
756
-moz-box-shadow: 0px 0px 3px 0px rgba(19,54,82,1);
757
box-shadow: 0px 0px 3px 0px #133652;
758
border-bottom-left-radius: 20px;
759
border-bottom-right-radius: 20px;
760
border: 1px dotted #B6B6B6;}
761
 
762
.pocket:after {width: 43px;
763
height: 15px;
764
position: absolute;
765
content: '';
766
top: -9px;
767
left: -1px;
768
border-radius: 50%;
769
background-color: #35668F;
770
border-bottom: 1px dotted #B6B6B6;}
771
 
772
 
773
.logo {background-color: #231F20;
774
width: 19px;
775
height: 19px;
776
border-radius: 50%;
777
top: 11px;
778
right: 10px;}
779
 
780
.logo:before {position: absolute;
781
content: '';
782
background-color: #245580;
783
width: 9px;
784
height: 9px;
785
top: 5px;
786
left: 5px;
787
-webkit-transform:rotate(-45deg);
788
   -moz-transform:rotate(-45deg);
789
    -ms-transform:rotate(-45deg);
790
     -o-transform:rotate(-45deg);
791
        transform:rotate(-45deg);
792
}
793
 
794
.logo:after {position: absolute;
795
content: '';
796
background-color: #231F20;
797
width: 5px;
798
height: 5px;
799
border-radius: 50%;
800
top: 7px;
801
left: 7px;
802
}
803
 
804
.lines {width: 5px;
805
height: 1px;
806
z-index: 9999;
807
background-color: #231F20;
808
top: 20px;
809
right: 12px;}
810
 
811
.lines:after {position: absolute;
812
content: '';
813
width: 11px;
814
height: 1px;
815
z-index: 9999;
816
background-color: #245580;
817
top: 1px;
818
right: -4px;}
819
 
820
.curve1 {width: 40px;
821
height: 29px;
822
background-color: rgba(0, 0, 0, 0);
823
top: 249px;
824
z-index: 99999;
825
left: 110px;
826
border-bottom-left-radius: 20px;
827
border-left: dotted 1px #FFF;
828
box-shadow: 1px 0px 0px 0px #133652 inset;}
829
 
830
.curve1:after {position: absolute;
831
content: '';
832
width: 32px;
833
top: -44px;
834
height: 50px;
835
border-bottom-right-radius: 20px;
836
border-bottom-left-radius: 5px;
837
border-bottom: dotted 1px #FFF;
838
background-color: rgba(0, 0, 0, 0); }
839
 
840
.make_it_left_curve {left: -11px;
841
-webkit-transform:scaleX(-1);
842
   -moz-transform:scaleX(-1);
843
    -ms-transform:scaleX(-1);
844
     -o-transform:scaleX(-1);
845
        transform:scaleX(-1);}
846
 
847
 
848
.curve2 {width: 91px;
849
height: 29px;
850
background-color: rgba(0, 0, 0, 0);
851
top: 175px;
852
z-index: 100000;
853
left: 25px;
854
border-bottom-left-radius: 50%;
855
border-bottom-right-radius: 50%;
856
border-bottom: dotted 1px #FFF;}
857
 
858
.bill h2 {top: 364px;
859
font-family: tahoma;
860
font-size: 34px;
861
font-weight: normal;
862
left: 43px;
863
color: #414141;}
864
 
865
 
866
/****************************************************/
867
 
868
.jerry {background: #f1cb48;
869
background: -moz-linear-gradient(left,  #f1cb48 0%, #f9d65c 24%, #f9d65c 48%, #e6bc3b 99%);
870
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f1cb48), color-stop(24%,#f9d65c), color-stop(48%,#f9d65c), color-stop(99%,#e6bc3b));
871
background: -webkit-linear-gradient(left,  #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
872
background: -o-linear-gradient(left,  #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
873
background: -ms-linear-gradient(left,  #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
874
background: linear-gradient(to right,  #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
875
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1cb48', endColorstr='#e6bc3b',GradientType=1 );
876
width: 180px;
877
height: 212px;
878
border-top-left-radius: 75px;
879
border-top-right-radius: 75px;
880
border-bottom-left-radius: 65px;
881
border-bottom-right-radius: 64px;
882
position: relative;
883
float: left;
884
top: 105px;
885
transition: ease 0.3s all;
886
-webkit-transition: ease 0.3s all;
887
left: 200px;}
888
 
889
.jerry .dark_light {left: 136px;}
890
 
891
.jerry .eyes1, .jerry .eyes2 {
892
top: 4px;
893
-webkit-transform:scale(0.9);
894
   -moz-transform:scale(0.9);
895
    -ms-transform:scale(0.9);
896
     -o-transform:scale(0.9);
897
        transform:scale(0.9);
898
}
899
 
900
.jerry .eyes1 .brown_eye {left: 24px;}
901
 
902
.jerry .eyes2 {left: 44px;}
903
 
904
.jerry .eyes1 {left: -20px;}
905
 
906
.jerry .right_tie {right: 1px;}
907
 
908
.jerry .right_tie .top_tie, .jerry .right_tie .down_tie {width: 38px;}
909
 
910
.jerry .right_tie .top_tie:after, .jerry .right_tie .down_tie:after {right: 35px;}
911
 
912
.jerry .left_tie {right: 174px;} 
913
 
914
.jerry .left_tie .top_tie, .jerry .left_tie .down_tie {width: 7px;}
915
 
916
.jerry .left_tie .top_tie:after, .jerry .left_tie .down_tie:after {display: none;}
917
 
918
 
919
 
920
.clothes .main_jerry {background-color: #35668F;
921
width: 100px;
922
height: 43px;
923
top: 143px;
924
left: 29px;
925
z-index: 99999;
926
border-left: 1px dotted #FFF;
927
border-right: 1px dotted #FFF;}
928
 
929
.jerry .jerry_right_shirt{
930
width: 64px;
931
left: 117px;
932
top: 139px;}
933
 
934
.jerry_left_shirt {top: 139px;
935
width: 46px;
936
left: -5px;
937
-webkit-transform:scaleX(-1) rotate(-23deg);
938
   -moz-transform:scaleX(-1) rotate(-23deg);
939
    -ms-transform:scaleX(-1) rotate(-23deg);
940
     -o-transform:scaleX(-1) rotate(-23deg);
941
        transform:scaleX(-1) rotate(-23deg);
942
    }
943
 
944
.jerry .pocket {-webkit-transform:scale(0.9);
945
   -moz-transform:scale(0.9);
946
    -ms-transform:scale(0.9);
947
     -o-transform:scale(0.9);
948
        transform:scale(0.9);
949
top: 152px;
950
left: 57px;}
951
 
952
.jerry_bottom {
953
background: #35668F;
954
background: -moz-radial-gradient(top, ellipse cover, #35668f 61%, #003e82 100%);
955
background: -webkit-gradient(radial, top center, 0px, top center, 100%, color-stop(61%,#35668f), color-stop(100%,#003e82));
956
background: -webkit-radial-gradient(top, ellipse cover, #35668F 61%,#003E82 100%);
957
background: -o-radial-gradient(top, ellipse cover, #35668f 61%,#003e82 100%);
958
background: -ms-radial-gradient(top, ellipse cover, #35668f 61%,#003e82 100%);
959
background: radial-gradient(ellipse at top, #35668F 61%,#003E82 100%);
960
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35668f', endColorstr='#003e82',GradientType=1 );
961
filter: inherit;
962
height: 43px;
963
width: 171px;
964
top: 169px;
965
left: 4px;
966
border-bottom-right-radius: 70px;
967
border-bottom-left-radius: 70px;}
968
 
969
 
970
 
971
 
972
 
973
.jerry_shoes {background-color: #231F20;
974
width: 45px;
975
height: 9px;
976
top: -68px;
977
left: 84px;
978
border-top-right-radius: 14px;
979
-webkit-transform:rotate(2deg);
980
   -moz-transform:rotate(2deg);
981
    -ms-transform:rotate(2deg);
982
     -o-transform:rotate(2deg);
983
        transform:rotate(2deg);
984
}
985
 
986
.jerry_shoes:after {position: absolute;
987
content: '';
988
border-top-right-radius: 30%;
989
width: 30px;
990
height: 6px;
991
background-color: #231F20;
992
top: 8px;
993
right: 0px;
994
border-bottom-right-radius: 31%;
995
border-bottom-left-radius: 50%;
996
-webkit-transform:rotate(2deg);
997
   -moz-transform:rotate(2deg);
998
    -ms-transform:rotate(2deg);
999
     -o-transform:rotate(2deg);
1000
        transform:rotate(2deg);
1001
}
1002
 
1003
.jerry_shoes:before {position: absolute;
1004
content: '';
1005
width: 9px;
1006
height: 6px;
1007
background-color: #231F20;
1008
top: 6px;
1009
left: 0px;
1010
border-bottom-right-radius: 40%;
1011
}
1012
 
1013
.jerry_small_shoes {
1014
border-radius: 40%;
1015
width: 30px;
1016
height: 10px;
1017
background-color: #231F20;
1018
top: -5px;
1019
right: 4px;
1020
-webkit-transform:rotate(9deg);
1021
   -moz-transform:rotate(9deg);
1022
    -ms-transform:rotate(9deg);
1023
     -o-transform:rotate(9deg);
1024
        transform:rotate(9deg);
1025
}
1026
 
1027
.jerry_small_shoes:before {position: absolute;
1028
content: '';
1029
width: 36px;
1030
height: 8px;
1031
background-color: #35668F;
1032
top: -2px;
1033
left: -11px;
1034
-webkit-transform:rotate(-16deg) !important;
1035
   -moz-transform:rotate(-16deg) !important;
1036
    -ms-transform:rotate(-16deg) !important;
1037
     -o-transform:rotate(-16deg) !important;
1038
        transform:rotate(-16deg) !important;
1039
border-bottom-right-radius: 4px;
1040
}
1041
 
1042
.jerry_left_shoes {left: 30px;
1043
-webkit-transform:scaleX(-1);
1044
   -moz-transform:scaleX(-1);
1045
    -ms-transform:scaleX(-1);
1046
     -o-transform:scaleX(-1);
1047
        transform:scaleX(-1);
1048
}
1049
 
1050
 
1051
.jerry_smile {width: 64px;
1052
height: 17px;
1053
background-color: #2B2B2B;
1054
top: 112px;
1055
left: 45px;
1056
border-bottom-left-radius: 130px;
1057
border-bottom-right-radius: 96px;
1058
-webkit-transform:rotate(-5deg);
1059
   -moz-transform:rotate(-5deg);
1060
    -ms-transform:rotate(-5deg);
1061
     -o-transform:rotate(-5deg);
1062
        transform:rotate(-5deg);}
1063
 
1064
.jerry_smile:before {position: absolute;
1065
content: '';
1066
width: 54px;
1067
height: 12px;
1068
top: 7px;
1069
left: 6px;
1070
border-radius: 50%;
1071
background-color: #2B2B2B;}
1072
 
1073
.jerry_smile:after {position: absolute;
1074
content: '';
1075
width: 62px;
1076
height: 9px;
1077
top: -5px;
1078
left: 0px;
1079
-webkit-transform:rotate(-1deg);
1080
   -moz-transform:rotate(-1deg);
1081
    -ms-transform:rotate(-1deg);
1082
     -o-transform:rotate(-1deg);
1083
        transform:rotate(-1deg);
1084
border-radius: 50%;
1085
background-color: #F9D65C;}
1086
 
1087
 
1088
 
1089
.teeth1 {width: 16px;
1090
height: 11px;
1091
border-bottom-right-radius: 8px;
1092
border-bottom-left-radius: 3px;
1093
right: -1px;
1094
background-color: #F3F3F3;
1095
box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.2) inset}
1096
 
1097
.teeth1:after {width: 16px;
1098
height: 11px;
1099
position: absolute;
1100
content: '';
1101
border-bottom-right-radius: 5px;
1102
border-bottom-left-radius: 3px;
1103
right: 15px;
1104
top: 1px;
1105
background-color: #F3F3F3;
1106
box-shadow: 1px 4px 7px rgba(0, 0, 0, 0.2) inset;}
1107
 
1108
.teeth2 {width: 18px;
1109
height: 11px;
1110
border-bottom-right-radius: 4px;
1111
border-bottom-left-radius: 6px;
1112
top: 1px;
1113
right: 28px;
1114
background-color: #F3F3F3;
1115
box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.2) inset;}
1116
 
1117
.teeth2:after {width: 16px;
1118
height: 11px;
1119
position: absolute;
1120
content: '';
1121
border-bottom-right-radius: 5px;
1122
border-bottom-left-radius: 9px;
1123
right: 17px;
1124
top: -1px;
1125
background-color: #F3F3F3;
1126
box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.2) inset;}
1127
 
1128
.jerry_hair ul {list-style: none}
1129
 
1130
.jerry_hair ul li {width: 1px;
1131
background-color: #222;}
1132
 
1133
li.h1 {height: 27px;
1134
left: 92px;
1135
top: -18px;
1136
-webkit-transform:rotate(5deg);
1137
   -moz-transform:rotate(5deg);
1138
    -ms-transform:rotate(5deg);
1139
     -o-transform:rotate(5deg);
1140
        transform:rotate(5deg);}
1141
 
1142
li.h2 {height: 25px;
1143
left: 102px;
1144
top: -18px;
1145
-webkit-transform:rotate(8deg);
1146
   -moz-transform:rotate(8deg);
1147
    -ms-transform:rotate(8deg);
1148
     -o-transform:rotate(8deg);
1149
        transform:rotate(8deg);}
1150
 
1151
 
1152
li.h3 {height: 23px;
1153
left: 111px;
1154
top: -17px;
1155
-webkit-transform:rotate(10deg);
1156
   -moz-transform:rotate(10deg);
1157
    -ms-transform:rotate(10deg);
1158
     -o-transform:rotate(10deg);
1159
        transform:rotate(10deg);}
1160
 
1161
 
1162
li.h4 {height: 18px;
1163
left: 121px;
1164
top: -13px;
1165
-webkit-transform:rotate(11deg);
1166
   -moz-transform:rotate(11deg);
1167
    -ms-transform:rotate(11deg);
1168
     -o-transform:rotate(11deg);
1169
        transform:rotate(11deg);}
1170
 
1171
 
1172
li.h5 {height: 23px;
1173
left: 82px;
1174
top: -17px;
1175
-webkit-transform:rotate(-1deg);
1176
   -moz-transform:rotate(-1deg);
1177
    -ms-transform:rotate(-1deg);
1178
     -o-transform:rotate(-1deg);
1179
        transform:rotate(-1deg);}
1180
 
1181
 
1182
li.h6 {height: 27px;
1183
left: 72px;
1184
top: -18px;
1185
-webkit-transform:rotate(-6deg);
1186
   -moz-transform:rotate(-6deg);
1187
    -ms-transform:rotate(-6deg);
1188
     -o-transform:rotate(-6deg);
1189
        transform:rotate(-6deg);}
1190
 
1191
 
1192
li.h7 {height: 24px;
1193
left: 62px;
1194
top: -16px;
1195
-webkit-transform:rotate(-9deg);
1196
   -moz-transform:rotate(-9deg);
1197
    -ms-transform:rotate(-9deg);
1198
     -o-transform:rotate(-9deg);
1199
        transform:rotate(-9deg);}
1200
 
1201
 
1202
li.h8 {height: 17px;
1203
left: 53px;
1204
top: -9px;
1205
-webkit-transform:rotate(-10deg);
1206
   -moz-transform:rotate(-10deg);
1207
    -ms-transform:rotate(-10deg);
1208
     -o-transform:rotate(-10deg);
1209
        transform:rotate(-10deg);}
1210
 
1211
 
1212
li.h9 {height: 12px;
1213
left: 44px;
1214
top: -3px;
1215
-webkit-transform:rotate(-11deg);
1216
   -moz-transform:rotate(-11deg);
1217
    -ms-transform:rotate(-11deg);
1218
     -o-transform:rotate(-11deg);
1219
        transform:rotate(-11deg);}
1220
 
1221
 
1222
li.h10 {height: 20px;
1223
left: 130px;
1224
top: -14px;
1225
-webkit-transform:rotate(13deg);
1226
   -moz-transform:rotate(13deg);
1227
    -ms-transform:rotate(13deg);
1228
     -o-transform:rotate(13deg);
1229
        transform:rotate(13deg);}
1230
 
1231
 
1232
li.h11 {height: 17px;
1233
left: 138px;
1234
top: -6px;
1235
-webkit-transform:rotate(16deg);
1236
   -moz-transform:rotate(16deg);
1237
    -ms-transform:rotate(16deg);
1238
     -o-transform:rotate(16deg);
1239
        transform:rotate(16deg);}
1240
 
1241
 
1242
li.h12 {height: 15px;
1243
left: 35px;
1244
top: -3px;
1245
-webkit-transform:rotate(-13deg);
1246
   -moz-transform:rotate(-13deg);
1247
    -ms-transform:rotate(-13deg);
1248
     -o-transform:rotate(-13deg);
1249
        transform:rotate(-13deg);}
1250
 
1251
 
1252
.jerry h2 {
1253
top: 258px;
1254
font-family: tahoma;
1255
font-size: 34px;
1256
font-weight: normal;
1257
left: 43px;
1258
color: #414141;}
1259
 
1260
 
1261
.jerry_lh {width: 39px;
1262
height: 15px;
1263
background-color: #F1CC49;
1264
top: 151px;
1265
border-bottom-left-radius: 11px;
1266
left: -25px;
1267
-webkit-transform:rotate(-39deg);
1268
   -moz-transform:rotate(-39deg);
1269
    -ms-transform:rotate(-39deg);
1270
     -o-transform:rotate(-39deg);
1271
        transform:rotate(-39deg);}
1272
 
1273
.animated_lh {width: 27px;
1274
height: 15px;
1275
background-color: #F1CC49;
1276
top: 150px;
1277
border-bottom-right-radius: 11px;
1278
left: -37px;
1279
-webkit-transform:rotate(40deg);
1280
   -moz-transform:rotate(40deg);
1281
    -ms-transform:rotate(40deg);
1282
     -o-transform:rotate(40deg);
1283
        transform:rotate(40deg);
1284
 
1285
    -moz-animation: hand_animate 2s ease 1s infinite;
1286
    -webkit-animation: hand_animate 2s ease 1s infinite;
1287
        -o-animation: hand_animate 2s ease 1s infinite;
1288
        animation: hand_animate 2s ease 1s infinite;
1289
 
1290
}
1291
 
1292
 
1293
@-moz-keyframes hand_animate
1294
{
1295
0%   {-moz-transform: rotate(40deg);}
1296
50% {-moz-transform: rotate(70deg);}
1297
100% {-moz-transform: rotate(40deg);}
1298
}
1299
 
1300
@-webkit-keyframes hand_animate
1301
{
1302
0%   {-webkit-transform: rotate(40deg);}
1303
50% {-webkit-transform: rotate(70deg);}
1304
100% {-webkit-transform: rotate(40deg);}
1305
}
1306
 
1307
@-ms-keyframes hand_animate
1308
{
1309
0%   {-ms-transform: rotate(40deg);}
1310
50% {-ms-transform: rotate(70deg);}
1311
100% {-ms-transform: rotate(40deg);}
1312
}
1313
 
1314
@-o-keyframes hand_animate
1315
{
1316
0%   {-o-transform: rotate(40deg);}
1317
50% {-o-transform: rotate(70deg);}
1318
100% {-o-transform: rotate(40deg);}
1319
}
1320
 
1321
@keyframes hand_animate
1322
{
1323
0%   {transform: rotate(40deg);}
1324
50% {transform: rotate(70deg);}
1325
100% {transform: rotate(40deg);}
1326
}
1327
 
1328
 
1329
 
1330
.gloves_lh {width: 35px;
1331
height: 30px;
1332
top: -9px;
1333
left: -32px;
1334
background-color: #231F20;
1335
border-radius: 50%;}
1336
 
1337
 
1338
.gloves_lh:after {position: absolute;
1339
content: '';
1340
width: 23px;
1341
left: -12px;
1342
top: 1px;
1343
background-color: #231F20;
1344
border-radius: 50%;
1345
height: 17px;
1346
-webkit-transform:rotate(21deg);
1347
   -moz-transform:rotate(21deg);
1348
    -ms-transform:rotate(21deg);
1349
     -o-transform:rotate(21deg);
1350
        transform:rotate(21deg);}
1351
 
1352
.gloves_lh:before {position: absolute;
1353
content: '';
1354
width: 31px;
1355
left: -11px;
1356
background-color: #231F20;
1357
border-radius: 50%;
1358
top: 14px;
1359
height: 18px;
1360
-webkit-transform:rotate(-1deg);
1361
   -moz-transform:rotate(-1deg);
1362
    -ms-transform:rotate(-1deg);
1363
     -o-transform:rotate(-1deg);
1364
        transform:rotate(-1deg);}
1365
 
1366
.gloves_lh2 {width: 19px;
1367
height: 37px;
1368
-webkit-transform:rotate(-22deg);
1369
   -moz-transform:rotate(-22deg);
1370
    -ms-transform:rotate(-22deg);
1371
     -o-transform:rotate(-22deg);
1372
        transform:rotate(-22deg);
1373
top: -19px;
1374
left: -29px;
1375
background-color: #231F20;
1376
border-radius: 50%;}
1377
 
1378
.gloves_lh2:before {position: absolute;
1379
content: '';
1380
width: 14px;
1381
left: 22px;
1382
background-color: #231F20;
1383
top: 25px;
1384
height: 19px;
1385
border-top-left-radius: 6px;
1386
border-bottom-left-radius: 6px;
1387
-webkit-transform:rotate(20deg) !important;
1388
   -moz-transform:rotate(20deg) !important;
1389
    -ms-transform:rotate(20deg) !important;
1390
     -o-transform:rotate(20deg) !important;
1391
        transform:rotate(20deg) !important;}
1392
 
1393
 
1394
 
1395
.jerry_curve1 {width: 40px;
1396
height: 29px;
1397
background-color: rgba(0, 0, 0, 0);
1398
top: 173px;
1399
z-index: 99999;
1400
left: 129px;
1401
border-bottom-left-radius: 20px;
1402
border-left: dotted 1px #FFF;
1403
box-shadow: 1px 0px 0px 0px #133652 inset;}
1404
 
1405
.jerry_curve1:after {position: absolute;
1406
content: '';
1407
width: 43px;
1408
top: -50px;
1409
height: 50px;
1410
left: 2px;
1411
border-bottom: dotted 1px #FFF;
1412
background-color: rgba(0, 0, 0, 0); }
1413
 
1414
.jerry_left_curve {width: 12px;left: 17px;
1415
-webkit-transform:scaleX(-1);
1416
   -moz-transform:scaleX(-1);
1417
    -ms-transform:scaleX(-1);
1418
     -o-transform:scaleX(-1);
1419
        transform:scaleX(-1);}
1420
 
1421
.jerry_left_curve .jerry_curve1:after {width: 21px;}
1422
 
1423
.jerry_curve2 {width: 71px;
1424
height: 29px;
1425
background-color: rgba(0, 0, 0, 0);
1426
top: 118px;
1427
z-index: 100000;
1428
left: 43px;
1429
border-bottom: dotted 1px #CACACA;}
1430
 
1431
.jerry .eye_animate {  animation: eyes_animation 2s ease 3s infinite;
1432
    -moz-animation: eyes_animation 2s ease 3s infinite;
1433
    -o-animation: eyes_animation 2s ease 3s infinite;
1434
    -webkit-animation: eyes_animation 2s ease 3s infinite;}
1435
 
1436
.jerry_rh {width: 34px;
1437
height: 15px;
1438
background-color: #EBC03D;
1439
top: 161px;
1440
border-bottom-left-radius: 11px;
1441
left: 156px;
1442
z-index: 999999;
1443
-webkit-transform:rotate(-109deg);
1444
   -moz-transform:rotate(-109deg);
1445
    -ms-transform:rotate(-109deg);
1446
     -o-transform:rotate(-109deg);
1447
        transform:rotate(-109deg);
1448
box-shadow: 3px 1px 0px 2px #E2B836 inset;}
1449
 
1450
.gloves_rh {
1451
width: 20px;
1452
height: 15px;
1453
background-color: #EBC03D;
1454
top: 175px;
1455
border-bottom-left-radius: 11px;
1456
left: 152px;
1457
z-index: 999999;
1458
-webkit-transform:rotate(-19deg);
1459
   -moz-transform:rotate(-19deg);
1460
    -ms-transform:rotate(-19deg);
1461
     -o-transform:rotate(-19deg);
1462
        transform:rotate(-19deg);;
1463
box-shadow: 3px 1px 0px 2px #E2B836 inset;}
1464
 
1465
.gloves_rh:before {position: absolute;
1466
content: '';
1467
width: 17px;
1468
left: -19px;
1469
background-color: #231F20;
1470
top: -3px;
1471
height: 22px;
1472
border-top-left-radius: 5px;
1473
border-bottom-left-radius: 16px;
1474
border-top-right-radius: 5px;
1475
border-bottom-right-radius: 5px;
1476
-webkit-transform:rotate(-4deg) !important;
1477
   -moz-transform:rotate(-4deg) !important;
1478
    -ms-transform:rotate(-4deg) !important;
1479
     -o-transform:rotate(-4deg) !important;
1480
        transform:rotate(-4deg) !important;}
1481
 
1482
.gloves_rh:after {position: absolute;
1483
content: '';
1484
width: 13px;
1485
left: -6px;
1486
background-color: #231F20;
1487
top: -2px;
1488
height: 19px;
1489
border-top-left-radius: 4px;
1490
border-bottom-left-radius: 4px;
1491
-webkit-transform:rotate(3deg) !important;
1492
   -moz-transform:rotate(3deg) !important;
1493
    -ms-transform:rotate(3deg) !important;
1494
     -o-transform:rotate(3deg) !important;
1495
        transform:rotate(3deg) !important;}
1496
 
1497
 
1498
/********************************************************/
1499
 
1500
.evil {background: #8266bd;
1501
background: -moz-linear-gradient(left,  #8266bd 18%, #685a93 100%);
1502
background: -webkit-gradient(linear, left top, right top, color-stop(18%,#8266bd), color-stop(100%,#685a93));
1503
background: -webkit-linear-gradient(left,  #8266bd 18%,#685a93 100%);
1504
background: -o-linear-gradient(left,  #8266bd 18%,#685a93 100%);
1505
background: -ms-linear-gradient(left,  #8266bd 18%,#685a93 100%);
1506
background: linear-gradient(to right,  #8266bd 18%,#685a93 100%);
1507
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8266bd', endColorstr='#685a93',GradientType=1 );
1508
width: 140px;
1509
height: 270px;
1510
border-radius: 54px;
1511
border-top-left-radius: 70px;
1512
border-top-right-radius: 70px;
1513
float: left;
1514
left: 412px;
1515
top: 47px;
1516
position: relative;
1517
transition: ease 0.3s all;
1518
-webkit-transition: ease 0.3s all;
1519
}
1520
 
1521
.evil .eyes {left: -8px;
1522
top: 2px;}
1523
 
1524
 
1525
.evil .eyes .brown_eye {background-color: #9860bb;
1526
left: 7px;
1527
transition: all 0.5s ease;
1528
    animation: purble_eye 3s ease 3s infinite;
1529
    -o-animation: purble_eye 3s ease 3s infinite;
1530
    -moz-animation: purble_eye 3s ease 3s infinite;
1531
    -webkit-animation: purble_eye 3s ease 3s infinite;
1532
}
1533
 
1534
 
1535
@-webkit-keyframes purble_eye
1536
{
1537
0%   {left:7px;}
1538
20% {left:17px;}
1539
55% {left:17px;}
1540
100% {left:7px;}
1541
}
1542
 
1543
@-moz-keyframes purble_eye
1544
{
1545
0%   {left:7px;}
1546
20% {left:17px;}
1547
55% {left:17px;}
1548
100% {left:7px;}
1549
}
1550
 
1551
@-o-keyframes purble_eye
1552
{
1553
0%   {left:7px;}
1554
20% {left:17px;}
1555
55% {left:17px;}
1556
100% {left:7px;}
1557
}
1558
 
1559
@keyframes purble_eye
1560
{
1561
0%   {left:7px;}
1562
20% {left:17px;}
1563
55% {left:17px;}
1564
100% {left:7px;}
1565
}
1566
 
1567
 
1568
.evil .eye_animate {background-color: #8266bd;
1569
    animation: evil_eye 3s ease 2s infinite;
1570
    -o-animation: evil_eye 3s ease 2s infinite;
1571
    -moz-animation: evil_eye 3s ease 2s infinite;
1572
    -webkit-animation: evil_eye 3s ease 2s infinite;
1573
    height: 25px;
1574
    border-radius: 0px
1575
 
1576
}
1577
 
1578
 
1579
@-moz-keyframes evil_eye
1580
{
1581
0%   {height:25px;}
1582
20% {height:57px;}
1583
45% {height:25px;}
1584
100% {height:25px;}
1585
}
1586
 
1587
@-o-keyframes evil_eye
1588
{
1589
0%   {height:25px;}
1590
20% {height:57px;}
1591
45% {height:25px;}
1592
100% {height:25px;}
1593
}
1594
 
1595
@-webkit-keyframes evil_eye
1596
{
1597
0%   {height:25px;}
1598
20% {height:57px;}
1599
45% {height:25px;}
1600
100% {height:25px;}
1601
}
1602
 
1603
@keyframes evil_eye
1604
{
1605
0%   {height:25px;}
1606
20% {height:57px;}
1607
45% {height:25px;}
1608
100% {height:25px;}
1609
}
1610
 
1611
.evil .right_tie .top_tie, .evil .right_tie .down_tie {width: 40px;}
1612
 
1613
.evil .right_tie .top_tie:after, .evil .right_tie .down_tie:after {right: 34px;}
1614
 
1615
.evil .left_tie .top_tie:after, .evil .left_tie .down_tie:before {content:none;}
1616
 
1617
.clothes .main_evil {background-color: #303124;
1618
width: 100px;
1619
height: 43px;
1620
top: 143px;
1621
left: 29px;
1622
z-index: 99999;
1623
border-left: 1px dotted #FFF;
1624
border-right: 1px dotted #FFF;}
1625
 
1626
.evil_right_shirt{
1627
background-color: #151612;
1628
width: 67px;
1629
left: 82px;
1630
top: 205px;
1631
border: none;
1632
-webkit-transform:rotate(-43deg);
1633
   -moz-transform:rotate(-43deg);
1634
    -ms-transform:rotate(-43deg);
1635
     -o-transform:rotate(-43deg);
1636
        transform:rotate(-43deg);
1637
}
1638
 
1639
.evil_left_shirt {top: 219px;
1640
background-color: #151612;
1641
width: 23px;
1642
height: 8px;
1643
border: none;
1644
left: -7px;
1645
-webkit-transform:scaleX(-1) rotate(-55deg);
1646
   -moz-transform:scaleX(-1) rotate(-55deg);
1647
    -ms-transform:scaleX(-1) rotate(-55deg);
1648
     -o-transform:scaleX(-1) rotate(-55deg);
1649
        transform:scaleX(-1) rotate(-55deg);}
1650
 
1651
.evil_bottom {background: #303124;
1652
background: -moz-radial-gradient(center, ellipse cover,  #303124 0%, #090a07 99%);
1653
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#303124), color-stop(99%,#090a07));
1654
background: -webkit-radial-gradient(center, ellipse cover,  #303124 0%,#090a07 99%);
1655
background: -o-radial-gradient(center, ellipse cover,  #303124 0%,#090a07 99%);
1656
background: -ms-radial-gradient(center, ellipse cover,  #303124 0%,#090a07 99%);
1657
background: radial-gradient(ellipse at center,  #303124 0%,#090a07 99%);
1658
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303124', endColorstr='#090a07',GradientType=1 );
1659
height: 43px;
1660
width: 138px;
1661
top: 229px;
1662
left: 1px;
1663
border-bottom-right-radius: 50px;
1664
border-bottom-left-radius: 40px;
1665
}
1666
 
1667
 
1668
.evil_bottom:after {position: absolute;
1669
content: '';
1670
background-color: #685A93;
1671
height: 33px;
1672
width: 41px;
1673
left: 97px;
1674
border-radius: 50%;
1675
top: -16px;
1676
}
1677
 
1678
.evil_bottom:before {position: absolute;
1679
content: '';
1680
background: #8266bd;
1681
background: -moz-linear-gradient(left,  #8266bd 28%, #685a93 130%);
1682
background: -webkit-gradient(linear, left top, right top, color-stop(28%,#8266bd), color-stop(130%,#685a93));
1683
background: -webkit-linear-gradient(left,  #8266bd 28%,#685a93 130%);
1684
background: -o-linear-gradient(left,  #8266bd 28%,#685a93 130%);
1685
background: -ms-linear-gradient(left,  #8266bd 28%,#685a93 130%);
1686
background: linear-gradient(to right,  #8266bd 28%,#685a93 130%);
1687
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8266bd', endColorstr='#685a93',GradientType=1 );
1688
height: 33px;
1689
width: 96px;
1690
left: 4px;
1691
border-radius: 50%;
1692
top: -27px;
1693
 
1694
}
1695
 
1696
 
1697
.evil_right_leg {background: #090a07;
1698
background: -moz-linear-gradient(top,  #090a07 0%, #303124 100%);
1699
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#090a07), color-stop(100%,#303124));
1700
background: -webkit-linear-gradient(top,  #090a07 0%,#303124 100%);
1701
background: -o-linear-gradient(top,  #090a07 0%,#303124 100%);
1702
background: -ms-linear-gradient(top,  #090a07 0%,#303124 100%);
1703
background: linear-gradient(to bottom,  #090a07 0%,#303124 100%);
1704
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#090a07', endColorstr='#303124',GradientType=0 );
1705
width: 43px;
1706
height: 16px;
1707
left: 60px;
1708
border-bottom-left-radius: 4px;
1709
top: -20px;}
1710
 
1711
.evil_right_leg:before {position: absolute;
1712
content: '';
1713
border-radius: 50%;
1714
width: 40px;
1715
height: 73px;
1716
left: 29px;
1717
background-color: #FFF;
1718
top: 5px;}
1719
 
1720
.evil_left_leg {left: 18px;
1721
width: 40px;
1722
height: 22px;
1723
top: -27px;
1724
-webkit-transform:scaleX(-1);
1725
   -moz-transform:scaleX(-1);
1726
    -ms-transform:scaleX(-1);
1727
     -o-transform:scaleX(-1);
1728
        transform:scaleX(-1);}
1729
 
1730
.evil_right_shoes {top: -5px;
1731
left: 61px;
1732
border-top-right-radius: 14px;
1733
-webkit-transform:rotate(-2deg);
1734
   -moz-transform:rotate(-2deg);
1735
    -ms-transform:rotate(-2deg);
1736
     -o-transform:rotate(-2deg);
1737
        transform:rotate(-2deg);}
1738
 
1739
.evil_left_shoes {left: 7px;
1740
top: -6px;
1741
-webkit-transform:scaleX(-1);
1742
   -moz-transform:scaleX(-1);
1743
    -ms-transform:scaleX(-1);
1744
     -o-transform:scaleX(-1);
1745
        transform:scaleX(-1);}
1746
 
1747
.evil .small_shoes:before {background-color:#272722}
1748
 
1749
.evil_mouth {width: 90px;
1750
height: 20px;
1751
top: 161px;
1752
-webkit-transform:rotate(0deg);
1753
   -moz-transform:rotate(0deg);
1754
    -ms-transform:rotate(0deg);
1755
     -o-transform:rotate(0deg);
1756
        transform:rotate(0deg);
1757
left: -12px;
1758
border-top-left-radius: 9px;
1759
border-top-right-radius: 60px;
1760
border-bottom-left-radius: 55px;
1761
background: #8266BD;
1762
background: -moz-linear-gradient(left, #8266bd 18%, #685a93 220%);
1763
background: -webkit-gradient(linear, left top, right top, color-stop(18%,#8266BD), color-stop(220%,#685A93));
1764
background: -webkit-linear-gradient(left, #8266BD 18%,#685A93 220%);
1765
background: -o-linear-gradient(left, #8266bd 18%,#685a93 220%);
1766
background: -ms-linear-gradient(left, #8266bd 18%,#685a93 220%);
1767
background: linear-gradient(to right, #8266BD 18%,#685A93 220%);
1768
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8266bd', endColorstr='#685a93',GradientType=1 );
1769
 
1770
 
1771
    animation: evilmouth 3s ease 2s infinite;
1772
     -o-animation: evilmouth 3s ease 2s infinite;
1773
    -moz-animation: evilmouth 3s ease 2s infinite;
1774
    -webkit-animation: evilmouth 3s ease 2s infinite;
1775
 
1776
}
1777
 
1778
 
1779
@-moz-keyframes evilmouth
1780
{
1781
0%   {-moz-transform: rotate(0deg);}
1782
20% {-moz-transform: rotate(12deg);}
1783
45% {-moz-transform: rotate(0deg);}
1784
100% {-moz-transform: rotate(0deg);}
1785
}
1786
 
1787
@-webkit-keyframes evilmouth
1788
{
1789
0%   {-webkit-transform: rotate(0deg);}
1790
20% {-webkit-transform: rotate(12deg);}
1791
45% {-webkit-transform: rotate(0deg);}
1792
100% {-webkit-transform: rotate(0deg);}
1793
}
1794
 
1795
@-o-keyframes evilmouth
1796
{
1797
0%   {-o-transform: rotate(0deg);}
1798
20% {-o-transform: rotate(12deg);}
1799
45% {-o-transform: rotate(0deg);}
1800
100% {-o-transform: rotate(0deg);}
1801
}
1802
 
1803
@keyframes evilmouth
1804
{
1805
0%   {transform: rotate(0deg);}
1806
20% {transform: rotate(12deg);}
1807
45% {transform: rotate(0deg);}
1808
100% {transform: rotate(0deg);}
1809
}
1810
 
1811
.evil_mouth:after  {position: absolute;
1812
content: '';
1813
height: 45px;
1814
left: 5px;
1815
top: -2px;
1816
border-bottom-left-radius: 20px;
1817
border-top-right-radius: 19px;
1818
width: 23px;
1819
-webkit-transform:rotate(-16deg);
1820
   -moz-transform:rotate(-16deg);
1821
    -ms-transform:rotate(-16deg);
1822
     -o-transform:rotate(-16deg);
1823
        transform:rotate(-16deg);
1824
background-color: #8266BD;}
1825
 
1826
 
1827
.evil_teeth {width: 20px;
1828
height: 15px;
1829
top: -16px;
1830
border-top-left-radius: 8px;
1831
left: 20px;
1832
background-color: #F3F3F3;
1833
box-shadow: 6px 0px 5px rgba(0, 0, 0, 0.2);
1834
border-top-right-radius: 6px}
1835
 
1836
 
1837
.evil_teeth:before {position: absolute;
1838
content: '';
1839
width: 11px;
1840
height: 9px;
1841
border-top-left-radius: 8px;
1842
left: -11px;
1843
top: 6px;
1844
background-color: #F3F3F3;
1845
box-shadow: 4px -3px 5px rgba(0, 0, 0, 0.1);
1846
border-top-right-radius: 6px;}
1847
 
1848
.evil_teeth1 {width: 15px;
1849
height: 11px;
1850
top: -12px;
1851
border-top-left-radius: 9px;
1852
left: 47px;
1853
background-color: #F3F3F3;
1854
box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.1);
1855
border-top-right-radius: 4px;}
1856
 
1857
 
1858
.evil_teeth1:before {position: absolute;
1859
content: '';
1860
width: 8px;
1861
height: 6px;
1862
border-top-left-radius: 8px;
1863
left: 17px;
1864
top: 6px;
1865
background-color: #F3F3F3;
1866
box-shadow: 4px -3px 5px rgba(0, 0, 0, 0.1);
1867
border-top-right-radius: 6px;}
1868
 
1869
 
1870
.evil_rh {width: 14px;
1871
height: 66px;
1872
top: 217px;
1873
background-color: #685a93;
1874
left: 132px;
1875
border-bottom-left-radius: 20px;
1876
z-index: 99999;
1877
-webkit-transform:rotate(-16deg);
1878
   -moz-transform:rotate(-16deg);
1879
    -ms-transform:rotate(-16deg);
1880
     -o-transform:rotate(-16deg);
1881
        transform:rotate(-16deg);
1882
}
1883
 
1884
.evil_rh:after {
1885
position: absolute;
1886
content: '';
1887
width: 14px;
1888
height: 44px;
1889
background-color: #685A93;
1890
left: 15px;
1891
top: 40px;
1892
border-top-left-radius: 20px;
1893
-webkit-transform:rotate(-78deg);
1894
   -moz-transform:rotate(-78deg);
1895
    -ms-transform:rotate(-78deg);
1896
     -o-transform:rotate(-78deg);
1897
        transform:rotate(-78deg);
1898
}
1899
 
1900
.evil_gloves_rh {width: 27px;
1901
height: 27px;
1902
top: 51px;
1903
border-radius: 60%;
1904
background-color: #1a1b14;
1905
left: 39px;
1906
z-index: 99999;}
1907
 
1908
.evil_gloves_rh:after {position: absolute;
1909
content: '';
1910
width: 13px;
1911
height: 17px;
1912
left: -5px;
1913
top: 5px;
1914
background-color: #1A1B14;
1915
border-radius: 40%;}
1916
 
1917
.evil_gloves_rh:before {position: absolute;
1918
content: '';
1919
width: 13px;
1920
height: 17px;
1921
left: 2px;
1922
top: -5px;
1923
-webkit-transform:rotate(30deg);
1924
   -moz-transform:rotate(30deg);
1925
    -ms-transform:rotate(30deg);
1926
     -o-transform:rotate(30deg);
1927
        transform:rotate(30deg);
1928
background-color: #1A1B14;
1929
border-radius: 50%;}
1930
 
1931
.evil_lh {width: 14px;
1932
height: 66px;
1933
top: 217px;
1934
background-color: #685A93;
1935
left: -5px;
1936
border-bottom-right-radius: 20px;
1937
-webkit-transform:rotate(8deg);
1938
   -moz-transform:rotate(8deg);
1939
    -ms-transform:rotate(8deg);
1940
     -o-transform:rotate(8deg);
1941
        transform:rotate(8deg);
1942
}
1943
 
1944
.evil_lh:after {
1945
position: absolute;
1946
content: '';
1947
width: 14px;
1948
height: 19px;
1949
background-color: #685A93;
1950
left: -12px;
1951
top: 47px;
1952
border-top-left-radius: 20px;
1953
-webkit-transform:rotate(-68deg);
1954
   -moz-transform:rotate(-68deg);
1955
    -ms-transform:rotate(-68deg);
1956
     -o-transform:rotate(-68deg);
1957
        transform:rotate(-68deg);
1958
}
1959
 
1960
 
1961
.evil_gloves_lh
1962
 {width: 27px;
1963
height: 27px;
1964
top: 34px;
1965
border-radius: 61%;
1966
background-color: #1A1B14;
1967
left: -32px;
1968
z-index: 99999;}
1969
 
1970
.evil_gloves_lh:after {position: absolute;
1971
content: '';
1972
width: 13px;
1973
height: 17px;
1974
left: -5px;
1975
top: 5px;
1976
background-color: #1A1B14;
1977
border-radius: 40%;}
1978
 
1979
.evil_gloves_lh:before {position: absolute;
1980
content: '';
1981
width: 13px;
1982
height: 17px;
1983
left: -1px;
1984
top: 0px;
1985
background-color: #1A1B14;
1986
border-radius: 50%;}
1987
 
1988
ul.evil_hair {list-style: none;}
1989
 
1990
.eh1 {width: 50px;
1991
height: 110px;
1992
background-color: #685A93;
1993
left: 97px;
1994
top: -42px;
1995
border-top-left-radius: 50px;
1996
-webkit-transform:rotate(7deg);
1997
   -moz-transform:rotate(7deg);
1998
    -ms-transform:rotate(7deg);
1999
     -o-transform:rotate(7deg);
2000
        transform:rotate(7deg);}
2001
 
2002
.eh2 {width: 50px;
2003
height: 164px;
2004
background-color: #685A93;
2005
left: 55px;
2006
top: -78px;
2007
border-top-left-radius: 50px;
2008
-webkit-transform:rotate(7deg);
2009
   -moz-transform:rotate(7deg);
2010
    -ms-transform:rotate(7deg);
2011
     -o-transform:rotate(7deg);
2012
        transform:rotate(7deg);}
2013
 
2014
.eh3 {width: 50px;
2015
height: 144px;
2016
background-color: #685A93;
2017
left: 6px;
2018
top: -72px;
2019
border-top-left-radius: 50px;
2020
-webkit-transform:rotate(7deg);
2021
   -moz-transform:rotate(7deg);
2022
    -ms-transform:rotate(7deg);
2023
     -o-transform:rotate(7deg);
2024
        transform:rotate(7deg);}
2025
 
2026
.eh4 {width: 50px;
2027
height: 74px;
2028
background-color: #685A93;
2029
left: 111px;
2030
top: -12px;
2031
border-top-left-radius: 50px;
2032
-webkit-transform:rotate(26deg);
2033
   -moz-transform:rotate(26deg);
2034
    -ms-transform:rotate(26deg);
2035
     -o-transform:rotate(26deg);
2036
        transform:rotate(26deg);}
2037
 
2038
.eh5 {width: 42px;
2039
height: 103px;
2040
background-color: #685A93;
2041
left: -21px;
2042
top: -25px;
2043
border-top-left-radius: 50px;
2044
-webkit-transform:rotate(-24deg);
2045
   -moz-transform:rotate(-24deg);
2046
    -ms-transform:rotate(-24deg);
2047
     -o-transform:rotate(-24deg);
2048
        transform:rotate(-24deg);}
2049
 
2050
.evil h2 {top: 323px;
2051
font-family: tahoma;
2052
font-size: 34px;
2053
font-weight: normal;
2054
left: 33px;
2055
color: #414141;}
2056
 
2057
.evil_logo {width: 13px;
2058
height: 13px;
2059
overflow: hidden;
2060
top: 243px;
2061
border-radius: 50%;
2062
border: 2px solid #D5D5D5;
2063
left: 42px;}
2064
 
2065
.evil_logo p {color: #D5D5D5;
2066
font-size: 15px;
2067
line-height: 17px;
2068
font-family: tahoma;}
2069
 
2070
 
2071
 
2072
/*********************************************/
2073
 
2074
@media (min-width: 992px) and (max-width: 1199px) {
2075
 
2076
 
2077
}
2078
 
2079
@media (min-width: 768px) and (max-width: 991px) {  
2080
 .container {width: 790px;
2081
    -webkit-transform: scale(0.9);
2082
-moz-transform: scale(0.9);
2083
-ms-transform: scale(0.9);
2084
-o-transform: scale(0.9);
2085
transform: scale(0.9);
2086
}
2087
 .jerry {left: 130px;}
2088
 .evil {left: 270px;}
2089
 .bill {margin-left: 10px;}
2090
}
2091
 
2092
@media (max-width: 767px) {
2093
 
2094
.container {width:530px}
2095
 
2096
.bill {margin: 0 auto; float: none;}
2097
 
2098
.jerry {margin: 0 auto;
2099
top: 195px;
2100
float:none;
2101
left:0px;}
2102
 
2103
.evil {margin: 0 auto;
2104
top: 400px;
2105
float:none;
2106
left:0px;
2107
}
2108
 
2109
h6 {margin-bottom: 70px;}
2110
 
2111
}
2112
 
2113
@media (max-width: 400px) {
2114
 
2115
 
2116
    .container {width: 370px;
2117
            -webkit-transform: scale(0.8);
2118
-moz-transform: scale(0.8);
2119
-ms-transform: scale(0.8);
2120
-o-transform: scale(0.8);
2121
transform: scale(0.8);
2122
padding-top: 0px !important;
2123
}
2124
 
2125
h6 {margin-bottom: 80px;}
2126
 
2127
 
2128
}
 

Minions in pure CSS

CSSDeck G+