|
134
|
1 |
body { |
|
203
|
2 |
overflow: hidden; background: #ffffff; |
|
134
|
3 |
} |
|
|
4 |
|
|
|
5 |
.slideshow-wrap { |
|
203
|
6 |
position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #ffffff; |
|
120
|
7 |
} |
|
|
8 |
|
|
134
|
9 |
.backdrop { |
|
|
10 |
position: absolute; opacity: .3; -webkit-filter: blur(5px); filter: blur(5px); |
|
|
11 |
} |
|
|
12 |
|
|
190
|
13 |
.image-container { |
|
134
|
14 |
position: absolute; top: 50px; right: 50px; |
|
|
15 |
} |
|
|
16 |
|
|
120
|
17 |
.caption-wrap { |
|
|
18 |
position: absolute; left: 50px; right: 50px; bottom: 50px; |
|
|
19 |
} |
|
|
20 |
|
|
|
21 |
.caption { |
|
|
22 |
font-family: "Lato"; width: 480px; max-width: 100%; |
|
|
23 |
background: #ffffff; |
|
219
|
24 |
padding: 16px 0; margin: 0; overflow: auto; |
|
120
|
25 |
} |
|
|
26 |
|
|
190
|
27 |
.caption { |
|
134
|
28 |
box-shadow: 4px 4px 2px rgba(0,0,0,.5); |
|
|
29 |
} |
|
|
30 |
|
|
120
|
31 |
.caption h2 { |
|
|
32 |
font-size: 18px; font-weight: bold; margin: 0; padding: 0 20px 5px; |
|
|
33 |
} |
|
|
34 |
|
|
|
35 |
.caption h3 { |
|
|
36 |
font-size: 18px; font-style: italic; margin: 0; border-bottom: 1px solid #cccccc; padding: 0 20px 5px; |
|
|
37 |
} |
|
|
38 |
|
|
|
39 |
.caption p { |
|
|
40 |
margin: 10px 20px 0; padding: 0; font-size: 16px; font-style: italic; |
|
|
41 |
} |
|
|
42 |
|
|
|
43 |
.arrow-wrap { |
|
|
44 |
box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75); width: 78px; height: 78px; |
|
|
45 |
position: absolute; top: 50%; margin-top: -39px; |
|
|
46 |
background: #fff; cursor: pointer; border-radius: 39px; display: none; |
|
|
47 |
} |
|
|
48 |
|
|
|
49 |
.left-arrow { |
|
|
50 |
left: 20px; |
|
|
51 |
} |
|
|
52 |
|
|
|
53 |
.right-arrow { |
|
|
54 |
right: 20px; |
|
|
55 |
} |
|
|
56 |
|
|
|
57 |
.arrow-wrap:hover { |
|
|
58 |
background: #e0e0e0; |
|
|
59 |
} |
|
|
60 |
|
|
|
61 |
.arrow-wrap:active { |
|
|
62 |
background: #666666; |
|
|
63 |
} |
|
|
64 |
|
|
|
65 |
.arrow { |
|
|
66 |
width: 78px; height: 78px; display: block; background: url(../img/home-arrow.png) center 30px no-repeat; |
|
|
67 |
} |
|
|
68 |
|
|
|
69 |
.left-arrow .arrow { |
|
|
70 |
transform: rotate(90deg); -webkit-transform: rotate(90deg); |
|
|
71 |
} |
|
|
72 |
|
|
|
73 |
.right-arrow .arrow { |
|
|
74 |
transform: rotate(-90deg); -webkit-transform: rotate(-90deg); |
|
203
|
75 |
} |
|
|
76 |
|
|
|
77 |
.top-controls { |
|
|
78 |
position: absolute; left: 20px; top: 20px; display: none; |
|
|
79 |
} |
|
|
80 |
|
|
|
81 |
.top-controls a { |
|
|
82 |
display: block; float: left; background-image: url(../img/slideshow-controls.png); height: 57px; opacity: 0.5; |
|
|
83 |
} |
|
|
84 |
|
|
|
85 |
.top-controls a:hover { |
|
|
86 |
opacity: 1; |
|
|
87 |
} |
|
|
88 |
|
|
|
89 |
.full-screen { |
|
|
90 |
width: 55px; margin-right: 20px; |
|
|
91 |
} |
|
|
92 |
|
|
|
93 |
.play-pause { |
|
|
94 |
background-position: -55px 0; width: 48px; |
|
|
95 |
} |
|
|
96 |
|
|
|
97 |
.play-pause.pause { |
|
|
98 |
background-position: -103px 0; |
|
|
99 |
} |