PluginProbe
AWSM Team – Team Showcase Plugin / trunk
AWSM Team – Team Showcase Plugin vtrunk
trunk 1.0 1.1 1.1.2 1.2.1 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4
awsm-team / css / team.css

team.css in AWSM Team – Team Showcase Plugin trunk, at css/team.css

1,381 lines 29.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @font-face {
2 font-family: 'awsmicon';
3 src: url('fonts/icomoon.eot');
4 src: url('fonts/icomoon.eot') format('embedded-opentype'), url('fonts/icomoon.ttf') format('truetype'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.svg') format('svg');
5 font-weight: normal;
6 font-style: normal;
7 }
8
9 [class^="awsm-icon-"],
10 [class*=" awsm-icon-"] {
11
12 /* use !important to prevent issues with browser extensions that change fonts */
13 font-family: 'awsmicon' !important;
14 speak: none;
15 font-style: normal;
16 font-weight: normal;
17 font-variant: normal;
18 text-transform: none;
19 line-height: 1; /* Better Font Rendering =========== */
20 -webkit-font-smoothing: antialiased;
21 -moz-osx-font-smoothing: grayscale;
22 }
23
24 .awsm-icon-viber:before {
25 content: "\e923";
26 }
27 .awsm-icon-slack:before {
28 content: "\e924";
29 }
30 .awsm-icon-discord:before {
31 content: "\e925";
32 }
33 .awsm-icon-mixer:before {
34 content: "\e926";
35 }
36 .awsm-icon-arrow-down:before {
37 content: "\e60f";
38 }
39 .awsm-icon-arrow-left:before {
40 content: "\e610";
41 }
42 .awsm-icon-arrow-right:before {
43 content: "\e611";
44 }
45 .awsm-icon-close:before {
46 content: "\e612";
47 }
48 .awsm-icon-yelp:before {
49 content: "\e900";
50 }
51 .awsm-icon-github:before {
52 content: "\e901";
53 }
54 .awsm-icon-flattr:before {
55 content: "\e902";
56 }
57 .awsm-icon-xing:before {
58 content: "\e903";
59 }
60 .awsm-icon-xing2:before {
61 content: "\e904";
62 }
63 .awsm-icon-stumbleupon:before {
64 content: "\e905";
65 }
66 .awsm-icon-stumbleupon2:before {
67 content: "\e906";
68 }
69 .awsm-icon-delicious:before {
70 content: "\e907";
71 }
72 .awsm-icon-lastfm:before {
73 content: "\e908";
74 }
75 .awsm-icon-lastfm2:before {
76 content: "\e909";
77 }
78 .awsm-icon-hackernews:before {
79 content: "\e90a";
80 }
81 .awsm-icon-reddit:before {
82 content: "\e90b";
83 }
84 .awsm-icon-soundcloud:before {
85 content: "\e90c";
86 }
87 .awsm-icon-soundcloud2:before {
88 content: "\e90d";
89 }
90 .awsm-icon-yahoo:before {
91 content: "\e90e";
92 }
93 .awsm-icon-blogger2:before {
94 content: "\e90f";
95 }
96 .awsm-icon-ello:before {
97 content: "\e910";
98 }
99 .awsm-icon-wordpress2:before {
100 content: "\e911";
101 }
102 .awsm-icon-steam:before {
103 content: "\e912";
104 }
105 .awsm-icon-steam2:before {
106 content: "\e913";
107 }
108 .awsm-icon-500px:before {
109 content: "\e914";
110 }
111 .awsm-icon-deviantart:before {
112 content: "\e915";
113 }
114 .awsm-icon-twitch:before {
115 content: "\e916";
116 }
117 .awsm-icon-feed:before {
118 content: "\e917";
119 }
120 .awsm-icon-feed2:before {
121 content: "\e918";
122 }
123 .awsm-icon-sina-weibo:before {
124 content: "\e919";
125 }
126 .awsm-icon-renren:before {
127 content: "\e91a";
128 }
129 .awsm-icon-vk:before {
130 content: "\e91b";
131 }
132 .awsm-icon-vine:before {
133 content: "\e91c";
134 }
135 .awsm-icon-telegram:before {
136 content: "\e91d";
137 }
138 .awsm-icon-spotify:before {
139 content: "\e91e";
140 }
141 .awsm-icon-mail2:before {
142 content: "\e91f";
143 }
144 .awsm-icon-mail3:before {
145 content: "\e920";
146 }
147 .awsm-icon-check:before {
148 content: "\e921";
149 }
150 .awsm-icon-mail:before {
151 content: "\e945";
152 }
153 .awsm-icon-link:before {
154 content: "\e9cb";
155 }
156 .awsm-icon-google-plus:before {
157 content: "\ea8b";
158 }
159 .awsm-icon-google-plus2:before {
160 content: "\ea8c";
161 }
162 .awsm-icon-hangouts:before {
163 content: "\ea8e";
164 }
165 .awsm-icon-google-drive:before {
166 content: "\ea8f";
167 }
168 .awsm-icon-facebook:before {
169 content: "\ea90";
170 }
171 .awsm-icon-facebook2:before {
172 content: "\ea91";
173 }
174 .awsm-icon-instagram:before {
175 content: "\ea92";
176 }
177 .awsm-icon-whatsapp:before {
178 content: "\ea93";
179 }
180 .awsm-icon-twitter:before {
181 content: "\ea96";
182 }
183 .awsm-icon-youtube:before {
184 content: "\ea9d";
185 }
186 .awsm-icon-vimeo:before {
187 content: "\eaa0";
188 }
189 .awsm-icon-vimeo2:before {
190 content: "\eaa1";
191 }
192 .awsm-icon-flickr:before {
193 content: "\eaa3";
194 }
195 .awsm-icon-flickr2:before {
196 content: "\eaa4";
197 }
198 .awsm-icon-dribbble:before {
199 content: "\eaa7";
200 }
201 .awsm-icon-behance:before {
202 content: "\eaa8";
203 }
204 .awsm-icon-behance2:before {
205 content: "\eaa9";
206 }
207 .awsm-icon-dropbox:before {
208 content: "\eaae";
209 }
210 .awsm-icon-wordpress:before {
211 content: "\eab4";
212 }
213 .awsm-icon-blogger:before {
214 content: "\eab8";
215 }
216 .awsm-icon-tumblr:before {
217 content: "\eab9";
218 }
219 .awsm-icon-tumblr2:before {
220 content: "\eaba";
221 }
222 .awsm-icon-skype:before {
223 content: "\eac5";
224 }
225 .awsm-icon-linkedin2:before {
226 content: "\eac9";
227 }
228 .awsm-icon-linkedin:before {
229 content: "\eaca";
230 }
231 .awsm-icon-stackoverflow:before {
232 content: "\ead0";
233 }
234 .awsm-icon-pinterest2:before {
235 content: "\ead1";
236 }
237 .awsm-icon-pinterest:before {
238 content: "\ead2";
239 }
240 .awsm-icon-foursquare:before {
241 content: "\ead6";
242 }
243 .awsm-icon-snapchat-ghost:before {
244 content: "\e927";
245 }
246 .awsm-icon-imdb:before {
247 content: "\e928";
248 }
249 .awsm-icon-meetup:before {
250 content: "\e929";
251 }
252 .awsm-icon-wechat:before {
253 content: "\e92a";
254 }
255 .awsm-icon-weixin:before {
256 content: "\e92a";
257 }
258 .awsm-icon-quora:before {
259 content: "\e922";
260 }
261 .awsm-icon-phone:before {
262 content: "\e942";
263 }
264
265 .awsm-grid-wrapper,
266 .awsm-grid-wrapper *,
267 .awsm-grid-wrapper::before,
268 .awsm-grid-wrapper::after {
269 -moz-box-sizing: border-box;
270 -webkit-box-sizing: border-box;
271 box-sizing: border-box;
272 }
273
274 .awsm-grid-wrapper figcaption,
275 .awsm-grid-wrapper figure {
276 display: block;
277 }
278
279 .awsm-grid-wrapper figure {
280 margin: 0;
281 -webkit-margin-before: 0;
282 -webkit-margin-after: 0;
283 -webkit-margin-start: 0;
284 -webkit-margin-end: 0;
285 }
286
287 .awsm-personal-info,
288 .awsm-contact-info,
289 .awsm-flip-front,
290 .awsm-flip-back-inner {
291 display: block;
292 }
293
294 .awsm-grid-wrapper a {
295 color: #aaa;
296 text-decoration: none;
297 }
298
299 .awsm-grid-wrapper a:hover,
300 .awsm-grid-wrapper a:active {
301 color: #333;
302 }
303
304 .grid-style,
305 .circles-style {
306 line-height: 1.2;
307 }
308
309 .clearfix::after,
310 .awsm-grid::after {
311 content: "";
312 clear: both;
313 display: block;
314 }
315
316 .awsm-grid-wrapper .awsm-grid {
317 list-style: none;
318 padding: 30px 0;
319 margin: 0 -15px;
320 }
321
322 .awsm-grid-wrapper .awsm-grid.drawer-style {
323 margin: 0;
324 }
325
326 .awsm-grid-wrapper .awsm-grid > .awsm-grid-card {
327 float: left;
328 width: 25%;
329 padding: 0 15px;
330 margin: 0 0 30px;
331 clear: none;
332 }
333
334 .awsm-grid-wrapper .grid-2-col > .awsm-grid-card {
335 width: 50%;
336 }
337
338 .awsm-grid-wrapper .grid-3-col > .awsm-grid-card {
339 width: 33.33%;
340 }
341
342 .awsm-grid-wrapper .grid-4-col > .awsm-grid-card {
343 width: 25%;
344 }
345
346 .awsm-grid-wrapper .grid-5-col > .awsm-grid-card {
347 width: 20%;
348 }
349
350 figure {
351 overflow: hidden;
352 }
353
354 .awsm-grid-wrapper a {
355 text-decoration: none;
356 -webkit-box-shadow: none;
357 box-shadow: none;
358 border-bottom: 0;
359 outline: none;
360 }
361
362 .awsm-grid-wrapper p {
363 line-height: 1.4;
364 }
365
366 .awsm-grid figure {
367 position: relative;
368 margin: 0;
369 }
370
371 .awsm-grid figure img {
372 width: 100%;
373 display: block;
374 position: relative;
375 margin: 0;
376 border: none;
377 }
378
379 .awsm-grid-wrapper .awsm-grid h3 {
380 margin: 0 0 3px;
381 padding: 0;
382 font-size: 1.17em;
383 line-height: 1.4;
384 color: #1f1f1f;
385 }
386
387 .awsm-grid-wrapper ul {
388 list-style: none;
389 line-height: normal;
390 }
391
392 .awsm-grid-wrapper .awsm-social-icons {
393 padding: 0;
394 margin: 0 -5px;
395 }
396
397 .awsm-social-icons span {
398 display: inline-block;
399 padding: 0 5px;
400 margin-bottom: 2px;
401 }
402
403 .awsm-social-icons a {
404 display: block;
405 -webkit-transition: -webkit-transform 0.3s;
406 -moz-transition: -moz-transform 0.3s;
407 transition: -webkit-transform 0.3s;
408 -moz-transition: transform 0.3s, -moz-transform 0.3s;
409 transition: transform 0.3s;
410 transition: transform 0.3s, -webkit-transform 0.3s, -moz-transform 0.3s;
411 line-height: 1;
412 }
413
414 .awsm-social-icons a:hover {
415 -moz-transform: translateY(-4px);
416 -webkit-transform: translateY(-4px);
417 -ms-transform: translateY(-4px);
418 transform: translateY(-4px);
419 }
420
421 .awsm-grid-wrapper .awsm-contact-details {
422 margin-bottom: 20px;
423 }
424
425 .awsm-contact-details > p {
426 padding: 10px 0;
427 margin: 0 !important;
428 border-bottom: 1px dotted rgba(35, 35, 35, 0.2);
429 }
430
431 .awsm-contact-details span {
432 min-width: 100px;
433 margin-right: 6px;
434 }
435
436 figcaption p {
437 font-size: 14px;
438 }
439
440 figure figcaption a,
441 .drawer-style a {
442 -webkit-box-shadow: none;
443 box-shadow: none;
444 border-bottom: 0;
445 }
446
447 .awsm-grid-nav {
448 display: none !important;
449 }
450
451 .awsm-content-scrollbar {
452 padding-right: 30px;
453 }
454
455 .awsm-personal-details {
456 max-height: 293px;
457 overflow: hidden;
458 }
459
460 .awsm-personal-info {
461 position: relative;
462 margin-bottom: 15px;
463 }
464
465 .awsm-personal-info span {
466 text-transform: uppercase;
467 font-size: 0.815em;
468 line-height: 1.4;
469 display: block;
470 }
471
472 .awsm-contact-info p {
473 margin: 0 0 15px;
474 line-height: normal;
475 color: #1f1f1f;
476 }
477
478 .awsm-coming-soon {
479 text-align: center;
480 color: #333;
481 }
482
483 .awsm-grid-wrapper a.awsm-nav-item,
484 .awsm-grid-wrapper a.awsm-modal-close,
485 .awsm-grid-wrapper .awsm-contact-details a,
486 .awsm-grid-wrapper .awsm-social-icons a {
487 text-decoration: none;
488 border: none;
489 }
490
491 @media (max-width:1230px) {
492 .awsm-grid-wrapper .grid-5-col > .awsm-grid-card {
493 width: 25%;
494 }
495
496 }
497
498 @media (max-width:1024px) {
499 .awsm-grid-wrapper .awsm-grid > .awsm-grid-card {
500 width: 33.333%;
501 }
502
503 .awsm-grid-wrapper .grid-2-col > .awsm-grid-card {
504 width: 50%;
505 }
506
507 }
508
509 @media (max-width:992px) {
510 .awsm-grid-wrapper .awsm-grid > .awsm-grid-card {
511 width: 50%;
512 }
513
514 }
515
516 @media (max-width:678px) {
517 .awsm-grid-wrapper .awsm-grid > .awsm-grid-card {
518 width: 100%;
519 }
520
521 }
522
523 /****************** Presets ***********************/
524
525 /*------------- Cards 1-----------*/
526 .cards-style.style-1 figure {
527 overflow: hidden;
528 padding: 30px 0 100px;
529 background: #fff;
530 border: 1px solid rgba(0, 0, 0, 0.1);
531 }
532
533 .cards-style.style-1 figure::before {
534 content: "";
535 background: rgba(255, 255, 255, 0.9); /* FF3.6-15 */
536 background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 37%, rgba(255, 255, 255, 1) 78%, rgba(255, 255, 255, 1) 100%); /* Chrome10-25,Safari5.1-6 */
537 background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(37%, rgba(255, 255, 255, 0.6)), color-stop(78%, rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 1)));
538 background: -moz- oldlinear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 37%, rgba(255, 255, 255, 1) 78%, rgba(255, 255, 255, 1) 100%);
539 background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 37%, rgba(255, 255, 255, 1) 78%, rgba(255, 255, 255, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
540 position: absolute;
541 top: 0;
542 right: 0;
543 bottom: 0;
544 left: 0;
545 -moz-transform: translateY(100%) translateY(-90px);
546 -webkit-transform: translateY(100%) translateY(-90px);
547 -ms-transform: translateY(100%) translateY(-90px);
548 transform: translateY(100%) translateY(-90px);
549 -webkit-transition: -webkit-transform 0.4s;
550 -moz-transition: -moz-transform 0.4s;
551 transition: -webkit-transform 0.4s;
552 -moz-transition: transform 0.4s, -moz-transform 0.4s;
553 transition: transform 0.4s;
554 transition: transform 0.4s, -webkit-transform 0.4s, -moz-transform 0.4s;
555 z-index: 1;
556 }
557
558 .cards-style.style-1 figure img {
559 -webkit-transition: -webkit-transform 0.8s;
560 -moz-transition: -moz-transform 0.8s;
561 transition: -webkit-transform 0.8s;
562 -moz-transition: transform 0.8s, -moz-transform 0.8s;
563 transition: transform 0.8s;
564 transition: transform 0.8s, -webkit-transform 0.8s, -moz-transform 0.8s;
565 border-radius: 50%;
566 -webkit-border-radius: 50%;
567 max-width: 160px !important;
568 margin: 0 auto;
569 display: block;
570 }
571
572 .cards-style.style-1 figcaption {
573 bottom: 0;
574 left: 0;
575 right: 0;
576 position: absolute;
577 padding: 30px 20px;
578 -webkit-backface-visibility: hidden;
579 -moz-backface-visibility: hidden;
580 backface-visibility: hidden;
581 -moz-transform: translateY(-moz-calc(100% - 100px));
582 -webkit-transform: translateY(-webkit-calc(100% - 100px));
583 -ms-transform: translateY(calc(100% - 100px));
584 transform: translateY(calc(100% - 100px));
585 -webkit-transition: -webkit-transform 0.4s;
586 -moz-transition: -moz-transform 0.4s;
587 transition: -webkit-transform 0.4s;
588 -moz-transition: transform 0.4s, -moz-transform 0.4s;
589 transition: transform 0.4s;
590 transition: transform 0.4s, -webkit-transform 0.4s, -moz-transform 0.4s;
591 text-align: center;
592 z-index: 2;
593 color: #000;
594 }
595
596 .cards-style.style-1 figcaption a {
597 color: #000;
598 }
599
600 .cards-style.style-1 figcaption p {
601 font-size: 14px;
602 }
603
604 .cards-style.style-1 .awsm-contact-info {
605 -webkit-transform: translateY(100%);
606 -moz-transform: translateY(100%);
607 -ms-transform: translateY(100%);
608 transform: translateY(100%);
609 -webkit-backface-visibility: hidden;
610 -moz-backface-visibility: hidden;
611 backface-visibility: hidden;
612 -webkit-transition: -webkit-transform 0.4s;
613 -moz-transition: -moz-transform 0.4s;
614 transition: -webkit-transform 0.4s;
615 -moz-transition: transform 0.4s, -moz-transform 0.4s;
616 transition: transform 0.4s;
617 transition: transform 0.4s, -webkit-transform 0.4s, -moz-transform 0.4s;
618 opacity: 0;
619 visibility: hidden;
620 }
621
622 .no-touchevents .cards-style.style-1 figure:hover img,
623 .cards-style.style-1 figure.cs-hover img {
624 -webkit-transform: scale(1.1);
625 -moz-transform: scale(1.1);
626 -ms-transform: scale(1.1);
627 transform: scale(1.1);
628 }
629
630 .no-touchevents .cards-style.style-1 figure:hover figcaption,
631 .cards-style.style-1 figure.cs-hover figcaption,
632 .no-touchevents .cards-style.style-1 figure:hover::before,
633 .cards-style.style-1 figure.cs-hover::before {
634 -webkit-transform: translateY(0px) translateY(0px);
635 -moz-transform: translateY(0px) translateY(0px);
636 -ms-transform: translateY(0px) translateY(0px);
637 transform: translateY(0px) translateY(0px);
638 }
639
640 .no-touchevents .cards-style.style-1 figure:hover .awsm-contact-info,
641 .cards-style.style-1 figure.cs-hover .awsm-contact-info {
642 -webkit-transform: translateY(0px);
643 -moz-transform: translateY(0px);
644 -ms-transform: translateY(0px);
645 transform: translateY(0px);
646 opacity: 1;
647 visibility: visible;
648 }
649
650 /*------------- Cards 2-----------*/
651 .cards-style .awsm-flip-back {
652 font-size: 0;
653 }
654
655 .cards-style figcaption::after {
656 content: "";
657 height: 100%;
658 display: inline-block;
659 vertical-align: middle;
660 width: 1px;
661 }
662
663 .cards-style .awsm-flip-back-inner {
664 display: inline-block;
665 width: -webkit-calc(100% - 1px);
666 width: -moz-calc(100% - 1px);
667 width: calc(100% - 1px);
668 vertical-align: middle;
669 font-size: 14px;
670 }
671
672 .cards-style.style-2 figure {
673 overflow: hidden;
674 text-align: center;
675 }
676
677 .cards-style.style-2 figure {
678 -webkit-transform-style: preserve-3d;
679 -moz-transform-style: preserve-3d;
680 transform-style: preserve-3d;
681 }
682
683 .cards-style.style-2 figure img {
684 border-radius: 50%;
685 -webkit-border-radius: 50%;
686 max-width: 160px !important;
687 margin: 0 auto;
688 display: block;
689 }
690
691 .cards-style.style-2 .awsm-flip-front,
692 .cards-style.style-2 figcaption {
693 -webkit-backface-visibility: hidden;
694 -moz-backface-visibility: hidden;
695 backface-visibility: hidden;
696 padding: 30px 20px;
697 background: #fff;
698 border: 1px solid rgba(0, 0, 0, 0.1);
699 color: #000;
700 -webkit-transition: -webkit-transform 0.6s, z-index 0.7s;
701 -moz-transition: -moz-transform 0.6s, z-index 0.7s;
702 -webkit-transition: z-index 0.7s, -webkit-transform 0.6s;
703 transition: z-index 0.7s, -webkit-transform 0.6s;
704 -moz-transition: transform 0.6s, z-index 0.7s, -moz-transform 0.6s;
705 transition: transform 0.6s, z-index 0.7s;
706 transition: transform 0.6s, z-index 0.7s, -webkit-transform 0.6s, -moz-transform 0.6s;
707 }
708
709 .cards-style.style-2 .awsm-flip-front {
710 -moz-transform: rotateY(0deg);
711 -webkit-transform: rotateY(0deg);
712 -ms-transform: rotateY(0deg);
713 transform: rotateY(0deg);
714 position: relative;
715 }
716
717 .cards-style.style-2 .awsm-flip-front .awsm-personal-info {
718 padding-top: 20px;
719 }
720
721 .cards-style.style-2 figcaption {
722 -moz-transform: rotateY(180deg);
723 -webkit-transform: rotateY(180deg);
724 -ms-transform: rotateY(180deg);
725 transform: rotateY(180deg);
726 position: absolute;
727 left: 0;
728 top: 0;
729 right: 0;
730 bottom: 0;
731 }
732
733 .cards-style.style-2 figcaption a {
734 color: #000;
735 }
736
737 .no-touchevents .cards-style.style-2 figure:hover .awsm-flip-front,
738 .cards-style.style-2 figure.cs-hover .awsm-flip-front {
739 -moz-transform: rotateY(180deg);
740 -webkit-transform: rotateY(180deg);
741 -ms-transform: rotateY(180deg);
742 transform: rotateY(180deg);
743 }
744
745 .no-touchevents .cards-style.style-2 figure:hover figcaption,
746 .cards-style.style-2 figure.cs-hover figcaption {
747 -moz-transform: rotateY(0deg);
748 -webkit-transform: rotateY(0deg);
749 -ms-transform: rotateY(0deg);
750 transform: rotateY(0deg);
751 }
752
753 /*------------- Cards 3-----------*/
754 .cards-style.style-3 figure {
755 overflow: hidden;
756 padding: 20px 20px 100px;
757 background: #fff;
758 border: 1px solid rgba(0, 0, 0, 0.1);
759 }
760
761 .cards-style.style-3 figure::before {
762 content: "";
763 background: rgba(255, 255, 255, 0.9); /* FF3.6-15 */
764 background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 1) 78%, rgba(255, 255, 255, 1) 100%); /* Chrome10-25,Safari5.1-6 */
765 background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.3)), color-stop(20%, rgba(255, 255, 255, 0.6)), color-stop(78%, rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 1)));
766 background: -moz- oldlinear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 1) 78%, rgba(255, 255, 255, 1) 100%);
767 background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 1) 78%, rgba(255, 255, 255, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
768 position: absolute;
769 top: 0;
770 right: 0;
771 bottom: 0;
772 left: 0;
773 -moz-transform: translateY(100%) translateY(-90px);
774 -webkit-transform: translateY(100%) translateY(-90px);
775 -ms-transform: translateY(100%) translateY(-90px);
776 transform: translateY(100%) translateY(-90px);
777 -webkit-transition: -webkit-transform 0.4s;
778 -moz-transition: -moz-transform 0.4s;
779 transition: -webkit-transform 0.4s;
780 -moz-transition: transform 0.4s, -moz-transform 0.4s;
781 transition: transform 0.4s;
782 transition: transform 0.4s, -webkit-transform 0.4s, -moz-transform 0.4s;
783 z-index: 1;
784 }
785
786 .cards-style.style-3 figure img {
787 -webkit-transition: -webkit-transform 0.8s;
788 -moz-transition: -moz-transform 0.8s;
789 transition: -webkit-transform 0.8s;
790 -moz-transition: transform 0.8s, -moz-transform 0.8s;
791 transition: transform 0.8s;
792 transition: transform 0.8s, -webkit-transform 0.8s, -moz-transform 0.8s;
793 }
794
795 .cards-style.style-3 figcaption {
796 bottom: 0;
797 left: 0;
798 right: 0;
799 position: absolute;
800 padding: 30px 20px;
801 -webkit-backface-visibility: hidden;
802 -moz-backface-visibility: hidden;
803 backface-visibility: hidden;
804 -moz-transform: translateY(100%) translateY(-100px);
805 -webkit-transform: translateY(100%) translateY(-100px);
806 -ms-transform: translateY(100%) translateY(-100px);
807 transform: translateY(100%) translateY(-100px);
808 -webkit-transition: -webkit-transform 0.4s;
809 -moz-transition: -moz-transform 0.4s;
810 transition: -webkit-transform 0.4s;
811 -moz-transition: transform 0.4s, -moz-transform 0.4s;
812 transition: transform 0.4s;
813 transition: transform 0.4s, -webkit-transform 0.4s, -moz-transform 0.4s;
814 text-align: center;
815 z-index: 2;
816 color: #000;
817 }
818
819 .cards-style.style-3 figcaption a {
820 color: #000;
821 }
822
823 .cards-style.style-3 figcaption p {
824 font-size: 14px;
825 }
826
827 .cards-style.style-3 .awsm-contact-info {
828 -webkit-transform: translateY(100%);
829 -moz-transform: translateY(100%);
830 -ms-transform: translateY(100%);
831 transform: translateY(100%);
832 -webkit-backface-visibility: hidden;
833 -moz-backface-visibility: hidden;
834 backface-visibility: hidden;
835 -webkit-transition: -webkit-transform 0.4s;
836 -moz-transition: -moz-transform 0.4s;
837 transition: -webkit-transform 0.4s;
838 -moz-transition: transform 0.4s, -moz-transform 0.4s;
839 transition: transform 0.4s;
840 transition: transform 0.4s, -webkit-transform 0.4s, -moz-transform 0.4s;
841 opacity: 0;
842 visibility: hidden;
843 }
844
845 .no-touchevents .cards-style.style-3 figure:hover img,
846 .cards-style.style-3 figure.cs-hover img {
847 -webkit-transform: scale(1.1);
848 -moz-transform: scale(1.1);
849 -ms-transform: scale(1.1);
850 transform: scale(1.1);
851 }
852
853 .no-touchevents .cards-style.style-3 figure:hover figcaption,
854 .cards-style.style-3 figure.cs-hover figcaption,
855 .no-touchevents .cards-style.style-3 figure:hover::before,
856 .cards-style.style-3 figure.cs-hover::before {
857 -webkit-transform: translateY(0px) translateY(0px);
858 -moz-transform: translateY(0px) translateY(0px);
859 -ms-transform: translateY(0px) translateY(0px);
860 transform: translateY(0px) translateY(0px);
861 }
862
863 .no-touchevents .cards-style.style-3 figure:hover .awsm-contact-info,
864 .cards-style.style-3 figure.cs-hover .awsm-contact-info {
865 -webkit-transform: translateY(0px);
866 -moz-transform: translateY(0px);
867 -ms-transform: translateY(0px);
868 transform: translateY(0px);
869 opacity: 1;
870 visibility: visible;
871 }
872
873 /*------------- Cards 4 -----------*/
874 .cards-style.style-4 {
875 display: -webkit-box;
876 display: -moz-box;
877 display: -ms-flexbox;
878 display: -webkit-flex;
879 display: flex;
880 -webkit-box-orient: horizontal;
881 -webkit-box-direction: normal;
882 -moz-box-orient: horizontal;
883 -moz-box-direction: normal;
884 -ms-flex-flow: row wrap;
885 flex-flow: row wrap;
886 -webkit-flex-flow: row wrap;
887 }
888
889 .cards-style.style-4::after {
890 display: none;
891 }
892
893 .cards-style.style-4 figure {
894 padding: 20px 20px 0;
895 background: #fff;
896 border: 1px solid rgba(0, 0, 0, 0.1);
897 position: relative;
898 }
899
900 .cards-style.style-4 figure img {
901 -webkit-transition: -webkit-transform 0.5s;
902 -moz-transition: -moz-transform 0.5s;
903 transition: -webkit-transform 0.5s;
904 -moz-transition: transform 0.5s, -moz-transform 0.5s;
905 transition: transform 0.5s;
906 transition: transform 0.5s, -webkit-transform 0.5s, -moz-transform 0.5s;
907 }
908
909 .cards-style.style-4 figcaption {
910 padding: 20px;
911 text-align: center;
912 z-index: 2;
913 color: #000;
914 }
915
916 .cards-style.style-4 figcaption a {
917 color: #000;
918 }
919
920 .cards-style.style-4 figcaption p {
921 font-size: 14px;
922 }
923
924 .no-touchevents .cards-style.style-4 figure:hover img,
925 .cards-style.style-4 figure.cs-hover img {
926 -webkit-transform: scale(1.05);
927 -moz-transform: scale(1.05);
928 -ms-transform: scale(1.05);
929 transform: scale(1.05);
930 }
931
932
933
934 .drawer-style.style-1 figcaption {
935 position: absolute;
936 left: 25px;
937 right: 25px;
938 top: 25px;
939 bottom: 25px;
940 padding: 30px;
941 background: rgba(35, 35, 35, 0.8);
942 color: #fff;
943 text-align: center;
944 opacity: 0;
945 -webkit-backface-visibility: hidden;
946 -moz-backface-visibility: hidden;
947 backface-visibility: hidden;
948 -ms-transform: scale(0.6);
949 transform: scale(0.6);
950 -webkit-transform: scale(0.6);
951 -moz-transform: scale(0.6);
952 -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
953 -moz-transition: -moz-transform 0.2s, opacity 0.2s;
954 -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
955 transition: opacity 0.2s, -webkit-transform 0.2s;
956 -moz-transition: transform 0.2s, opacity 0.2s, -moz-transform 0.2s;
957 transition: transform 0.2s, opacity 0.2s;
958 transition: transform 0.2s, opacity 0.2s, -webkit-transform 0.2s, -moz-transform 0.2s;
959 font-size: 0;
960 }
961
962 /*------------- List 4-----------*/
963 .list-style figure img {
964 max-width: 300px !important;
965 }
966
967 .awsm-grid.list-style figcaption {
968 overflow: hidden;
969 }
970
971 .awsm-grid.list-style > .awsm-grid-card {
972 width: 100%;
973 float: none;
974 border-bottom: 1px solid rgba(35, 35, 35, 0.2);
975 padding: 0 0 40px 0;
976 margin-bottom: 40px;
977 }
978
979 .awsm-grid.list-style > li:last-child {
980 border-bottom: 0;
981 margin-bottom: 0;
982 }
983
984 .awsm-grid.list-style h3 {
985 font-size: 36px;
986 margin: 0 0 10px;
987 line-height: 1.1;
988 }
989
990 .awsm-grid.list-style .awsm-personal-info span {
991 font-size: 14px;
992 }
993
994 .awsm-grid-wrapper .awsm-grid.list-style {
995 margin: 0;
996 padding: 0;
997 }
998
999 .list-style .awsm-personal-info h3 {
1000 font-size: 18px;
1001 margin: 0 0 5px;
1002 line-height: 1.1;
1003 }
1004
1005 .list-style figure {
1006 color: #111;
1007 }
1008
1009 .list-style figcaption p {
1010 font-size: 16px;
1011 }
1012
1013 .list-style .awsm-social-icons span {
1014 border: 1px solid;
1015 margin: 0 5px 2px 5px;
1016 text-align: center;
1017 padding: 0;
1018 }
1019
1020 .list-style .awsm-contact-info a {
1021 color: #111;
1022 padding: 10px 0;
1023 width: 40px;
1024 }
1025
1026 .list-style.style-1 .awsm-contact-info {
1027 font-size: 16px;
1028 }
1029
1030 .list-style.style-1 figure img {
1031 float: left;
1032 margin-right: 30px;
1033 }
1034
1035 /*------------- List 2-----------*/
1036 .list-style.style-2 figure img {
1037 float: right;
1038 margin-left: 30px;
1039 }
1040
1041
1042 /*------------ Table 1 -----------*/
1043 .awsm-table {
1044 display: table;
1045 width: 100%;
1046 color: #111;
1047 }
1048
1049 .awsm-table-row {
1050 display: table-row;
1051 }
1052
1053 .awsm-table-cell {
1054 display: table-cell;
1055 padding: 10px;
1056 vertical-align: middle;
1057 }
1058
1059 .awsm-table-row.awsm-table-head .awsm-table-cell {
1060 border: none;
1061 }
1062
1063 .awsm-table-cell .awsm-table-cell-inner {
1064 max-width: 400px;
1065 }
1066
1067 .table-style .awsm-table-img-holder {
1068 max-width: 75px;
1069 }
1070
1071 .awsm-table-cell .awsm-social-icons a {
1072 color: #111;
1073 }
1074
1075 .table-style .awsm-table-cell h3 {
1076 font-size: 16px;
1077 font-weight: normal;
1078 margin: 0;
1079 padding: 0;
1080 line-height: 1.235;
1081 }
1082
1083 .table-style .awsm-table-cell h2 {
1084 font-size: 16px;
1085 margin: 0;
1086 padding: 0;
1087 line-height: 1.235;
1088 }
1089
1090 .table-style .awsm-table-cell p {
1091 margin-bottom: 10px;
1092 }
1093
1094 .awsm-table-description .awsm-table-cell-inner {
1095 min-width: 240px;
1096 }
1097
1098 .awsm-table.style-1 .awsm-table-row.awsm-table-head .awsm-table-cell {
1099 border-bottom: 2px solid #ccc;
1100 }
1101
1102 .awsm-table.style-1 .awsm-table-cell {
1103 border-bottom: 1px solid #ccc;
1104 }
1105
1106 /*------------ Table 2 -----------*/
1107 .awsm-table.style-2 .awsm-table-row.awsm-table-head .awsm-table-cell {
1108 border-bottom: none;
1109 }
1110
1111 .awsm-table.style-2 .awsm-table-cell {
1112 border-bottom: none;
1113 }
1114
1115 .awsm-table.style-2 .awsm-table-row:nth-child(2n+1) {
1116 background-color: rgba(113, 113, 113, 0.04);
1117 }
1118
1119 .awsm-table.style-2 .awsm-table-row.awsm-table-head {
1120 background-color: #eee;
1121 }
1122
1123 /*------------ Table 3 -----------*/
1124 .awsm-table.style-3 .awsm-table-row.awsm-table-head .awsm-table-cell {
1125 background-color: #eee;
1126 }
1127
1128 .awsm-table.style-3 .awsm-table-cell {
1129 border-bottom: 1px solid #ddd;
1130 }
1131
1132 .awsm-table.style-3 .awsm-table-row:first-child .awsm-table-cell {
1133 border-top: 1px solid #ddd;
1134 }
1135
1136 .awsm-table.style-3 .awsm-table-row .awsm-table-cell:first-child {
1137 border-left: 1px solid #ddd;
1138 }
1139
1140 .awsm-table.style-3 .awsm-table-row .awsm-table-cell:last-child {
1141 border-right: 1px solid #ddd;
1142 }
1143
1144 @keyframes DownMove {
1145 0% {
1146 top: 50%;
1147 }
1148
1149 5% {
1150 top: 60%;
1151 }
1152
1153 10% {
1154 top: 50%;
1155 }
1156
1157 15% {
1158 top: 60%;
1159 }
1160
1161 20% {
1162 top: 50%;
1163 }
1164
1165 }
1166
1167 @-webkit-keyframes DownMove {
1168 0% {
1169 top: 50%;
1170 }
1171
1172 5% {
1173 top: 60%;
1174 }
1175
1176 10% {
1177 top: 50%;
1178 }
1179
1180 15% {
1181 top: 60%;
1182 }
1183
1184 20% {
1185 top: 50%;
1186 }
1187
1188 }
1189
1190 @-moz-keyframes DownMove {
1191 0% {
1192 top: 50%;
1193 }
1194
1195 5% {
1196 top: 60%;
1197 }
1198
1199 10% {
1200 top: 50%;
1201 }
1202
1203 15% {
1204 top: 60%;
1205 }
1206
1207 20% {
1208 top: 50%;
1209 }
1210
1211 }
1212
1213 @media screen and (max-width:830px) {
1214
1215 .awsm-table-description .awsm-table-cell-inner {
1216 min-width: unset;
1217 }
1218
1219 }
1220
1221 @media screen and (max-width:700px) {
1222 .awsm-grid.list-style figcaption {
1223 overflow: visible;
1224 }
1225
1226 .list-style.style-2 figure img,
1227 .list-style.style-1 figure img {
1228 float: none;
1229 margin: 0 0 30px 0;
1230 }
1231
1232 .awsm-table,
1233 .awsm-table-row,
1234 .awsm-table-cell {
1235 display: block;
1236 }
1237
1238 .awsm-table.style-1 .awsm-table-row {
1239 padding-bottom: 20px;
1240 border-bottom: 1px solid #ccc;
1241 margin-bottom: 20px;
1242 }
1243
1244 .awsm-table-row.awsm-table-head {
1245 display: none;
1246 }
1247
1248 .awsm-table-cell {
1249 padding: 0;
1250 border: none;
1251 }
1252
1253 .table-style .awsm-table-img-holder {
1254 float: left;
1255 margin-right: 20px;
1256 margin-bottom: 20px;
1257 }
1258
1259 .awsm-table-designation,
1260 .awsm-table-name {
1261 overflow: hidden;
1262 }
1263
1264 .awsm-table-description {
1265 clear: both;
1266 }
1267
1268 .awsm-table .awsm-table-cell h2 {
1269 margin-bottom: 10px;
1270 }
1271
1272 .awsm-table .awsm-table-cell h3 {
1273 margin-top: 0;
1274 }
1275
1276 /*********** Clear Border and Styles *************/
1277 .awsm-table.style-1 .awsm-table-cell {
1278 border: none;
1279 }
1280
1281 .awsm-table-cell .awsm-table-cell-inner {
1282 max-width: none;
1283 }
1284
1285 .awsm-table.style-2 .awsm-table-row {
1286 padding: 20px 15px;
1287 }
1288
1289 .awsm-table.style-3 {
1290 border: 1px solid #ccc;
1291 }
1292
1293 .awsm-table.style-3 .awsm-table-row {
1294 padding: 20px 15px;
1295 border-bottom: 1px solid #ccc;
1296 }
1297
1298 .awsm-table.style-3 .awsm-table-row:last-child {
1299 border-bottom: none;
1300 }
1301
1302 .awsm-table.style-3 .awsm-table-cell {
1303 border: none !important;
1304 }
1305
1306 }
1307
1308 @media screen and (max-width:650px) {
1309
1310 .awsm-personal-details{
1311 max-height: 100%;
1312 overflow: visible;
1313 }
1314 }
1315
1316 /* IE 10 and IE 11 Fix */
1317 @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {
1318 .cards-style.style-1 figure::before {
1319 -ms-transform: translateY(0px);
1320 -webkit-transform: translateY(0px);
1321 -moz-transform: translateY(0px);
1322 transform: translateY(0px);
1323 opacity: 0;
1324 visibility: hidden;
1325 -webkit-transition: opacity 0.4s, visibility 0.4s;
1326 -moz-transition: opacity 0.4s, visibility 0.4s;
1327 transition: opacity 0.4s, visibility 0.4s;
1328 }
1329
1330 .no-touchevents .cards-style.style-1 figure:hover::before,
1331 .cards-style.style-1 figure.cs-hover::before {
1332 -ms-transform: translateY(0px);
1333 -webkit-transform: translateY(0px);
1334 -moz-transform: translateY(0px);
1335 transform: translateY(0px);
1336 opacity: 1;
1337 visibility: visible;
1338 }
1339
1340 .cards-style.style-2 .awsm-flip-front,
1341 .cards-style.style-2 figcaption {
1342 -webkit-transition: -webkit-transform 0.6s, z-index 0.7s;
1343 -moz-transition: -moz-transform 0.6s, z-index 0.7s;
1344 -webkit-transition: z-index 0.7s, -webkit-transform 0.6s;
1345 transition: z-index 0.7s, -webkit-transform 0.6s;
1346 -moz-transition: transform 0.6s, z-index 0.7s, -moz-transform 0.6s;
1347 transition: transform 0.6s, z-index 0.7s;
1348 transition: transform 0.6s, z-index 0.7s, -webkit-transform 0.6s, -moz-transform 0.6s;
1349 -webkit-backface-visibility: visible;
1350 -moz-backface-visibility: visible;
1351 backface-visibility: visible;
1352 }
1353
1354 .cards-style.style-2 figcaption {
1355 z-index: 1;
1356 }
1357
1358 .cards-style.style-2 .awsm-flip-front {
1359 z-index: 2;
1360 }
1361
1362 .no-touchevents .cards-style.style-2 figure:hover figcaption,
1363 .cards-style.style-2 figure.cs-hover figcaption {
1364 z-index: 3;
1365 }
1366
1367 }
1368
1369 /* IE 9 fix */
1370 :root .cards-style.style-2 figcaption {
1371 z-index: 1;
1372 }
1373
1374 :root .cards-style.style-2 .awsm-flip-front {
1375 z-index: 2;
1376 }
1377
1378 :root .cards-style.style-2 figure:hover figcaption {
1379 z-index: 3;
1380 }
1381