seminar-style.css 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
  2. /* variable */
  3. :root {
  4. --base-color: #ff3639;
  5. --medium-gray: #8d8987;
  6. --black: #000;
  7. --dark-gray: #000;
  8. --red: #d51f0f;
  9. --green: #46b57e;
  10. --very-light-gray: #f9f6f3;
  11. --yellow: #ECBA23;
  12. --alt-font: 'Bebas Neue', cursive;
  13. --primary-font: 'Schibsted Grotesk', sans-serif;
  14. }
  15. body {
  16. font-size: 17px;
  17. }
  18. /* header */
  19. header .navbar-brand img {
  20. max-height: 49px;
  21. }
  22. .navbar .navbar-nav .nav-link {
  23. font-size: 20px;
  24. }
  25. header .btn.btn-switch-text.btn-small > span {
  26. padding: 11px 25px 9px;
  27. }
  28. .sticky .header-transparent .header-button .btn {
  29. background-color: var(--dark-gray);
  30. border-color: rgba(23, 23, 23, 0.20);
  31. color: var(--white);
  32. }
  33. .sticky .header-transparent .header-button .btn:hover {
  34. background-color: var(--dark-gray);
  35. color: var(--white);
  36. border-color: var(--dark-gray);
  37. }
  38. /* heading */
  39. h1, .h1 {
  40. line-height: 4rem;
  41. }
  42. h2 {
  43. line-height: 3.2rem;
  44. }
  45. /* btn */
  46. [class*="btn-transparent"], [class*=" btn-transparent"] {
  47. font-weight: 500;
  48. }
  49. .btn i {
  50. top: 0px;
  51. }
  52. .btn.btn-switch-text.btn-extra-large > span {
  53. font-size: 18px;
  54. padding: 19px 32px 16px;
  55. }
  56. .btn.btn-switch-text.btn-large > span {
  57. font-size: 17px;
  58. padding: 17px 28px 14px;
  59. }
  60. .btn.btn-switch-text.btn-medium > span {
  61. font-size: 16px;
  62. padding: 15px 24px 12px;
  63. }
  64. .btn.btn-switch-text.btn-small > span {
  65. font-size: 14px;
  66. padding: 13px 20px 11px;
  67. }
  68. .btn.btn-switch-text.btn-very-small > span {
  69. font-size: 13px;
  70. padding: 10px 18px 7px;
  71. }
  72. .btn.btn-link {
  73. padding: 0 0 2px;
  74. }
  75. .btn.btn-hover-animation-switch .btn-icon i {
  76. font-size: 24px;
  77. line-height: 0;
  78. top: -2px;
  79. }
  80. .btn.btn-hover-animation-switch .btn-icon {
  81. margin-left: 5px;
  82. }
  83. /* page title */
  84. .page-title-extra-large h1 {
  85. font-size: 5rem;
  86. line-height: 5rem;
  87. }
  88. .page-title-extra-large h2 {
  89. font-size: 15px;
  90. line-height: 26px;
  91. }
  92. /* border color */
  93. .border-color-extra-medium-gray {
  94. border-color: #c7c2bf !important;
  95. }
  96. /* bg color transparent */
  97. .bg-base-color-transparent {
  98. background: rgba(211,145,33,0.9);
  99. }
  100. .text-outline-base-color-background {
  101. -webkit-text-fill-color: var(--base-color);
  102. }
  103. .subscribe-popup .newsletter-style-05 .submit {
  104. font-size: 17px;
  105. }
  106. /* portfolio */
  107. .portfolio-filter li {
  108. padding: 0 35px;
  109. }
  110. /* top right bottom left */
  111. .top-minus-35px {
  112. top: -35px;
  113. }
  114. /* review */
  115. .review-star-icon i {
  116. letter-spacing: 1px;
  117. }
  118. /* categories */
  119. .categories-btn {
  120. line-height: 21px;
  121. letter-spacing: 0;
  122. padding: 3px 14px 4px;
  123. }
  124. /* blog comment */
  125. .blog-comment li .btn-reply {
  126. padding: 6px 20px 7px;
  127. }
  128. /* footer */
  129. footer .footer-logo img {
  130. max-height: 49px;
  131. }
  132. footer .elements-social li {
  133. margin: 0 22px 0 0;
  134. }
  135. footer .social-icon-style-08 ul li a:hover {
  136. opacity: 1;
  137. }
  138. footer .facebook {
  139. color: #3b5998;
  140. }
  141. footer .twitter {
  142. color: #00aced;
  143. }
  144. footer .elements-social ul li:last-child {
  145. margin-right: 0;
  146. }
  147. /* team style */
  148. .team-style-05:hover img {
  149. filter: grayscale(100%);
  150. }
  151. /* margin */
  152. .mt-minus-2px {
  153. margin-top: -2px;
  154. }
  155. /* map */
  156. .infowindow .mb-3 {
  157. font-weight: 500;
  158. font-size: 18px;
  159. letter-spacing: 0;
  160. }
  161. .infowindow p {
  162. font-size: 17px;
  163. letter-spacing: 0;
  164. }
  165. .google-maps-link a {
  166. font-size: 13px;
  167. letter-spacing: 1px;
  168. }
  169. /* media query responsive */
  170. @media (max-width: 1199px) {
  171. header .btn.btn-switch-text.btn-small > span {
  172. padding: 10px 15px 8px;
  173. }
  174. }
  175. @media (max-width: 991px) {
  176. header .btn.btn-transparent-white-light {
  177. background-color: var(--dark-gray);
  178. border-color: rgba(23, 23, 23, 0.20);
  179. color: var(--white);
  180. }
  181. }
  182. @media (max-width: 767px) {
  183. .portfolio-filter li {
  184. padding: 0;
  185. margin-bottom: 5px;
  186. }
  187. .sm-text-outline-width-1px {
  188. -webkit-text-stroke-width: 1px;
  189. }
  190. }
  191. @media (max-width: 575px) {
  192. .video-icon-large .video-icon {
  193. width: 75px;
  194. height: 75px;
  195. }
  196. .video-icon .video-icon-sonar .video-icon-sonar-bfr {
  197. top: -30px;
  198. left: -30px;
  199. }
  200. .xs-w-320px {
  201. width: 320px !important
  202. }
  203. .xs-h-320px {
  204. height: 320px !important;
  205. }
  206. .btn.btn-switch-text.btn-extra-large > span {
  207. font-size: 17px;
  208. padding: 14px 22px 11px;
  209. }
  210. }