github.com/ezbercih/terraform@v0.1.1-0.20140729011846-3c33865e0839/website/source/stylesheets/main.css (about) 1 .rls-l { 2 font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; 3 font-weight: 300; 4 } 5 .rls-sb { 6 font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; 7 font-weight: 500; 8 } 9 .rls-xb { 10 font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; 11 font-weight: 700; 12 } 13 .os { 14 font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; 15 font-weight: 300; 16 } 17 /*html{ 18 text-rendering: optimizeLegibility; 19 -webkit-font-smoothing: antialiased; 20 }*/ 21 body { 22 -webkit-font-smoothing: subpixel-antialiased; 23 color: #000000; 24 background-color: #000000; 25 font-size: 15px; 26 font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; 27 font-weight: 500; 28 } 29 h1, 30 h2, 31 h3, 32 h4, 33 h5 { 34 -webkit-font-smoothing: antialiased; 35 } 36 h1 { 37 font-size: 42px; 38 line-height: 42px; 39 font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; 40 font-weight: 500; 41 margin-bottom: 24px; 42 } 43 h3 { 44 font-size: 28px; 45 line-height: 28px; 46 font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; 47 font-weight: 500; 48 } 49 .btn-serf { 50 color: #ffffff !important; 51 background-color: #4592c5; 52 border-radius: 4px; 53 } 54 .highlight { 55 margin-bottom: 18px; 56 } 57 pre { 58 background-color: #000000; 59 color: #ffffff; 60 font-size: 14px; 61 font-weight: normal; 62 font-family: "Courier New", Monaco, Menlo, Consolas, monospace; 63 border: none; 64 padding: 20px; 65 margin-bottom: 0; 66 } 67 @media (max-width: 992px) { 68 .container { 69 max-width: 970px; 70 } 71 } 72 .navbar-nav { 73 margin: 0; 74 } 75 .navbar-right { 76 float: right !important; 77 } 78 .navbar-nav > li { 79 float: left; 80 } 81 .navbar-nav > li > a { 82 padding-top: 15px; 83 padding-bottom: 15px; 84 } 85 .center { 86 text-align: center; 87 } 88 body.page-sub .terra-btn { 89 background-color: #822ff7; 90 } 91 body.page-sub #header { 92 height: 90px; 93 background-color: #822ff7; 94 } 95 body.page-sub #header .navbar-collapse { 96 background-color: rgba(255, 255, 255, 0.98); 97 } 98 body.page-sub #header .nav-logo { 99 height: 90px; 100 } 101 body.page-sub #header .nav-white { 102 height: 90px; 103 background-color: white; 104 } 105 body.page-sub #header .main-links.navbar-nav { 106 float: left !important; 107 } 108 body.page-sub #header .main-links.navbar-nav li > a { 109 color: black; 110 -webkit-transition: color 0.3s ease; 111 transition: color 0.3s ease; 112 } 113 body.page-sub #header .buttons.nav > li > a, 114 body.page-sub #header .buttons.nav > li > a { 115 -webkit-transition: background-color 0.3s ease; 116 transition: background-color 0.3s ease; 117 } 118 body.page-sub #header .buttons.nav > li > a:hover, 119 body.page-sub #header .buttons.nav > li > a:focus { 120 background-color: black; 121 -webkit-transition: background-color 0.3s ease; 122 transition: background-color 0.3s ease; 123 } 124 body.page-sub #header .main-links.nav > li > a:hover, 125 body.page-sub #header .main-links.nav > li > a:focus { 126 color: #822ff7; 127 -webkit-transition: color 0.3s ease; 128 transition: color 0.3s ease; 129 } 130 #header { 131 position: relative; 132 color: #ffffff; 133 text-rendering: optimizeLegibility; 134 margin-bottom: 0; 135 } 136 #header.navbar-static-top { 137 height: 70px; 138 -webkit-transform: translate3d(0, 0, 0); 139 -moz-transform: translate3d(0, 0, 0); 140 -ms-transform: translate3d(0, 0, 0); 141 -o-transform: translate3d(0, 0, 0); 142 transform: translate3d(0, 0, 0); 143 z-index: 1000; 144 } 145 #header a { 146 color: #ffffff; 147 } 148 #header .navbar-toggle { 149 margin-top: 26px; 150 margin-bottom: 14px; 151 margin-right: 0; 152 border: 2px solid #ffffff; 153 border-radius: 0; 154 } 155 #header .navbar-toggle .icon-bar { 156 border: 1px solid #ffffff; 157 border-radius: 0; 158 } 159 #header .navbar-brand.logo { 160 margin-top: 15px; 161 padding: 5px 0 0 68px; 162 height: 56px; 163 line-height: 56px; 164 font-size: 24px; 165 font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; 166 font-weight: 300; 167 text-transform: uppercase; 168 background: url(../images/consul-header-logo.png) 0 0 no-repeat; 169 background-image: url("../images/header-logo.png"); 170 background-size: 50px 56px; 171 -webkit-font-smoothing: default; 172 } 173 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { 174 #header .navbar-brand.logo { 175 background-image: url("../images/header-logo@2x.png"); 176 background-size: 50px 56px; 177 } 178 } 179 #header .navbar-nav { 180 -webkit-font-smoothing: antialiased; 181 } 182 #header .navbar-nav li { 183 position: relative; 184 } 185 #header .navbar-nav li > a { 186 font-size: 12px; 187 text-transform: uppercase; 188 letter-spacing: 3px; 189 padding-left: 22px; 190 -webkit-transition: color 0.3s ease; 191 transition: color 0.3s ease; 192 } 193 #header .navbar-nav li.first > a { 194 padding-left: 15px; 195 } 196 #header .nav > li > a:hover, 197 #header .nav > li > a:focus { 198 background-color: transparent; 199 color: #ae79fa; 200 -webkit-transition: color 0.3s ease; 201 transition: color 0.3s ease; 202 } 203 #header .main-links.navbar-nav { 204 margin-top: 28px; 205 } 206 #header .main-links.navbar-nav li + li { 207 padding-left: 6px; 208 } 209 #header .main-links.navbar-nav li + li::before { 210 content: ""; 211 position: absolute; 212 left: 0; 213 top: 7px; 214 width: 1px; 215 height: 12px; 216 background-color: #822ff7; 217 -webkit-transform: skewY(24deg); 218 -moz-transform: skewY(24deg); 219 -ms-transform: skewY(24deg); 220 -o-transform: skewY(24deg); 221 transform: skewY(24deg); 222 padding-right: 0; 223 } 224 #header .main-links.navbar-nav li > a { 225 line-height: 26px; 226 margin: 0 8px; 227 padding: 0 0 0 4px; 228 } 229 #header .buttons.navbar-nav { 230 margin-top: 25px; 231 margin-left: 30px; 232 } 233 #header .buttons.navbar-nav li.first { 234 margin-right: 13px; 235 } 236 #header .buttons.navbar-nav li.download a { 237 padding-left: 30px; 238 background: url(../images/header-download-icon.png) 12px 8px no-repeat; 239 background-image: url("../images/header-download-icon.png"); 240 background-size: 12px 13px; 241 } 242 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { 243 #header .buttons.navbar-nav li.download a { 244 background-image: url("../images/header-download-icon@2x.png"); 245 background-size: 12px 13px; 246 } 247 } 248 #header .buttons.navbar-nav li.github a { 249 background: url(../images/header-github-icon.png) 12px 7px no-repeat; 250 background-image: url("../images/header-github-icon.png"); 251 background-size: 12px 13px; 252 } 253 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { 254 #header .buttons.navbar-nav li.github a { 255 background-image: url("../images/header-github-icon@2x.png"); 256 background-size: 12px 13px; 257 } 258 } 259 #header .buttons.navbar-nav li > a { 260 color: white; 261 padding-top: 4px; 262 padding-bottom: 4px; 263 padding-left: 32px; 264 padding-right: 12px; 265 letter-spacing: 0.05em; 266 } 267 @media (min-width: 1200px) { 268 #header .main-links.navbar-nav { 269 margin-top: 28px; 270 } 271 #header .main-links.navbar-nav li + li { 272 padding-left: 6px; 273 } 274 #header .main-links.navbar-nav li + li::before { 275 content: ""; 276 position: absolute; 277 left: 0; 278 top: 9px; 279 width: 6px; 280 height: 8px; 281 background-color: #822ff7; 282 -webkit-transform: skewY(24deg); 283 -moz-transform: skewY(24deg); 284 -ms-transform: skewY(24deg); 285 -o-transform: skewY(24deg); 286 transform: skewY(24deg); 287 padding-right: 8px; 288 } 289 #header .main-links.navbar-nav li > a { 290 line-height: 26px; 291 margin: 0 12px; 292 padding: 0 0 0 4px; 293 } 294 } 295 @media (min-width: 992px) { 296 .collapse { 297 margin-top: 8px; 298 } 299 .page-home #header .main-links.navbar-nav li + li { 300 padding-left: 6px; 301 } 302 .page-home #header .main-links.navbar-nav li + li::before { 303 content: ""; 304 position: absolute; 305 left: 0; 306 top: 9px; 307 width: 6px; 308 height: 8px; 309 background-color: #822ff7; 310 -webkit-transform: skewY(24deg); 311 -moz-transform: skewY(24deg); 312 -ms-transform: skewY(24deg); 313 -o-transform: skewY(24deg); 314 transform: skewY(24deg); 315 padding-right: 8px; 316 } 317 } 318 @media (min-width: 768px) and (max-width: 992px) { 319 body.page-home .nav-logo { 320 width: 30%; 321 } 322 body.page-home .nav-white { 323 margin-top: 8px; 324 width: 70%; 325 } 326 body.page-home .buttons.navbar-nav li > a { 327 padding-right: 4px !important; 328 text-indent: -9999px; 329 white-space: nowrap; 330 } 331 } 332 @media (max-width: 992px) { 333 #header .navbar-brand.logo span { 334 width: 120px; 335 height: 39px; 336 margin-top: 12px; 337 background-size: 120px 39px; 338 } 339 } 340 @media (max-width: 768px) { 341 body.page-sub #header .nav-white { 342 background-color: transparent; 343 } 344 #header .buttons.navbar-nav { 345 float: none !important; 346 margin: 0; 347 padding-bottom: 0 !important; 348 } 349 #header .buttons.navbar-nav li.first { 350 margin-right: 0; 351 } 352 #header .buttons.navbar-nav, 353 #header .main-links.navbar-nav { 354 display: block; 355 padding-bottom: 15px; 356 } 357 #header .buttons.navbar-nav li, 358 #header .main-links.navbar-nav li { 359 display: block; 360 float: none; 361 margin-top: 15px; 362 } 363 #header .buttons.navbar-nav .li-under a::after, 364 #header .main-links.navbar-nav .li-under a::after, 365 #header .buttons.navbar-nav li + li::before, 366 #header .main-links.navbar-nav li + li::before { 367 display: none; 368 } 369 #header .main-links.navbar-nav { 370 float: left !important; 371 } 372 #header .main-links.navbar-nav li > a { 373 padding: 0; 374 padding-left: 0; 375 line-height: 22px; 376 } 377 } 378 @media (max-width: 763px) { 379 .navbar-static-top .nav-white { 380 background-color: rgba(0, 0, 0, 0.5); 381 } 382 } 383 @media (max-width: 320px) { 384 #header .navbar-brand.logo { 385 padding: 0 0 0 54px !important; 386 font-size: 20px !important; 387 line-height: 42px !important; 388 margin-top: 23px !important ; 389 background-image: url("../images/header-logo.png"); 390 background-size: 39px 44px; 391 } 392 #feature-auto .terminal-text { 393 line-height: 48px !important; 394 font-size: 20px !important; 395 } 396 } 397 @media (max-width: 320px) and only screen and (-webkit-min-device-pixel-ratio: 2), (max-width: 320px) and only screen and (min--moz-device-pixel-ratio: 2), (max-width: 320px) and only screen and (-o-min-device-pixel-ratio: 2/1), (max-width: 320px) and only screen and (min-device-pixel-ratio: 2), (max-width: 320px) and only screen and (min-resolution: 192dpi), (max-width: 320px) and only screen and (min-resolution: 2dppx) { 398 #header .navbar-brand.logo { 399 background-image: url("../images/header-logo@2x.png"); 400 background-size: 39px 44px; 401 } 402 } 403 #footer-wrap { 404 background-color: white; 405 padding: 0 0 50px 0; 406 } 407 body.page-home #footer { 408 margin-top: -40px; 409 } 410 #footer { 411 padding: 140px 0 40px; 412 color: black; 413 background-color: white; 414 } 415 #footer .skew { 416 -webkit-transform: skewY(-2deg); 417 -moz-transform: skewY(-2deg); 418 -ms-transform: skewY(-2deg); 419 -o-transform: skewY(-2deg); 420 transform: skewY(-2deg); 421 } 422 #footer > .container.skew { 423 -webkit-transform: skewY(2deg); 424 -moz-transform: skewY(2deg); 425 -ms-transform: skewY(2deg); 426 -o-transform: skewY(2deg); 427 transform: skewY(2deg); 428 } 429 #footer a { 430 color: black; 431 } 432 #footer .footer-links { 433 margin-bottom: 20px; 434 } 435 #footer .footer-links .li-under a:hover::after, 436 #footer .footer-links .li-under a:focus::after { 437 opacity: 1; 438 -webkit-transform: skewY(15deg) translateY(8px); 439 -moz-transform: skewY(15deg) translateY(8px); 440 transform: skewY(15deg) translateY(8px); 441 } 442 #footer .footer-links .li-under a::after { 443 background-color: #822ff7; 444 } 445 #footer .footer-links li a { 446 text-transform: uppercase; 447 font-size: 12px; 448 letter-spacing: 3px; 449 -webkit-transition: color 0.3s ease; 450 transition: color 0.3s ease; 451 font-weight: 400; 452 } 453 #footer .footer-links li a:hover { 454 color: #822ff7; 455 -webkit-transition: color 0.3s ease; 456 transition: color 0.3s ease; 457 background-color: transparent; 458 } 459 #footer .buttons.navbar-nav { 460 float: none; 461 display: inline-block; 462 margin-bottom: 30px; 463 margin-top: 0px; 464 } 465 #footer .buttons.navbar-nav li.first { 466 margin-right: 12px; 467 } 468 #footer .buttons.navbar-nav li.download a { 469 background: url(../images/icon-download-purple.png) 8px 6px no-repeat; 470 background-image: url("../images/icon-download-purple.png"); 471 background-size: 20px 20px; 472 } 473 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { 474 #footer .buttons.navbar-nav li.download a { 475 background-image: url("../images/icon-download-purple@2x.png"); 476 background-size: 20px 20px; 477 } 478 } 479 #footer .buttons.navbar-nav li.github a { 480 background: url(../images/icon-github-purple.png) 8px 6px no-repeat; 481 background-image: url("../images/icon-github-purple.png"); 482 background-size: 20px 20px; 483 } 484 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { 485 #footer .buttons.navbar-nav li.github a { 486 background-image: url("../images/icon-github-purple@2x.png"); 487 background-size: 20px 20px; 488 } 489 } 490 #footer .buttons.navbar-nav li > a { 491 padding-top: 6px; 492 padding-bottom: 6px; 493 padding-left: 40px; 494 } 495 #footer .footer-hashi { 496 float: right; 497 padding-top: 5px; 498 letter-spacing: 2px; 499 } 500 #footer .footer-hashi a { 501 color: black; 502 font-weight: 700; 503 } 504 #footer .footer-hashi span { 505 margin-right: 10px; 506 } 507 #footer .footer-hashi .hashi-logo { 508 display: inline-block; 509 vertical-align: middle; 510 } 511 #footer .footer-hashi .hashi-logo i { 512 display: inline-block; 513 width: 37px; 514 height: 40px; 515 background: url(../images/footer-hashicorp-logo.png) 0 0 no-repeat; 516 background-image: url("../images/footer-hashicorp-logo.png"); 517 background-size: 37px 40px; 518 } 519 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { 520 #footer .footer-hashi .hashi-logo i { 521 background-image: url("../images/footer-hashicorp-logo@2x.png"); 522 background-size: 37px 40px; 523 } 524 } 525 .page-sub #footer-wrap { 526 padding: 0; 527 } 528 .page-sub #footer { 529 padding: 140px 0 100px; 530 background-color: #000000; 531 transform: none; 532 } 533 .page-sub #footer > .container { 534 transform: none; 535 } 536 .page-sub #footer a { 537 color: white; 538 } 539 .page-sub #footer .footer-hashi { 540 color: white; 541 } 542 .page-sub #footer .footer-hashi .hashi-logo i { 543 background: url(../images/footer-hashicorp-white-logo.png) 0 0 no-repeat; 544 background-image: url("../images/footer-hashicorp-white-logo.png"); 545 background-size: 37px 40px; 546 } 547 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { 548 .page-sub #footer .footer-hashi .hashi-logo i { 549 background-image: url("../images/footer-hashicorp-white-logo@2x.png"); 550 background-size: 37px 40px; 551 } 552 } 553 @media (max-width: 992px) { 554 .page-sub #footer .footer-hashi, 555 #footer .footer-hashi { 556 padding-top: 14px; 557 } 558 .page-sub #footer .footer-hashi span, 559 #footer .footer-hashi span { 560 margin-right: 6px; 561 } 562 .page-sub #footer .footer-hashi .hashi-logo i, 563 #footer .footer-hashi .hashi-logo i { 564 margin-top: -6px; 565 width: 20px; 566 height: 22px; 567 background-size: 20px 22px; 568 } 569 } 570 @media (max-width: 768px) { 571 #footer { 572 padding: 100px 0 40px; 573 text-align: center; 574 } 575 #footer .footer-links { 576 float: none; 577 display: inline-block; 578 } 579 #footer .footer-hashi { 580 float: none; 581 display: inline-block; 582 } 583 #footer .footer-hashi .pull-right { 584 float: none !important; 585 } 586 } 587 @media (max-width: 320px) { 588 #footer { 589 text-align: center; 590 } 591 #footer .footer-links .li-under { 592 float: none !important; 593 } 594 } 595 #jumbotron-mask { 596 position: relative; 597 z-index: 0; 598 height: 700px; 599 margin-top: -70px; 600 background-color: black; 601 } 602 #jumbotron { 603 position: relative; 604 height: 700px; 605 padding-top: 0; 606 padding-bottom: 0; 607 color: #ffffff; 608 } 609 #jumbotron.static { 610 background-image: url(../images/bg-galaxy.jpg); 611 background-position: 50% 50%; 612 background-repeat: no-repeat; 613 } 614 #jumbotron.static .jumbotron-content { 615 background-image: url(../images/bg-static.png); 616 background-size: cover; 617 background-position: 50% 50%; 618 background-repeat: no-repeat; 619 } 620 #jumbotron.static .jumbotron-content:after { 621 content: ''; 622 display: block; 623 position: absolute; 624 top: 50%; 625 left: 50%; 626 background: url(../images/logo-static.png); 627 -webkit-background-size: 100% 100%; 628 -moz-background-size: 100% 100%; 629 -ms-background-size: 100% 100%; 630 -o-background-size: 100% 100%; 631 background-size: 100% 100%; 632 width: 360px; 633 height: 360px; 634 margin: -204px 0 0 -180px; 635 } 636 #jumbotron .terraform-canvas { 637 position: absolute; 638 top: 0; 639 left: 0; 640 width: 100%; 641 height: 100%; 642 opacity: 0; 643 -webkit-transition: opacity 2s ease-out; 644 -moz-transition: opacity 2s ease-out; 645 -ms-transition: opacity 2s ease-out; 646 -o-transition: opacity 2s ease-out; 647 transition: opacity 2s ease-out; 648 -webkit-transform: translate3d(0, 0, 0); 649 -moz-transform: translate3d(0, 0, 0); 650 -ms-transform: translate3d(0, 0, 0); 651 -o-transform: translate3d(0, 0, 0); 652 transform: translate3d(0, 0, 0); 653 } 654 #jumbotron .jumbotron-content { 655 position: absolute; 656 z-index: 999; 657 top: 0; 658 left: 0; 659 right: 0; 660 bottom: 0; 661 -webkit-transform: translate3d(0, 0, 0); 662 -moz-transform: translate3d(0, 0, 0); 663 -ms-transform: translate3d(0, 0, 0); 664 -o-transform: translate3d(0, 0, 0); 665 transform: translate3d(0, 0, 0); 666 } 667 #jumbotron .galaxy-bg { 668 position: absolute; 669 width: 100%; 670 height: 100%; 671 top: 0; 672 left: 0; 673 background-image: url(../images/bg-galaxy.jpg); 674 /* background-size:cover; */ 675 background-position: 50% 50%; 676 background-repeat: no-repeat; 677 opacity: 0; 678 -webkit-transition: opacity 2s ease-out; 679 -moz-transition: opacity 2s ease-out; 680 -ms-transition: opacity 2s ease-out; 681 -o-transition: opacity 2s ease-out; 682 transition: opacity 2s ease-out; 683 -webkit-transform: translate3d(0, 0, 0); 684 -moz-transform: translate3d(0, 0, 0); 685 -ms-transform: translate3d(0, 0, 0); 686 -o-transform: translate3d(0, 0, 0); 687 transform: translate3d(0, 0, 0); 688 } 689 #jumbotron .galaxy-bg.show { 690 opacity: 1; 691 } 692 .tag-line { 693 position: absolute; 694 width: 100%; 695 top: 540px; 696 color: #fff; 697 text-align: center; 698 visibility: hidden; 699 font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; 700 font-weight: 300; 701 -webkit-transform: translate3d(0, 0, 0); 702 -moz-transform: translate3d(0, 0, 0); 703 -ms-transform: translate3d(0, 0, 0); 704 -o-transform: translate3d(0, 0, 0); 705 transform: translate3d(0, 0, 0); 706 } 707 .animated-logo { 708 position: absolute; 709 z-index: 200; 710 top: 50%; 711 left: 50%; 712 width: 140px; 713 height: 140px; 714 margin: -60px 0 0 -115px; 715 opacity: 1; 716 -webkit-transition: -webkit-transform 300ms ease-in-out; 717 -moz-transition: -moz-transform 300ms ease-in-out; 718 -ms-transition: -ms-transform 300ms ease-in-out; 719 -o-transition: -o-transform 300ms ease-in-out; 720 transition: transform 300ms ease-in-out; 721 -webkit-transform-origin: 50% 50%; 722 -moz-transform-origin: 50% 50%; 723 -ms-transform-origin: 50% 50%; 724 -o-transform-origin: 50% 50%; 725 transform-origin: 50% 50%; 726 -webkit-transform-style: preserve-3d; 727 -moz-transform-style: preserve-3d; 728 -ms-transform-style: preserve-3d; 729 -o-transform-style: preserve-3d; 730 transform-style: preserve-3d; 731 -webkit-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); 732 -moz-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); 733 -ms-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); 734 -o-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); 735 transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); 736 } 737 .state-one .animated-logo { 738 -webkit-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); 739 -moz-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); 740 -ms-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); 741 -o-transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); 742 transform: translate3d(0, 0, 0) rotateY(0deg) skewY(0deg) scale(1, 1); 743 } 744 .state-one.state-two.state-three.state-four .animated-logo { 745 -webkit-transform-origin: 100% 0; 746 -moz-transform-origin: 100% 0; 747 -ms-transform-origin: 100% 0; 748 -o-transform-origin: 100% 0; 749 transform-origin: 100% 0; 750 -webkit-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1); 751 -moz-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1); 752 -ms-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1); 753 -o-transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1); 754 transform: translate3d(0, 10px, 0) rotateY(-45deg) skewY(22deg) scale(1.26, 1); 755 } 756 .state-one.state-two.state-three.state-four .white-block { 757 background-color: #ffffff; 758 } 759 .white-block { 760 position: absolute; 761 width: 68px; 762 height: 68px; 763 -webkit-box-sizing: border-box; 764 -moz-box-sizing: border-box; 765 box-sizing: border-box; 766 /* background-color:rgba(255,0,0,0.3); */ 767 background-color: #fff; 768 background-color: rgba(255, 255, 255, 0); 769 border: 1px solid #fff; 770 -webkit-transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out, background-color 300ms ease-out; 771 -moz-transition: opacity 300ms ease-out, -moz-transform 300ms ease-out, background-color 300ms ease-out; 772 -ms-transition: opacity 300ms ease-out, -ms-transform 300ms ease-out, background-color 300ms ease-out; 773 -o-transition: opacity 300ms ease-out, -o-transform 300ms ease-out, background-color 300ms ease-out; 774 transition: opacity 300ms ease-out, transform 300ms ease-out, background-color 300ms ease-out; 775 } 776 .block-1, 777 .block-2, 778 .block-3, 779 .block-4 { 780 top: 0; 781 left: 72px; 782 -webkit-transform-origin: 50% 50%; 783 -moz-transform-origin: 50% 50%; 784 -ms-transform-origin: 50% 50%; 785 -o-transform-origin: 50% 50%; 786 transform-origin: 50% 50%; 787 -webkit-transform: translate3d(0, 0, 0); 788 -moz-transform: translate3d(0, 0, 0); 789 -ms-transform: translate3d(0, 0, 0); 790 -o-transform: translate3d(0, 0, 0); 791 transform: translate3d(0, 0, 0); 792 } 793 .block-1 { 794 opacity: 0; 795 -webkit-transform: translate3d(0, 0, 0) scale(0, 0); 796 -moz-transform: translate3d(0, 0, 0) scale(0, 0); 797 -ms-transform: translate3d(0, 0, 0) scale(0, 0); 798 -o-transform: translate3d(0, 0, 0) scale(0, 0); 799 transform: translate3d(0, 0, 0) scale(0, 0); 800 } 801 .block-2 { 802 opacity: 0; 803 top: 0; 804 left: 0; 805 -webkit-transform: translate3d(0, 0, 0) scale(0, 0); 806 -moz-transform: translate3d(0, 0, 0) scale(0, 0); 807 -ms-transform: translate3d(0, 0, 0) scale(0, 0); 808 -o-transform: translate3d(0, 0, 0) scale(0, 0); 809 transform: translate3d(0, 0, 0) scale(0, 0); 810 } 811 .block-3 { 812 opacity: 0; 813 top: 72px; 814 -webkit-transform: translate3d(0, 0, 0) scale(0, 0); 815 -moz-transform: translate3d(0, 0, 0) scale(0, 0); 816 -ms-transform: translate3d(0, 0, 0) scale(0, 0); 817 -o-transform: translate3d(0, 0, 0) scale(0, 0); 818 transform: translate3d(0, 0, 0) scale(0, 0); 819 } 820 .block-4 { 821 -webkit-transform-origin: 0 0; 822 -moz-transform-origin: 0 0; 823 -ms-transform-origin: 0 0; 824 -o-transform-origin: 0 0; 825 transform-origin: 0 0; 826 -webkit-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25); 827 -moz-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25); 828 -ms-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25); 829 -o-transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25); 830 transform: translate3d(72px, -2px, 0) rotateY(90deg) skewY(-22deg) scaleX(1.25); 831 } 832 .state-one.state-two .block-1 { 833 opacity: 1; 834 -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 835 -moz-transform: translate3d(0, 0, 0) scale(1, 1); 836 -ms-transform: translate3d(0, 0, 0) scale(1, 1); 837 -o-transform: translate3d(0, 0, 0) scale(1, 1); 838 transform: translate3d(0, 0, 0) scale(1, 1); 839 } 840 .state-one .block-2 { 841 opacity: 1; 842 -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 843 -moz-transform: translate3d(0, 0, 0) scale(1, 1); 844 -ms-transform: translate3d(0, 0, 0) scale(1, 1); 845 -o-transform: translate3d(0, 0, 0) scale(1, 1); 846 transform: translate3d(0, 0, 0) scale(1, 1); 847 } 848 .state-one.state-two.state-three .block-3 { 849 opacity: 1; 850 -webkit-transform: translate3d(0, 0, 0) scale(1, 1); 851 -moz-transform: translate3d(0, 0, 0) scale(1, 1); 852 -ms-transform: translate3d(0, 0, 0) scale(1, 1); 853 -o-transform: translate3d(0, 0, 0) scale(1, 1); 854 transform: translate3d(0, 0, 0) scale(1, 1); 855 } 856 .cursor { 857 font-weight: bold; 858 -webkit-animation: Blink 800ms infinite; 859 -moz-animation: Blink 800ms infinite; 860 -ms-animation: Blink 800ms infinite; 861 -o-animation: Blink 800ms infinite; 862 animation: Blink 800ms infinite; 863 } 864 @-webkit-keyframes Blink { 865 0% { 866 opacity: 1; 867 } 868 50% { 869 opacity: 1; 870 } 871 51% { 872 opacity: 0; 873 } 874 100% { 875 opacity: 0; 876 } 877 } 878 @-moz-keyframes Blink { 879 0% { 880 opacity: 1; 881 } 882 50% { 883 opacity: 1; 884 } 885 51% { 886 opacity: 0; 887 } 888 100% { 889 opacity: 0; 890 } 891 } 892 @-ms-keyframes Blink { 893 0% { 894 opacity: 1; 895 } 896 50% { 897 opacity: 1; 898 } 899 51% { 900 opacity: 0; 901 } 902 100% { 903 opacity: 0; 904 } 905 } 906 @-o-keyframes Blink { 907 0% { 908 opacity: 1; 909 } 910 50% { 911 opacity: 1; 912 } 913 51% { 914 opacity: 0; 915 } 916 100% { 917 opacity: 0; 918 } 919 } 920 @keyframes Blink { 921 0% { 922 opacity: 1; 923 } 924 50% { 925 opacity: 1; 926 } 927 51% { 928 opacity: 0; 929 } 930 100% { 931 opacity: 0; 932 } 933 } 934 @media (max-width: 570px) { 935 .tag-line { 936 display: none; 937 } 938 #jumbotron .jumbotron-content { 939 -webkit-transform: translate3d(0, 0, 0) scale(0.8); 940 -moz-transform: translate3d(0, 0, 0) scale(0.8); 941 -ms-transform: translate3d(0, 0, 0) scale(0.8); 942 -o-transform: translate3d(0, 0, 0) scale(0.8); 943 transform: translate3d(0, 0, 0) scale(0.8); 944 } 945 .animated-logo { 946 margin: -15px 0 0 -113px; 947 } 948 #jumbotron-mask, 949 #jumbotron { 950 height: 560px; 951 } 952 } 953 .outline-btn { 954 background-color: transparent; 955 color: #ffffff; 956 border: 2px solid #ffffff; 957 text-decoration: none !important; 958 -webkit-transition: background-color 0.3s ease-in-out; 959 transition: background-color 0.3s ease-in-out; 960 } 961 .outline-btn.purple { 962 color: #822ff7; 963 border: 2px solid #822ff7; 964 } 965 .outline-btn:hover { 966 color: #ffffff; 967 background-color: rgba(255, 255, 255, 0.2); 968 -webkit-transition: background-color 0.3s ease-in-out; 969 transition: background-color 0.3s ease-in-out; 970 } 971 .outline-btn:hover.purple { 972 background-color: rgba(255, 255, 255, 0.5); 973 } 974 .terra-btn { 975 background-color: rgba(130, 47, 247, 0.36); 976 -webkit-transition: background-color 0.3s ease; 977 transition: background-color 0.3s ease; 978 } 979 .terra-btn:hover { 980 background-color: rgba(130, 47, 247, 0.8); 981 -webkit-transition: background-color 0.3s ease; 982 transition: background-color 0.3s ease; 983 } 984 /*.li-under a::after { 985 position: absolute; 986 top: 68%; 987 left: 50%; 988 margin-left: -4px; 989 width: 6px; 990 height: 6px; 991 background-color: white; 992 content: ''; 993 opacity: 0; 994 text-decoration: none; 995 -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s; 996 -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s; 997 transition: height 0.3s, opacity 0.3s, transform 0.3s; 998 -webkit-transform: translateY(-10px); 999 -moz-transform: translateY(-10px); 1000 transform: translateY(-10px); 1001 } 1002 1003 .li-under a:hover::after, 1004 .li-under a:focus::after { 1005 opacity: 1; 1006 -webkit-transform: skewY(15deg) translateY(10px); 1007 -moz-transform: skewY(15deg) translateY(10px); 1008 transform: skewY(15deg) translateY(10px); 1009 }*/ 1010 /*body.page-home{ 1011 background-color: #f8f8f8; 1012 }*/ 1013 .feature { 1014 padding: 240px 0; 1015 font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; 1016 font-weight: 300; 1017 } 1018 .feature h2 { 1019 text-align: right; 1020 font-size: 44px; 1021 line-height: 44px; 1022 letter-spacing: 2px; 1023 text-transform: uppercase; 1024 color: #822ff7; 1025 font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; 1026 font-weight: 300; 1027 } 1028 .feature p { 1029 font-size: 16px; 1030 letter-spacing: 1px; 1031 line-height: 1.5em; 1032 font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; 1033 font-weight: 300; 1034 } 1035 .feature .icn { 1036 display: block; 1037 width: 186px; 1038 height: 272px; 1039 margin: 0 auto; 1040 background-position: center 0; 1041 background-repeat: no-repeat; 1042 } 1043 #feature-auto { 1044 padding: 200px 0 300px; 1045 margin-top: -36px; 1046 background: #ffffff url(../images/white-wireframe.png) center top no-repeat; 1047 background-size: cover; 1048 } 1049 #feature-auto h2 { 1050 font-size: 43px; 1051 } 1052 #feature-auto p { 1053 text-align: right; 1054 padding-left: 100px; 1055 } 1056 #feature-auto .terminal-text { 1057 background: black; 1058 color: white; 1059 line-height: 88px; 1060 text-align: center; 1061 margin: 81px 20px 0; 1062 font-size: 30px; 1063 font-family: "Courier New", Monaco, Menlo, Consolas, monospace; 1064 } 1065 #feature-iterate { 1066 margin-top: -80px; 1067 padding: 280px 0 360px; 1068 color: white; 1069 background: #ffffff url(../images/feature-iterate-bg.png) center top no-repeat; 1070 border-top: 2px solid white; 1071 border-bottom: 2px solid #822ff7; 1072 background-size: cover; 1073 -webkit-transform: skewY(3deg); 1074 -moz-transform: skewY(3deg); 1075 -ms-transform: skewY(3deg); 1076 -o-transform: skewY(3deg); 1077 transform: skewY(3deg); 1078 } 1079 #feature-iterate > .container { 1080 -webkit-transform: skewY(-3deg); 1081 -moz-transform: skewY(-3deg); 1082 -ms-transform: skewY(-3deg); 1083 -o-transform: skewY(-3deg); 1084 transform: skewY(-3deg); 1085 } 1086 #feature-iterate p { 1087 text-align: right; 1088 padding-left: 120px; 1089 font-weight: 300; 1090 } 1091 #feature-iterate .it-icon { 1092 margin-top: 40px; 1093 } 1094 #feature-iterate .t-block { 1095 background-color: #ffffff; 1096 width: 80px; 1097 height: 80px; 1098 -webkit-transform: skewY(26deg); 1099 -moz-transform: skewY(26deg); 1100 -ms-transform: skewY(26deg); 1101 -o-transform: skewY(26deg); 1102 transform: skewY(26deg); 1103 float: left; 1104 margin-right: 25px; 1105 } 1106 #feature-iterate .t-block.t2 { 1107 background-color: rgba(255, 255, 255, 0.8); 1108 } 1109 #feature-iterate .t-block.t3 { 1110 background-color: rgba(255, 255, 255, 0.6); 1111 } 1112 #feature-iterate .t-block.t4 { 1113 background-color: rgba(255, 255, 255, 0.4); 1114 } 1115 #feature-iterate h2 { 1116 color: white; 1117 } 1118 #feature-clone { 1119 margin-top: -80px; 1120 padding: 240px 0 300px; 1121 color: white; 1122 background-color: #822ff7; 1123 -webkit-transform: skewY(3deg); 1124 -moz-transform: skewY(3deg); 1125 -ms-transform: skewY(3deg); 1126 -o-transform: skewY(3deg); 1127 transform: skewY(3deg); 1128 } 1129 #feature-clone > .container { 1130 -webkit-transform: skewY(-3deg); 1131 -moz-transform: skewY(-3deg); 1132 -ms-transform: skewY(-3deg); 1133 -o-transform: skewY(-3deg); 1134 transform: skewY(-3deg); 1135 } 1136 #feature-clone h2 { 1137 color: white; 1138 font-size: 37px; 1139 } 1140 #feature-clone p { 1141 text-align: right; 1142 } 1143 #feature-clone .clone-icon { 1144 padding-left: 80px; 1145 } 1146 #feature-clone .c-group { 1147 display: inline-block; 1148 margin-right: 20px; 1149 } 1150 #feature-clone .c-group.cg2 { 1151 opacity: .8; 1152 } 1153 #feature-clone .c-group.cg3 { 1154 opacity: .6; 1155 } 1156 #feature-clone .c-group .c-col { 1157 display: inline-block; 1158 float: left; 1159 } 1160 #feature-clone .c-group .c-col.c1 { 1161 padding-top: 16px; 1162 } 1163 #feature-clone .c-group .c-col.c3 { 1164 padding-top: 55px; 1165 } 1166 #feature-clone .c-group .c-col .c-block { 1167 background-color: white; 1168 width: 30px; 1169 height: 30px; 1170 -webkit-transform: skewY(30deg); 1171 -moz-transform: skewY(30deg); 1172 -ms-transform: skewY(30deg); 1173 -o-transform: skewY(30deg); 1174 transform: skewY(30deg); 1175 margin: 5px 5px 0 0; 1176 } 1177 #cta { 1178 padding: 180px 0 220px; 1179 background-color: #822ff7; 1180 -webkit-transform: skewY(-3deg); 1181 -moz-transform: skewY(-3deg); 1182 -ms-transform: skewY(-3deg); 1183 -o-transform: skewY(-3deg); 1184 transform: skewY(-3deg); 1185 } 1186 #cta > .container { 1187 -webkit-transform: skewY(3deg); 1188 -moz-transform: skewY(3deg); 1189 -ms-transform: skewY(3deg); 1190 -o-transform: skewY(3deg); 1191 transform: skewY(3deg); 1192 } 1193 #cta .intro .left { 1194 text-align: right; 1195 } 1196 #cta .intro .right { 1197 margin-top: 2px; 1198 } 1199 #cta p { 1200 padding-top: 4px; 1201 color: white; 1202 font-size: 14px; 1203 letter-spacing: 1px; 1204 line-height: 1.5esm; 1205 font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; 1206 } 1207 #cta .outline-btn { 1208 padding: 16px 40px; 1209 display: inline-block; 1210 } 1211 #cta .outline-btn:focus { 1212 outline: 0; 1213 } 1214 #cta a { 1215 font-size: 24px; 1216 text-transform: uppercase; 1217 letter-spacing: 3px; 1218 color: white; 1219 font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; 1220 font-weight: 300; 1221 font-weight: 500; 1222 } 1223 #cta a:hover { 1224 text-decoration: none; 1225 } 1226 #demos { 1227 padding: 180px 0 60px; 1228 background-color: #000; 1229 margin-top: -80px; 1230 -webkit-transform: skewY(-3deg); 1231 -moz-transform: skewY(-3deg); 1232 -ms-transform: skewY(-3deg); 1233 -o-transform: skewY(-3deg); 1234 transform: skewY(-3deg); 1235 } 1236 #demos > .container { 1237 -webkit-transform: skewY(3deg); 1238 -moz-transform: skewY(3deg); 1239 -ms-transform: skewY(3deg); 1240 -o-transform: skewY(3deg); 1241 transform: skewY(3deg); 1242 } 1243 #demos .explantion { 1244 margin: 40px 0 60px 15px; 1245 border-left: 8px solid #1e1e1e; 1246 } 1247 #demos .explantion h2 { 1248 margin-top: 0; 1249 font-size: 28px; 1250 color: #9a56f9; 1251 font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; 1252 font-weight: 300; 1253 } 1254 #demos .explantion p { 1255 margin-bottom: 0; 1256 font-size: 16px; 1257 letter-spacing: 1px; 1258 line-height: 1.5em; 1259 color: #939393; 1260 font-weight: 400; 1261 } 1262 #demos .terminals { 1263 margin-bottom: 80px; 1264 } 1265 #demos .terminals .terminal-item { 1266 margin-bottom: 120px; 1267 } 1268 #demos .terminals .terminal-item.last { 1269 border-bottom: none; 1270 } 1271 #demos .terminals .terminal-item > header .left span.icn { 1272 display: inline-block; 1273 width: 83px; 1274 height: 74px; 1275 } 1276 #demos .terminals .terminal-item > header .right { 1277 padding-left: 25px; 1278 } 1279 #demos .terminals .terminal-item > header .right h2 { 1280 margin-top: 0; 1281 font-size: 28px; 1282 text-transform: uppercase; 1283 } 1284 #demos .terminals .terminal-item > header .right p { 1285 font-size: 16px; 1286 } 1287 #demos .terminals .terminal-item .terminal { 1288 border: 2px solid #1e1e1e; 1289 } 1290 #demos .terminals .terminal-item .terminal header { 1291 position: relative; 1292 text-align: center; 1293 padding: 3px; 1294 border-bottom: 2px solid #1e1e1e; 1295 } 1296 #demos .terminals .terminal-item .terminal header h4 { 1297 font-size: 14px; 1298 letter-spacing: 1px; 1299 color: white; 1300 font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; 1301 font-weight: 700; 1302 } 1303 #demos .terminals .terminal-item .terminal header ul.shell-dots { 1304 position: absolute; 1305 top: 10px; 1306 left: 8px; 1307 padding-left: 0; 1308 } 1309 #demos .terminals .terminal-item .terminal header ul.shell-dots li { 1310 display: inline-block; 1311 width: 12px; 1312 height: 12px; 1313 border-radius: 6px; 1314 margin-left: 6px; 1315 } 1316 #demos .terminals .terminal-item .terminal header ul.shell-dots li.d1 { 1317 background-color: #4a08a7; 1318 } 1319 #demos .terminals .terminal-item .terminal header ul.shell-dots li.d2 { 1320 background-color: #6517cf; 1321 } 1322 #demos .terminals .terminal-item .terminal header ul.shell-dots li.d3 { 1323 background-color: #7b29ee; 1324 } 1325 #demos .terminals .terminal-item .terminal .terminal-window { 1326 min-height: 140px; 1327 padding: 20px; 1328 font-size: 15px; 1329 font-family: "Courier New", Monaco, Menlo, Consolas, monospace; 1330 color: #ffffff; 1331 background-color: transparent; 1332 overflow: auto; 1333 font-weight: 500; 1334 -webkit-font-smoothing: subpixel-antialiased; 1335 } 1336 #demos .terminals .terminal-item .terminal .terminal-window .txt-spe { 1337 color: #7190ea; 1338 } 1339 #demos .terminals .terminal-item .terminal .terminal-window .txt-var { 1340 color: #9a56f9; 1341 } 1342 #demos .terminals .terminal-item .terminal .terminal-window .txt-str { 1343 color: #64e86c; 1344 } 1345 #demos .terminals .terminal-item .terminal .terminal-window .txt-int { 1346 color: #e89264; 1347 } 1348 #demos .terminals .terminal-item .terminal .terminal-window p { 1349 margin-bottom: 2px; 1350 white-space: pre-wrap; 1351 } 1352 #demos .terminals .terminal-item .terminal .terminal-window .cursor { 1353 background-color: #NaNNaNNaN; 1354 } 1355 #demos .terminals .terminal-item .feature-bullets { 1356 list-style-type: none; 1357 padding-left: 35px; 1358 } 1359 #demos .terminals .terminal-item .feature-bullets li { 1360 padding: 5px 0 5px 45px; 1361 } 1362 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 1363 #demos .terminals .terminal-item .feature-bullets li { 1364 background-size: 12px 12px; 1365 } 1366 } 1367 @media (min-width: 1500px) { 1368 #feature-auto { 1369 padding: 270px 0 400px; 1370 } 1371 #feature-iterate { 1372 margin-top: -180px; 1373 padding: 300px 0 410px; 1374 } 1375 #feature-clone { 1376 margin-top: -180px; 1377 padding: 270px 0 430px; 1378 } 1379 #demos { 1380 margin-top: -180px; 1381 padding-top: 240px; 1382 } 1383 } 1384 @media (min-width: 1200px) { 1385 #feature-auto h2 { 1386 font-size: 41px; 1387 } 1388 #feature-auto .terminal-text { 1389 background: black; 1390 color: white; 1391 line-height: 88px; 1392 text-align: center; 1393 margin: 60px 20px 0; 1394 font-size: 32px; 1395 } 1396 } 1397 @media (max-width: 1200px) { 1398 #feature-iterate h2 { 1399 font-size: 40px; 1400 } 1401 #feature-iterate .it-icon { 1402 margin-top: 52px; 1403 } 1404 #feature-iterate .t-block { 1405 width: 73px; 1406 height: 73px; 1407 margin-right: 20px; 1408 } 1409 } 1410 @media (min-width: 992px) and (max-width: 1200px) { 1411 #cta a { 1412 margin-top: 15px; 1413 font-size: 18px; 1414 } 1415 #feature-clone .clone-icon { 1416 padding-left: 0 !important; 1417 } 1418 } 1419 @media (min-width: 768px) and (max-width: 992px) { 1420 #cta a { 1421 margin-top: 10px; 1422 } 1423 } 1424 @media (max-width: 992px) { 1425 .feature h2, 1426 .feature p { 1427 text-align: center !important; 1428 padding-left: 0 !important; 1429 } 1430 #feature-iterate .it-icon { 1431 width: 372px; 1432 margin: 0 auto 40px; 1433 padding-left: 0 !important; 1434 } 1435 #feature-clone .clone-icon { 1436 width: 382px; 1437 margin: 40px auto 0; 1438 padding-left: 0 !important; 1439 } 1440 #feature-auto h2 { 1441 font-size: 43px; 1442 } 1443 #feature-auto p { 1444 text-align: right; 1445 padding-left: 100px; 1446 } 1447 #feature-auto .terminal-text { 1448 background: black; 1449 color: white; 1450 line-height: 88px; 1451 text-align: center; 1452 margin: 60px 20px 0; 1453 font-size: 32px; 1454 } 1455 #demos .terminals .terminal-item > header .right { 1456 padding-left: 54px; 1457 } 1458 } 1459 @media (max-width: 768px) { 1460 .feature h2, 1461 .feature p { 1462 text-align: center; 1463 } 1464 #demos .explantion { 1465 margin: 40px 0 60px 0; 1466 } 1467 #demos .terminals .terminal-item > header .left span.icn { 1468 padding-bottom: 15px; 1469 } 1470 #demos .terminals .terminal-item > header .right { 1471 padding-left: 15px; 1472 } 1473 #cta .intro { 1474 text-align: center; 1475 } 1476 #cta .intro p { 1477 text-align: center; 1478 margin-bottom: 15px; 1479 } 1480 } 1481 @media (max-width: 480px) { 1482 #demos .explantion { 1483 margin: 40px 0 60px 0; 1484 } 1485 #feature-auto .terminal-text { 1486 font-size: 24px; 1487 } 1488 .feature h2 { 1489 text-align: center; 1490 font-size: 28px !important; 1491 line-height: 34px; 1492 overflow: hidden; 1493 } 1494 .feature p { 1495 text-align: center !important; 1496 padding: 0 !important; 1497 } 1498 #features { 1499 text-align: center; 1500 } 1501 } 1502 @media (max-width: 320px) { 1503 #feature-iterate { 1504 margin-top: -80px; 1505 padding: 280px 0 360px; 1506 color: white; 1507 background: #ffffff url(../images/feature-iterate-bg.png) center top no-repeat; 1508 border-top: 2px solid white; 1509 border-bottom: 2px solid #822ff7; 1510 background-size: cover; 1511 -webkit-transform: skewY(3deg); 1512 -moz-transform: skewY(3deg); 1513 -ms-transform: skewY(3deg); 1514 -o-transform: skewY(3deg); 1515 transform: skewY(3deg); 1516 } 1517 #feature-iterate > .container { 1518 -webkit-transform: skewY(-3deg); 1519 -moz-transform: skewY(-3deg); 1520 -ms-transform: skewY(-3deg); 1521 -o-transform: skewY(-3deg); 1522 transform: skewY(-3deg); 1523 } 1524 #feature-iterate p { 1525 text-align: right; 1526 padding-left: 120px; 1527 font-weight: 300; 1528 } 1529 #feature-iterate .it-icon { 1530 width: 245px; 1531 margin: 0 auto 40px 45px; 1532 padding-left: 0 !important; 1533 } 1534 #feature-iterate .t-block { 1535 background-color: #ffffff; 1536 width: 40px; 1537 height: 40px; 1538 -webkit-transform: skewY(26deg); 1539 -moz-transform: skewY(26deg); 1540 -ms-transform: skewY(26deg); 1541 -o-transform: skewY(26deg); 1542 transform: skewY(26deg); 1543 float: left; 1544 margin-right: 15px; 1545 } 1546 #feature-clone .clone-icon { 1547 width: 290px; 1548 margin: 40px auto 0; 1549 padding-left: 45px !important; 1550 } 1551 #feature-clone .c-group.cg2 { 1552 opacity: .7; 1553 } 1554 #feature-clone .c-group.cg3 { 1555 opacity: .5; 1556 } 1557 #feature-clone .c-group .c-col.c1 { 1558 padding-top: 8px; 1559 } 1560 #feature-clone .c-group .c-col.c3 { 1561 padding-top: 28px; 1562 } 1563 #feature-clone .c-group .c-col .c-block { 1564 background-color: white; 1565 width: 15px; 1566 height: 15px; 1567 -webkit-transform: skewY(30deg); 1568 -moz-transform: skewY(30deg); 1569 -ms-transform: skewY(30deg); 1570 -o-transform: skewY(30deg); 1571 transform: skewY(30deg); 1572 margin: 3px 3px 0 0; 1573 } 1574 #demos .explantion { 1575 border-left: 8px solid transparent; 1576 } 1577 #cta a { 1578 font-size: 14px; 1579 font-weight: 400; 1580 } 1581 } 1582 .people { 1583 margin-top: 30px; 1584 } 1585 .people .person { 1586 margin-bottom: 40px; 1587 } 1588 .people .person h3 { 1589 text-transform: none; 1590 } 1591 .people .person img { 1592 width: 125px; 1593 margin: auto auto; 1594 } 1595 .people .person .bio { 1596 padding-left: 150px; 1597 } 1598 body.page-sub { 1599 background-color: #242424; 1600 } 1601 body.layout-consul, 1602 body.layout-dnsimple, 1603 body.layout-cloudflare, 1604 body.layout-heroku, 1605 body.layout-digitalocean, 1606 body.layout-aws, 1607 body.layout-docs, 1608 body.layout-inner, 1609 body.layout-downloads, 1610 body.layout-intro { 1611 background: #242424 url('../images/sidebar-wire.png') left 62px no-repeat; 1612 } 1613 body.layout-consul > .container .col-md-8[role=main], 1614 body.layout-dnsimple > .container .col-md-8[role=main], 1615 body.layout-cloudflare > .container .col-md-8[role=main], 1616 body.layout-heroku > .container .col-md-8[role=main], 1617 body.layout-digitalocean > .container .col-md-8[role=main], 1618 body.layout-aws > .container .col-md-8[role=main], 1619 body.layout-docs > .container .col-md-8[role=main], 1620 body.layout-inner > .container .col-md-8[role=main], 1621 body.layout-downloads > .container .col-md-8[role=main], 1622 body.layout-intro > .container .col-md-8[role=main] { 1623 min-height: 800px; 1624 background-color: white; 1625 } 1626 body.layout-consul > .container .col-md-8[role=main] > div, 1627 body.layout-dnsimple > .container .col-md-8[role=main] > div, 1628 body.layout-cloudflare > .container .col-md-8[role=main] > div, 1629 body.layout-heroku > .container .col-md-8[role=main] > div, 1630 body.layout-digitalocean > .container .col-md-8[role=main] > div, 1631 body.layout-aws > .container .col-md-8[role=main] > div, 1632 body.layout-docs > .container .col-md-8[role=main] > div, 1633 body.layout-inner > .container .col-md-8[role=main] > div, 1634 body.layout-downloads > .container .col-md-8[role=main] > div, 1635 body.layout-intro > .container .col-md-8[role=main] > div { 1636 position: relative; 1637 z-index: 10; 1638 } 1639 .docs-sidebar { 1640 position: relative; 1641 z-index: 20; 1642 margin-bottom: 30px; 1643 margin-top: 50px; 1644 margin-right: 4%; 1645 } 1646 .docs-sidebar a { 1647 color: #822ff7; 1648 } 1649 .docs-sidebar .docs-sidenav { 1650 padding-top: 15px; 1651 padding-bottom: 15px; 1652 } 1653 .docs-sidebar .docs-sidenav :last-child { 1654 border-bottom: none; 1655 } 1656 .docs-sidebar .docs-sidenav li { 1657 position: relative; 1658 } 1659 .docs-sidebar .docs-sidenav li > a { 1660 color: white; 1661 -webkit-transition: color 0.5s ease; 1662 transition: color 0.5s ease; 1663 } 1664 .docs-sidebar .docs-sidenav li > a:hover, 1665 .docs-sidebar .docs-sidenav li > a:focus { 1666 background-color: transparent !important; 1667 color: white; 1668 -webkit-transition: color 0.5s ease; 1669 transition: color 0.5s ease; 1670 } 1671 .docs-sidebar .docs-sidenav > li { 1672 padding: 10px 0; 1673 margin: 0 30px; 1674 } 1675 .docs-sidebar .docs-sidenav > li > .nav li a { 1676 color: white; 1677 } 1678 .docs-sidebar .docs-sidenav > li.active { 1679 /*> a:hover, 1680 > a:focus { 1681 font-weight: @font-weight-lato-xb; 1682 }*/ 1683 } 1684 .docs-sidebar .docs-sidenav > li.active > a { 1685 color: #8e43f8; 1686 font-weight: 500; 1687 } 1688 .docs-sidebar .docs-sidenav > li.active:before { 1689 content: ''; 1690 position: absolute; 1691 width: 6px; 1692 height: 8px; 1693 background-color: #822ff7; 1694 font-weight: 500; 1695 -webkit-transform: skewY(24deg); 1696 -moz-transform: skewY(24deg); 1697 -ms-transform: skewY(24deg); 1698 -o-transform: skewY(24deg); 1699 transform: skewY(24deg); 1700 top: 26px; 1701 left: -10px; 1702 } 1703 .docs-sidebar .docs-sidenav > li.active > a { 1704 -webkit-font-smoothing: antialiased; 1705 } 1706 .docs-sidebar .docs-sidenav > li.active .nav { 1707 display: block; 1708 } 1709 .docs-sidebar .docs-sidenav > li.active .nav li.active a { 1710 color: #8e43f8; 1711 font-weight: 500; 1712 } 1713 .docs-sidebar .docs-sidenav > li > a { 1714 text-transform: uppercase; 1715 -webkit-font-smoothing: antialiased; 1716 } 1717 .docs-sidebar .docs-sidenav .nav { 1718 display: none; 1719 margin-bottom: 15px; 1720 } 1721 .docs-sidebar .docs-sidenav .nav > li { 1722 margin-left: 20px; 1723 } 1724 .docs-sidebar .docs-sidenav .nav > li > a { 1725 -webkit-font-smoothing: antialiased; 1726 padding: 6px 15px; 1727 } 1728 .docs-sidebar .docs-sidenav .nav-visible { 1729 display: block; 1730 } 1731 .bs-docs-section { 1732 padding-top: 10px; 1733 padding-left: 3%; 1734 padding-bottom: 80px; 1735 } 1736 .bs-docs-section .lead { 1737 margin-bottom: 48px; 1738 } 1739 .bs-docs-section .doc-sectional { 1740 margin-bottom: 48px; 1741 } 1742 .bs-docs-section p, 1743 .bs-docs-section li, 1744 .bs-docs-section .alert { 1745 font-size: 20px; 1746 font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; 1747 font-weight: 300; 1748 line-height: 1.5em; 1749 margin: 0 0 18px; 1750 -webkit-font-smoothing: antialiased; 1751 } 1752 .bs-docs-section pre { 1753 margin: 0 0 18px; 1754 } 1755 .bs-docs-section a { 1756 color: #822ff7; 1757 } 1758 .bs-docs-section a:hover { 1759 text-decoration: underline; 1760 } 1761 .bs-docs-section img { 1762 max-width: 650px; 1763 margin-top: 25px; 1764 margin-bottom: 25px; 1765 } 1766 .bs-docs-section h1 { 1767 color: #822ff7; 1768 text-transform: uppercase; 1769 padding-bottom: 24px; 1770 margin-top: 40px; 1771 margin-bottom: 24px; 1772 border-bottom: 1px solid #eeeeee; 1773 font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; 1774 font-weight: 300; 1775 } 1776 .bs-docs-section h2, 1777 .bs-docs-section h3, 1778 .bs-docs-section h4 { 1779 margin-bottom: 16px; 1780 } 1781 .bs-docs-section #graph { 1782 margin-top: 30px; 1783 } 1784 @media (max-width: 992px) { 1785 body.layout-docs > .container .col-md-8[role=main], 1786 body.layout-inner > .container .col-md-8[role=main], 1787 body.layout-intro > .container .col-md-8[role=main] { 1788 min-height: 0; 1789 } 1790 body.layout-docs > .container .col-md-8[role=main]::before, 1791 body.layout-inner > .container .col-md-8[role=main]::before, 1792 body.layout-intro > .container .col-md-8[role=main]::before { 1793 border-left: 9999px solid white; 1794 } 1795 body.page-sub > .container { 1796 background-color: white; 1797 } 1798 .docs-sidebar { 1799 margin-top: 0px; 1800 margin-bottom: 0px; 1801 } 1802 .docs-sidebar .docs-sidenav { 1803 padding-bottom: 0; 1804 } 1805 .docs-sidebar .docs-sidenav li > a { 1806 color: black; 1807 -webkit-transition: color 0.5s ease; 1808 transition: color 0.5s ease; 1809 } 1810 .docs-sidebar .docs-sidenav li > a:hover, 1811 .docs-sidebar .docs-sidenav li > a:focus { 1812 color: #822ff7; 1813 -webkit-transition: color 0.5s ease; 1814 transition: color 0.5s ease; 1815 } 1816 .docs-sidebar .docs-sidenav > li > .nav li a { 1817 color: black; 1818 } 1819 .docs-sidebar .docs-sidenav > li > .nav li a:hover { 1820 color: #822ff7; 1821 } 1822 .bs-docs-section h1 { 1823 padding-top: 24px; 1824 border-top: 1px solid #eeeeee; 1825 } 1826 } 1827 @media (max-width: 480px) { 1828 .bs-docs-section img { 1829 max-width: 450px; 1830 } 1831 .bs-docs-section h1 { 1832 font-size: 32px; 1833 } 1834 } 1835 .downloads { 1836 margin-top: 20px; 1837 } 1838 .downloads .description { 1839 margin-bottom: 20px; 1840 } 1841 .downloads .download { 1842 border-bottom: 1px solid #b2b2b2; 1843 padding-bottom: 15px; 1844 margin-top: 10px; 1845 margin-bottom: 10px; 1846 } 1847 .downloads .download .details { 1848 padding-left: 95px; 1849 } 1850 .downloads .download .details h2 { 1851 margin-top: 0px; 1852 } 1853 .downloads .download .details ul { 1854 padding-left: 0px; 1855 } 1856 .downloads .download .details li { 1857 display: inline-block; 1858 } 1859 .downloads .download .details li:after { 1860 content: " | "; 1861 } 1862 .downloads .download .details li:last-child:after { 1863 content: ""; 1864 } 1865 .downloads .download .icon img { 1866 width: 75px; 1867 } 1868 .downloads .download .os-name { 1869 font-size: 40px; 1870 margin-bottom: -3px; 1871 } 1872 .downloads .poweredby { 1873 margin-top: 20px; 1874 } 1875 .downloads .poweredby img { 1876 display: block; 1877 margin: 0 auto; 1878 width: 122px; 1879 } 1880 /*@import "modals.less";*/