cwg.css 4.5 KB

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