You are here

Home » API reference » Bootstrap Basic Image Gallery 8

bootstrap.css in Bootstrap Basic Image Gallery 8 

/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/*!
 * Generated using the Bootstrap Customizer (http://getbootstrap.com/docs/3.3/customize/?id=b0d4688f6e2aab1720ebddcc971322df)
 * Config saved to config.json and https://gist.github.com/b0d4688f6e2aab1720ebddcc971322df
 */
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
.img-responsive,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}
.img-rounded {
  border-radius: 6px;
}
.img-thumbnail {
  padding: 4px;
  line-height: 1.42857143;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  display: inline-block;
  max-width: 100%;
  height: auto;
}
.img-circle {
  border-radius: 50%;
}
hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eeeeee;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}
[role="button"] {
  cursor: pointer;
}
.modal-open {
  overflow: hidden;
}
.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}
.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  -o-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}
.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}
.modal-content {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #999999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  outline: 0;
}
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000000;
}
.modal-backdrop.fade {
  opacity: 0;
  filter: alpha(opacity=0);
}
.modal-backdrop.in {
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.modal-header .close {
  margin-top: -2px;
}
.modal-title {
  margin: 0;
  line-height: 1.42857143;
}
.modal-body {
  position: relative;
  padding: 15px;
}
.modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}
.modal-footer .btn + .btn {
  margin-left: 5px;
  margin-bottom: 0;
}
.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
  margin-left: 0;
}
.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}
@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  }
  .modal-sm {
    width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}
.carousel {
  position: relative;
}
.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.carousel-inner > .item {
  display: none;
  position: relative;
  -webkit-transition: 0.6s ease-in-out left;
  -o-transition: 0.6s ease-in-out left;
  transition: 0.6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  line-height: 1;
}
@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item {
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    -o-transition: -o-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
  }
  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    left: 0;
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    left: 0;
  }
  .carousel-inner > .item.next.left,
  .carousel-inner > .item.prev.right,
  .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0;
  }
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}
.carousel-inner > .active {
  left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}
.carousel-inner > .next {
  left: 100%;
}
.carousel-inner > .prev {
  left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}
.carousel-inner > .active.left {
  left: -100%;
}
.carousel-inner > .active.right {
  left: 100%;
}
.carousel-control {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 15%;
  opacity: 0.5;
  filter: alpha(opacity=50);
  font-size: 20px;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  background-color: rgba(0, 0, 0, 0);
}
.carousel-control.left {
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
  left: auto;
  right: 0;
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
.carousel-control:hover,
.carousel-control:focus {
  outline: 0;
  color: #ffffff;
  text-decoration: none;
  opacity: 0.9;
  filter: alpha(opacity=90);
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  position: absolute;
  top: 50%;
  margin-top: -10px;
  z-index: 5;
  display: inline-block;
}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
  left: 50%;
  margin-left: -10px;
}
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
  right: 50%;
  margin-right: -10px;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
  width: 20px;
  height: 20px;
  line-height: 1;
  font-family: serif;
}
.carousel-control .icon-prev:before {
  content: '\2039';
}
.carousel-control .icon-next:before {
  content: '\203a';
}
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  margin-left: -30%;
  padding-left: 0;
  list-style: none;
  text-align: center;
}
.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  border: 1px solid #ffffff;
  border-radius: 10px;
  cursor: pointer;
  background-color: #000 \9;
  background-color: rgba(0, 0, 0, 0);
}
.carousel-indicators .active {
  margin: 0;
  width: 12px;
  height: 12px;
  background-color: #ffffff;
}
.carousel-caption {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 20px;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-caption .btn {
  text-shadow: none;
}
@media screen and (min-width: 768px) {
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .glyphicon-chevron-right,
  .carousel-control .icon-prev,
  .carousel-control .icon-next {
    width: 30px;
    height: 30px;
    margin-top: -10px;
    font-size: 30px;
  }
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .icon-prev {
    margin-left: -10px;
  }
  .carousel-control .glyphicon-chevron-right,
  .carousel-control .icon-next {
    margin-right: -10px;
  }
  .carousel-caption {
    left: 20%;
    right: 20%;
    padding-bottom: 30px;
  }
  .carousel-indicators {
    bottom: 20px;
  }
}
.clearfix:before,
.clearfix:after,
.modal-header:before,
.modal-header:after,
.modal-footer:before,
.modal-footer:after {
  content: " ";
  display: table;
}
.clearfix:after,
.modal-header:after,
.modal-footer:after {
  clear: both;
}
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}
.hide {
  display: none !important;
}
.show {
  display: block !important;
}
.invisible {
  visibility: hidden;
}
.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.hidden {
  display: none !important;
}
.affix {
  position: fixed;
}

