6 font-family: "proxima-nova", "Helvetica Neue", sans-serif; }
10 border: 2px solid #333333;
14 text-transform: uppercase;
16 text-decoration: none;
23 .tether-element.tether-theme-arrows-dark .tether-content {
26 .tether-element.tether-theme-arrows-dark .tether-content .button {
30 pointer-events: all; }
34 @media (max-width: 568px) {
50 table.showcase:after {
62 border-color: transparent;
63 border-top-color: rgba(0, 0, 0, 0.2); }
64 table.showcase.no-next-arrow:after {
66 table.showcase .showcase-inner {
67 margin: 40px auto 60px;
69 table.showcase .showcase-inner h1 {
73 @media (max-width: 567px) {
74 table.showcase .showcase-inner h1 {
76 table.showcase .showcase-inner h2 {
81 @media (max-width: 567px) {
82 table.showcase .showcase-inner h2 {
84 table.showcase .showcase-inner p {
88 table.showcase.hero .tether-target-demo {
89 display: -moz-inline-stack;
90 display: inline-block;
91 vertical-align: middle;
92 *vertical-align: auto;
95 border: 2px dotted black;
98 @media (max-width: 567px) {
99 table.showcase.hero .tether-target-demo {
101 table.showcase.share {
102 background: #f3f3f3; }
103 table.showcase.projects-showcase .showcase-inner .projects-list {
107 table.showcase.projects-showcase .showcase-inner .projects-list .project {
109 text-decoration: none;
114 margin-bottom: 2rem; }
115 table.showcase.projects-showcase .showcase-inner .projects-list .os-icon {
119 background-size: 100%; }
120 table.showcase.projects-showcase .showcase-inner .projects-list h1 {
122 table.showcase.projects-showcase .showcase-inner .projects-list p {
124 table.showcase.browser-demo {
125 background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #723362), color-stop(100%, #9d223c));
126 background-image: -webkit-linear-gradient(top left, #723362 0%, #9d223c 100%);
127 background-image: -moz-linear-gradient(top left, #723362 0%, #9d223c 100%);
128 background-image: -o-linear-gradient(top left, #723362 0%, #9d223c 100%);
129 background-image: linear-gradient(top left, #723362 0%, #9d223c 100%);
130 background-color: #9d223c;
133 table.showcase.browser-demo.fixed {
140 table.showcase.browser-demo.fixed .browser-demo-inner {
141 -webkit-transition: width 2s ease-in-out, height 2s ease-in-out;
142 -moz-transition: width 2s ease-in-out, height 2s ease-in-out;
143 -o-transition: width 2s ease-in-out, height 2s ease-in-out;
144 transition: width 2s ease-in-out, height 2s ease-in-out; }
145 table.showcase.browser-demo.fixed[data-section="what"] {
146 box-shadow: 0 0 0 0; }
147 table.showcase.browser-demo.fixed[data-section="why"] .browser-demo-inner {
149 table.showcase.browser-demo.fixed[data-section="outro"] .showcase-inner {
150 pointer-events: all; }
151 table.showcase.browser-demo .showcase-inner {
152 pointer-events: none;
160 @media (max-width: 567px) {
161 table.showcase.browser-demo .showcase-inner {
164 table.showcase.browser-demo .browser-demo-inner {
167 table.showcase.browser-demo .section-copy {
168 -webkit-transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
169 -moz-transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
170 -o-transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
171 transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
172 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
181 table.showcase.browser-demo .section-copy.active {
182 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
185 @media (max-width: 567px) {
186 table.showcase.browser-demo .section-copy.active {
188 table.showcase.browser-demo .section-copy h2 {
192 margin: 25px 0 15px; }
193 @media (max-width: 567px) {
194 table.showcase.browser-demo .section-copy h2 {
196 table.showcase.browser-demo .browser-window {
197 -webkit-border-radius: 4px;
198 -moz-border-radius: 4px;
199 -ms-border-radius: 4px;
200 -o-border-radius: 4px;
208 table.showcase.browser-demo .browser-window .browser-titlebar {
213 border-bottom: 1px solid #eeeeee;
215 table.showcase.browser-demo .browser-window .browser-titlebar .browser-dots {
217 table.showcase.browser-demo .browser-window .browser-titlebar .browser-dots b {
218 -webkit-border-radius: 50%;
219 -moz-border-radius: 50%;
220 -ms-border-radius: 50%;
221 -o-border-radius: 50%;
223 display: -moz-inline-stack;
224 display: inline-block;
225 vertical-align: middle;
226 *vertical-align: auto;
232 background: rgba(0, 0, 0, 0.1); }
233 table.showcase.browser-demo .browser-window .browser-frame {
239 table.showcase.browser-demo .browser-window .browser-frame iframe {
240 -webkit-border-radius: 0 0 4px 4px;
241 -moz-border-radius: 0 0 4px 4px;
242 -ms-border-radius: 0 0 4px 4px;
243 -o-border-radius: 0 0 4px 4px;
244 border-radius: 0 0 4px 4px;
248 table.showcase.browser-demo-section .section-scroll-copy {
254 table.showcase.browser-demo-section .section-scroll-copy .section-scroll-copy-inner {
260 table.showcase.browser-demo-section .section-scroll-copy .section-scroll-copy-inner a {
262 table.showcase.browser-demo-section .section-scroll-copy .section-scroll-copy-inner .example-paragraph {
263 -webkit-border-radius: 4px;
264 -moz-border-radius: 4px;
265 -ms-border-radius: 4px;
266 -o-border-radius: 4px;