2
0

carousel.css 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. /* GLOBAL STYLES
  2. -------------------------------------------------- */
  3. /* Padding below the footer and lighter body text */
  4. body {
  5. padding-top: 3rem;
  6. padding-bottom: 3rem;
  7. color: #5a5a5a;
  8. }
  9. /* CUSTOMIZE THE CAROUSEL
  10. -------------------------------------------------- */
  11. /* Carousel base class */
  12. .carousel {
  13. margin-bottom: 4rem;
  14. }
  15. /* Since positioning the image, we need to help out the caption */
  16. .carousel-caption {
  17. bottom: 3rem;
  18. z-index: 10;
  19. }
  20. /* Declare heights because of positioning of img element */
  21. .carousel-item {
  22. height: 32rem;
  23. }
  24. .carousel-item > img {
  25. position: absolute;
  26. top: 0;
  27. left: 0;
  28. min-width: 100%;
  29. height: 32rem;
  30. }
  31. /* MARKETING CONTENT
  32. -------------------------------------------------- */
  33. /* Center align the text within the three columns below the carousel */
  34. .marketing .col-lg-4 {
  35. margin-bottom: 1.5rem;
  36. text-align: center;
  37. }
  38. .marketing h2 {
  39. font-weight: 400;
  40. }
  41. /* rtl:begin:ignore */
  42. .marketing .col-lg-4 p {
  43. margin-right: .75rem;
  44. margin-left: .75rem;
  45. }
  46. /* rtl:end:ignore */
  47. /* Featurettes
  48. ------------------------- */
  49. .featurette-divider {
  50. margin: 5rem 0; /* Space out the Bootstrap <hr> more */
  51. }
  52. /* Thin out the marketing headings */
  53. .featurette-heading {
  54. font-weight: 300;
  55. line-height: 1;
  56. /* rtl:remove */
  57. letter-spacing: -.05rem;
  58. }
  59. /* RESPONSIVE CSS
  60. -------------------------------------------------- */
  61. @media (min-width: 40em) {
  62. /* Bump up size of carousel content */
  63. .carousel-caption p {
  64. margin-bottom: 1.25rem;
  65. font-size: 1.25rem;
  66. line-height: 1.4;
  67. }
  68. .featurette-heading {
  69. font-size: 50px;
  70. }
  71. }
  72. @media (min-width: 62em) {
  73. .featurette-heading {
  74. margin-top: 7rem;
  75. }
  76. }