mislider-custom.css 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. /* Custom miSlider CSS ========================================= */
  2. .mis-stage {
  3. }
  4. .mis-slider {
  5. /* Slider element does not need to be a specific height
  6. Here we use it to create a stylish bar behind slides */
  7. margin-top: 3em;
  8. height: 170px;
  9. }
  10. .mis-slider li a {
  11. text-decoration: none;
  12. color: #fff;
  13. display: block;
  14. text-transform: uppercase;
  15. font-weight: 600;
  16. }
  17. .mis-slider li figcaption {
  18. font-size: 1em;
  19. margin: 1em 0 0;
  20. }
  21. .mis-slider figcaption span{
  22. color: #000;
  23. text-transform: capitalize;
  24. font-weight: 500;
  25. margin: 0.5em 0 0;
  26. line-height: 2em;
  27. font-size: 14px;
  28. display:none;
  29. position:relative;
  30. padding-left:1.5em;
  31. }
  32. .mis-slider figcaption span:before{
  33. content:"\f10d";
  34. position:absolute;
  35. left:0%;
  36. top:0%;
  37. font-family:FontAwesome;
  38. font-size:1em;
  39. color:#212121;
  40. }
  41. li.mis-slide.mis-current figcaption span{
  42. display:block;
  43. }
  44. .mis-slider li img {
  45. border-radius: 135px;
  46. border: 3px solid #34b3f5;
  47. margin: 0 auto;
  48. }
  49. .mis-slide {
  50. /* Set width in pixels to restrict width of slides
  51. for multi-item slider, default width is 100%
  52. for single-item slider. Use padding to add space
  53. between slides */
  54. width: 200px;
  55. height: 150px;
  56. }
  57. .mis-nav-buttons a {
  58. color: #fff;
  59. }
  60. @media (max-width:900px){
  61. .mis-slider {
  62. height: 220px;
  63. }
  64. .mis-slide {
  65. height: 230px;
  66. }
  67. .mis-slider {
  68. margin-top: 2em;
  69. }
  70. }
  71. @media (max-width:480px){
  72. .mis-slider figcaption span:before {
  73. left: 8%;
  74. }
  75. .mis-slider {
  76. height: 185px;
  77. }
  78. }
  79. @media (max-width:384px){
  80. .mis-slider figcaption span:before {
  81. left: 5%;
  82. }
  83. .mis-slider {
  84. height: 210px;
  85. }
  86. }
  87. @media (max-width:320px){
  88. .mis-slider figcaption span {
  89. font-size: 13px;
  90. }
  91. }