public/assets/bootstrap-rtl-3-3-4/examples/carousel/carousel.css

   1 /* GLOBAL STYLES
   2 -------------------------------------------------- */
   3 /* Padding below the footer and lighter body text */
   4
   5 body {
   6   padding-bottom: 40px;
   7   color: #5a5a5a;
   8 }
   9
  10
  11
  12 /* CUSTOMIZE THE NAVBAR
  13 -------------------------------------------------- */
  14
  15 /* Special class on .container surrounding .navbar, used for positioning it into place. */
  16 .navbar-wrapper {
  17   position: absolute;
  18   top: 0;
  19   right: 0;
  20   left: 0;
  21   z-index: 20;
  22 }
  23
  24 /* Flip around the padding for proper display in narrow viewports */
  25 .navbar-wrapper > .container {
  26   padding-right: 0;
  27   padding-left: 0;
  28 }
  29 .navbar-wrapper .navbar {
  30   padding-right: 15px;
  31   padding-left: 15px;
  32 }
  33 .navbar-wrapper .navbar .container {
  34   width: auto;
  35 }
  36
  37
  38 /* CUSTOMIZE THE CAROUSEL
  39 -------------------------------------------------- */
  40
  41 /* Carousel base class */
  42 .carousel {
  43   height: 500px;
  44   margin-bottom: 60px;
  45 }
  46 /* Since positioning the image, we need to help out the caption */
  47 .carousel-caption {
  48   z-index: 10;
  49 }
  50
  51 /* Declare heights because of positioning of img element */
  52 .carousel .item {
  53   height: 500px;
  54   background-color: #777;
  55 }
  56 .carousel-inner > .item > img {
  57   position: absolute;
  58   top: 0;
  59   left: 0;
  60   min-width: 100%;
  61   height: 500px;
  62 }
  63
  64
  65
  66 /* MARKETING CONTENT
  67 -------------------------------------------------- */
  68
  69 /* Center align the text within the three columns below the carousel */
  70 .marketing .col-lg-4 {
  71   margin-bottom: 20px;
  72   text-align: center;
  73 }
  74 .marketing h2 {
  75   font-weight: normal;
  76 }
  77 .marketing .col-lg-4 p {
  78   margin-right: 10px;
  79   margin-left: 10px;
  80 }
  81
  82
  83 /* Featurettes
  84 ------------------------- */
  85
  86 .featurette-divider {
  87   margin: 80px 0; /* Space out the Bootstrap <hr> more */
  88 }
  89
  90 /* Thin out the marketing headings */
  91 .featurette-heading {
  92   font-weight: 300;
  93   line-height: 1;
  94   letter-spacing: -1px;
  95 }
  96
  97
  98
  99 /* RESPONSIVE CSS
 100 -------------------------------------------------- */
 101
 102 @media (min-width: 768px) {
 103
 104   /* Navbar positioning foo */
 105   .navbar-wrapper {
 106     margin-top: 20px;
 107   }
 108   .navbar-wrapper .container {
 109     padding-right: 15px;
 110     padding-left: 15px;
 111   }
 112   .navbar-wrapper .navbar {
 113     padding-right: 0;
 114     padding-left: 0;
 115   }
 116
 117   /* The navbar becomes detached from the top, so we round the corners */
 118   .navbar-wrapper .navbar {
 119     border-radius: 4px;
 120   }
 121
 122   /* Bump up size of carousel content */
 123   .carousel-caption p {
 124     margin-bottom: 20px;
 125     font-size: 21px;
 126     line-height: 1.4;
 127   }
 128
 129   .featurette-heading {
 130     font-size: 50px;
 131   }
 132 }
 133
 134 @media (min-width: 992px) {
 135   .featurette-heading {
 136     margin-top: 120px;
 137   }
 138 }