File

bootstrap/css/bootstrap.css
View source 
  1. /*!

  2.  * Bootstrap v3.3.7 (http://getbootstrap.com)

  3.  * Copyright 2011-2017 Twitter, Inc.

  4.  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

  5.  */

  6. 

  7. /*!

  8.  * Generated using the Bootstrap Customizer (http://getbootstrap.com/docs/3.3/customize/?id=b0d4688f6e2aab1720ebddcc971322df)

  9.  * Config saved to config.json and https://gist.github.com/b0d4688f6e2aab1720ebddcc971322df

  10.  */

  11. /*!

  12.  * Bootstrap v3.3.7 (http://getbootstrap.com)

  13.  * Copyright 2011-2016 Twitter, Inc.

  14.  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

  15.  */

  16. /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

  17. .img-responsive,

  18. .carousel-inner > .item > img,

  19. .carousel-inner > .item > a > img {

  20.   display: block;

  21.   max-width: 100%;

  22.   height: auto;

  23. }

  24. .img-rounded {

  25.   border-radius: 6px;

  26. }

  27. .img-thumbnail {

  28.   padding: 4px;

  29.   line-height: 1.42857143;

  30.   background-color: #ffffff;

  31.   border: 1px solid #dddddd;

  32.   border-radius: 4px;

  33.   -webkit-transition: all 0.2s ease-in-out;

  34.   -o-transition: all 0.2s ease-in-out;

  35.   transition: all 0.2s ease-in-out;

  36.   display: inline-block;

  37.   max-width: 100%;

  38.   height: auto;

  39. }

  40. .img-circle {

  41.   border-radius: 50%;

  42. }

  43. hr {

  44.   margin-top: 20px;

  45.   margin-bottom: 20px;

  46.   border: 0;

  47.   border-top: 1px solid #eeeeee;

  48. }

  49. .sr-only {

  50.   position: absolute;

  51.   width: 1px;

  52.   height: 1px;

  53.   margin: -1px;

  54.   padding: 0;

  55.   overflow: hidden;

  56.   clip: rect(0, 0, 0, 0);

  57.   border: 0;

  58. }

  59. .sr-only-focusable:active,

  60. .sr-only-focusable:focus {

  61.   position: static;

  62.   width: auto;

  63.   height: auto;

  64.   margin: 0;

  65.   overflow: visible;

  66.   clip: auto;

  67. }

  68. [role="button"] {

  69.   cursor: pointer;

  70. }

  71. .modal-open {

  72.   overflow: hidden;

  73. }

  74. .modal {

  75.   display: none;

  76.   overflow: hidden;

  77.   position: fixed;

  78.   top: 0;

  79.   right: 0;

  80.   bottom: 0;

  81.   left: 0;

  82.   z-index: 1050;

  83.   -webkit-overflow-scrolling: touch;

  84.   outline: 0;

  85. }

  86. .modal.fade .modal-dialog {

  87.   -webkit-transform: translate(0, -25%);

  88.   -ms-transform: translate(0, -25%);

  89.   -o-transform: translate(0, -25%);

  90.   transform: translate(0, -25%);

  91.   -webkit-transition: -webkit-transform 0.3s ease-out;

  92.   -o-transition: -o-transform 0.3s ease-out;

  93.   transition: transform 0.3s ease-out;

  94. }

  95. .modal.in .modal-dialog {

  96.   -webkit-transform: translate(0, 0);

  97.   -ms-transform: translate(0, 0);

  98.   -o-transform: translate(0, 0);

  99.   transform: translate(0, 0);

  100. }

  101. .modal-open .modal {

  102.   overflow-x: hidden;

  103.   overflow-y: auto;

  104. }

  105. .modal-dialog {

  106.   position: relative;

  107.   width: auto;

  108.   margin: 10px;

  109. }

  110. .modal-content {

  111.   position: relative;

  112.   background-color: #ffffff;

  113.   border: 1px solid #999999;

  114.   border: 1px solid rgba(0, 0, 0, 0.2);

  115.   border-radius: 6px;

  116.   -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);

  117.   box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);

  118.   -webkit-background-clip: padding-box;

  119.   background-clip: padding-box;

  120.   outline: 0;

  121. }

  122. .modal-backdrop {

  123.   position: fixed;

  124.   top: 0;

  125.   right: 0;

  126.   bottom: 0;

  127.   left: 0;

  128.   z-index: 1040;

  129.   background-color: #000000;

  130. }

  131. .modal-backdrop.fade {

  132.   opacity: 0;

  133.   filter: alpha(opacity=0);

  134. }

  135. .modal-backdrop.in {

  136.   opacity: 0.5;

  137.   filter: alpha(opacity=50);

  138. }

  139. .modal-header {

  140.   padding: 15px;

  141.   border-bottom: 1px solid #e5e5e5;

  142. }

  143. .modal-header .close {

  144.   margin-top: -2px;

  145. }

  146. .modal-title {

  147.   margin: 0;

  148.   line-height: 1.42857143;

  149. }

  150. .modal-body {

  151.   position: relative;

  152.   padding: 15px;

  153. }

  154. .modal-footer {

  155.   padding: 15px;

  156.   text-align: right;

  157.   border-top: 1px solid #e5e5e5;

  158. }

  159. .modal-footer .btn + .btn {

  160.   margin-left: 5px;

  161.   margin-bottom: 0;

  162. }

  163. .modal-footer .btn-group .btn + .btn {

  164.   margin-left: -1px;

  165. }

  166. .modal-footer .btn-block + .btn-block {

  167.   margin-left: 0;

  168. }

  169. .modal-scrollbar-measure {

  170.   position: absolute;

  171.   top: -9999px;

  172.   width: 50px;

  173.   height: 50px;

  174.   overflow: scroll;

  175. }

  176. @media (min-width: 768px) {

  177.   .modal-dialog {

  178.     width: 600px;

  179.     margin: 30px auto;

  180.   }

  181.   .modal-content {

  182.     -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

  183.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);

  184.   }

  185.   .modal-sm {

  186.     width: 300px;

  187.   }

  188. }

  189. @media (min-width: 992px) {

  190.   .modal-lg {

  191.     width: 900px;

  192.   }

  193. }

  194. .carousel {

  195.   position: relative;

  196. }

  197. .carousel-inner {

  198.   position: relative;

  199.   overflow: hidden;

  200.   width: 100%;

  201. }

  202. .carousel-inner > .item {

  203.   display: none;

  204.   position: relative;

  205.   -webkit-transition: 0.6s ease-in-out left;

  206.   -o-transition: 0.6s ease-in-out left;

  207.   transition: 0.6s ease-in-out left;

  208. }

  209. .carousel-inner > .item > img,

  210. .carousel-inner > .item > a > img {

  211.   line-height: 1;

  212. }

  213. @media all and (transform-3d), (-webkit-transform-3d) {

  214.   .carousel-inner > .item {

  215.     -webkit-transition: -webkit-transform 0.6s ease-in-out;

  216.     -o-transition: -o-transform 0.6s ease-in-out;

  217.     transition: transform 0.6s ease-in-out;

  218.     -webkit-backface-visibility: hidden;

  219.     backface-visibility: hidden;

  220.     -webkit-perspective: 1000px;

  221.     perspective: 1000px;

  222.   }

  223.   .carousel-inner > .item.next,

  224.   .carousel-inner > .item.active.right {

  225.     -webkit-transform: translate3d(100%, 0, 0);

  226.     transform: translate3d(100%, 0, 0);

  227.     left: 0;

  228.   }

  229.   .carousel-inner > .item.prev,

  230.   .carousel-inner > .item.active.left {

  231.     -webkit-transform: translate3d(-100%, 0, 0);

  232.     transform: translate3d(-100%, 0, 0);

  233.     left: 0;

  234.   }

  235.   .carousel-inner > .item.next.left,

  236.   .carousel-inner > .item.prev.right,

  237.   .carousel-inner > .item.active {

  238.     -webkit-transform: translate3d(0, 0, 0);

  239.     transform: translate3d(0, 0, 0);

  240.     left: 0;

  241.   }

  242. }

  243. .carousel-inner > .active,

  244. .carousel-inner > .next,

  245. .carousel-inner > .prev {

  246.   display: block;

  247. }

  248. .carousel-inner > .active {

  249.   left: 0;

  250. }

  251. .carousel-inner > .next,

  252. .carousel-inner > .prev {

  253.   position: absolute;

  254.   top: 0;

  255.   width: 100%;

  256. }

  257. .carousel-inner > .next {

  258.   left: 100%;

  259. }

  260. .carousel-inner > .prev {

  261.   left: -100%;

  262. }

  263. .carousel-inner > .next.left,

  264. .carousel-inner > .prev.right {

  265.   left: 0;

  266. }

  267. .carousel-inner > .active.left {

  268.   left: -100%;

  269. }

  270. .carousel-inner > .active.right {

  271.   left: 100%;

  272. }

  273. .carousel-control {

  274.   position: absolute;

  275.   top: 0;

  276.   left: 0;

  277.   bottom: 0;

  278.   width: 15%;

  279.   opacity: 0.5;

  280.   filter: alpha(opacity=50);

  281.   font-size: 20px;

  282.   color: #ffffff;

  283.   text-align: center;

  284.   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);

  285.   background-color: rgba(0, 0, 0, 0);

  286. }

  287. .carousel-control.left {

  288.   background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);

  289.   background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);

  290.   background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));

  291.   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);

  292.   background-repeat: repeat-x;

  293.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);

  294. }

  295. .carousel-control.right {

  296.   left: auto;

  297.   right: 0;

  298.   background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);

  299.   background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);

  300.   background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));

  301.   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);

  302.   background-repeat: repeat-x;

  303.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);

  304. }

  305. .carousel-control:hover,

  306. .carousel-control:focus {

  307.   outline: 0;

  308.   color: #ffffff;

  309.   text-decoration: none;

  310.   opacity: 0.9;

  311.   filter: alpha(opacity=90);

  312. }

  313. .carousel-control .icon-prev,

  314. .carousel-control .icon-next,

  315. .carousel-control .glyphicon-chevron-left,

  316. .carousel-control .glyphicon-chevron-right {

  317.   position: absolute;

  318.   top: 50%;

  319.   margin-top: -10px;

  320.   z-index: 5;

  321.   display: inline-block;

  322. }

  323. .carousel-control .icon-prev,

  324. .carousel-control .glyphicon-chevron-left {

  325.   left: 50%;

  326.   margin-left: -10px;

  327. }

  328. .carousel-control .icon-next,

  329. .carousel-control .glyphicon-chevron-right {

  330.   right: 50%;

  331.   margin-right: -10px;

  332. }

  333. .carousel-control .icon-prev,

  334. .carousel-control .icon-next {

  335.   width: 20px;

  336.   height: 20px;

  337.   line-height: 1;

  338.   font-family: serif;

  339. }

  340. .carousel-control .icon-prev:before {

  341.   content: '\2039';

  342. }

  343. .carousel-control .icon-next:before {

  344.   content: '\203a';

  345. }

  346. .carousel-indicators {

  347.   position: absolute;

  348.   bottom: 10px;

  349.   left: 50%;

  350.   z-index: 15;

  351.   width: 60%;

  352.   margin-left: -30%;

  353.   padding-left: 0;

  354.   list-style: none;

  355.   text-align: center;

  356. }

  357. .carousel-indicators li {

  358.   display: inline-block;

  359.   width: 10px;

  360.   height: 10px;

  361.   margin: 1px;

  362.   text-indent: -999px;

  363.   border: 1px solid #ffffff;

  364.   border-radius: 10px;

  365.   cursor: pointer;

  366.   background-color: #000 \9;

  367.   background-color: rgba(0, 0, 0, 0);

  368. }

  369. .carousel-indicators .active {

  370.   margin: 0;

  371.   width: 12px;

  372.   height: 12px;

  373.   background-color: #ffffff;

  374. }

  375. .carousel-caption {

  376.   position: absolute;

  377.   left: 15%;

  378.   right: 15%;

  379.   bottom: 20px;

  380.   z-index: 10;

  381.   padding-top: 20px;

  382.   padding-bottom: 20px;

  383.   color: #ffffff;

  384.   text-align: center;

  385.   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);

  386. }

  387. .carousel-caption .btn {

  388.   text-shadow: none;

  389. }

  390. @media screen and (min-width: 768px) {

  391.   .carousel-control .glyphicon-chevron-left,

  392.   .carousel-control .glyphicon-chevron-right,

  393.   .carousel-control .icon-prev,

  394.   .carousel-control .icon-next {

  395.     width: 30px;

  396.     height: 30px;

  397.     margin-top: -10px;

  398.     font-size: 30px;

  399.   }

  400.   .carousel-control .glyphicon-chevron-left,

  401.   .carousel-control .icon-prev {

  402.     margin-left: -10px;

  403.   }

  404.   .carousel-control .glyphicon-chevron-right,

  405.   .carousel-control .icon-next {

  406.     margin-right: -10px;

  407.   }

  408.   .carousel-caption {

  409.     left: 20%;

  410.     right: 20%;

  411.     padding-bottom: 30px;

  412.   }

  413.   .carousel-indicators {

  414.     bottom: 20px;

  415.   }

  416. }

  417. .clearfix:before,

  418. .clearfix:after,

  419. .modal-header:before,

  420. .modal-header:after,

  421. .modal-footer:before,

  422. .modal-footer:after {

  423.   content: " ";

  424.   display: table;

  425. }

  426. .clearfix:after,

  427. .modal-header:after,

  428. .modal-footer:after {

  429.   clear: both;

  430. }

  431. .center-block {

  432.   display: block;

  433.   margin-left: auto;

  434.   margin-right: auto;

  435. }

  436. .pull-right {

  437.   float: right !important;

  438. }

  439. .pull-left {

  440.   float: left !important;

  441. }

  442. .hide {

  443.   display: none !important;

  444. }

  445. .show {

  446.   display: block !important;

  447. }

  448. .invisible {

  449.   visibility: hidden;

  450. }

  451. .text-hide {

  452.   font: 0/0 a;

  453.   color: transparent;

  454.   text-shadow: none;

  455.   background-color: transparent;

  456.   border: 0;

  457. }

  458. .hidden {

  459.   display: none !important;

  460. }

  461. .affix {

  462.   position: fixed;

  463. }