greyscale.css 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
  1. /*!
  2. * Start Bootstrap - Grayscale v5.0.4 (https://startbootstrap.com/template-overviews/grayscale)
  3. * Copyright 2013-2019 Start Bootstrap
  4. * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-grayscale/blob/master/LICENSE)
  5. */
  6. a {
  7. color: #212529;
  8. text-decoration: none;
  9. }
  10. a:hover {
  11. color: #1e7e34;
  12. }
  13. @media (min-width: 992px) {
  14. .header-image {
  15. background: url("/client-assets/FredTemplate/images/1.jpg") no-repeat center center;
  16. }
  17. }
  18. @media (min-width: 992px) {
  19. .masthead {
  20. height: 100vh;
  21. padding: 0;
  22. }
  23. }
  24. .about-section {
  25. padding-top: 5rem;
  26. /*background: -webkit-gradient(linear, left top, left bottom, from(#161616), color-stop(75%, rgba(22, 22, 22, 0.9)), to(rgba(22, 22, 22, 0.8)));
  27. background: linear-gradient(to bottom, #161616 0%, rgba(22, 22, 22, 0.9) 75%, rgba(22, 22, 22, 0.8) 100%);*/
  28. }
  29. .about-section p {
  30. margin-bottom: 5rem;
  31. }
  32. .projects-section {
  33. padding: 5rem 0;
  34. }
  35. .projects-section .featured-text {
  36. padding: 2rem;
  37. }
  38. @media (min-width: 992px) {
  39. .projects-section .featured-text {
  40. padding: 0 0 0 2rem;
  41. border-left: 0.5rem solid #28a745;
  42. }
  43. }
  44. .projects-section .project-text {
  45. padding: 3rem;
  46. font-size: 90%;
  47. }
  48. @media (min-width: 992px) {
  49. .projects-section .project-text {
  50. padding: 5rem;
  51. }
  52. .projects-section .project-text hr {
  53. border-color: #28a745;
  54. border-width: .25rem;
  55. width: 30%;
  56. }
  57. }
  58. .signup-section {
  59. padding: 5rem 0;
  60. background: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 22, 22, 0.1)), color-stop(75%, rgba(22, 22, 22, 0.5)), to(#161616)), url("../images/grass.jpg");
  61. background: linear-gradient(to bottom, rgba(22, 22, 22, 0.1) 0%, rgba(22, 22, 22, 0.5) 75%, #161616 100%), url("../images/grass.jpg");
  62. background-position: center;
  63. background-repeat: no-repeat;
  64. background-attachment: scroll;
  65. background-size: cover;
  66. }
  67. .signup-section .form-inline input {
  68. -webkit-box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
  69. box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
  70. padding: 1.25rem 2rem;
  71. height: auto;
  72. font-size: 80%;
  73. text-transform: uppercase;
  74. letter-spacing: 0.15rem;
  75. border: 0;
  76. }
  77. .contact-section {
  78. padding: 5rem 0 0;
  79. }
  80. .contact-section .card {
  81. border: 0;
  82. border-bottom: 0.25rem solid #64a19d;
  83. }
  84. .contact-section .card h4 {
  85. font-size: 0.8rem;
  86. text-transform: uppercase;
  87. letter-spacing: 0.15rem;
  88. }
  89. .contact-section .card hr {
  90. border-color: #28a745;
  91. border-width: 0.25rem;
  92. width: 3rem;
  93. }
  94. .contact-section .social {
  95. margin-top: 5rem;
  96. }
  97. .contact-section .social a {
  98. text-align: center;
  99. height: 3rem;
  100. width: 3rem;
  101. background: rgba(255, 255, 255, 0.1);
  102. border-radius: 100%;
  103. line-height: 3rem;
  104. color: rgba(255, 255, 255, 0.3);
  105. }
  106. .contact-section .social a:hover {
  107. color: rgba(255, 255, 255, 0.5);
  108. }
  109. .contact-section .social a:active {
  110. color: #fff;
  111. }
  112. hr.divider {
  113. max-width: 3.25rem;
  114. border-width: 0.2rem;
  115. border-color: #343a40;
  116. }
  117. hr.light {
  118. border-color: #fff;
  119. }
  120. /* ******************************** MOVING BACKGROUND ****************************************** */
  121. @keyframes moveclouds{
  122. 0%{
  123. margin-left:100%
  124. }
  125. 100%{
  126. margin-left:-100%
  127. }
  128. }
  129. @-webkit-keyframes moveclouds{
  130. 0%{
  131. margin-left:100%
  132. }
  133. 100%{
  134. margin-left:-100%
  135. }
  136. }
  137. @keyframes moveclouds2{
  138. 0%{
  139. margin-left:100%
  140. }
  141. 50%{
  142. margin-left:100%
  143. }
  144. 100%{
  145. margin-left:-100%
  146. }
  147. }
  148. @-webkit-keyframes moveclouds2{
  149. 0%{
  150. margin-left:100%
  151. }
  152. 50%{
  153. margin-left:100%
  154. }
  155. 100%{
  156. margin-left:-100%
  157. }
  158. }
  159. .background{
  160. height:100%;
  161. left:0;
  162. position:fixed;
  163. top:0;
  164. width:100%
  165. }
  166. .background .layer{
  167. height:100%;
  168. left:0;
  169. overflow:hidden;
  170. position:absolute;
  171. top:0;
  172. width:100%
  173. }
  174. .background .clouds{
  175. overflow:hidden
  176. }
  177. .background .clouds .cloud{
  178. bottom:0;
  179. left:0;
  180. position:absolute;
  181. -webkit-transform:translate3d(0, 0, 0);
  182. transform:translate3d(0, 0, 0);
  183. width:100%;
  184. will-change:transform
  185. }
  186. .background .clouds .cloud-1{
  187. -webkit-animation:moveclouds 15s linear infinite;
  188. animation:moveclouds 15s linear infinite
  189. }
  190. .background .clouds .cloud-2{
  191. -webkit-animation:moveclouds 20s linear infinite;
  192. animation:moveclouds 20s linear infinite
  193. }
  194. .background .clouds .cloud-3{
  195. -webkit-animation:moveclouds2 25s linear infinite;
  196. animation:moveclouds2 25s linear infinite
  197. }
  198. header.masthead {
  199. padding-top: 10rem;
  200. padding-bottom: calc(10rem - 72px);
  201. /* background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url("../img/bg-masthead.jpg"); */
  202. background-position: center;
  203. background-repeat: no-repeat;
  204. background-attachment: fixed;
  205. background-size: cover;
  206. }
  207. header.masthead h1 {
  208. font-size: 2.25rem;
  209. }
  210. header {
  211. position: relative;
  212. background-color: black;
  213. height: 75vh;
  214. min-height: 25rem;
  215. width: 100%;
  216. overflow: hidden;
  217. }
  218. header .overlay {
  219. position: absolute;
  220. top: 0;
  221. left: 0;
  222. height: 100%;
  223. width: 100%;
  224. background-color: black;
  225. opacity: 0.3;
  226. z-index: 2;
  227. }
  228. header video {
  229. position: absolute;
  230. top: 50%;
  231. left: 50%;
  232. min-width: 100%;
  233. min-height: 100%;
  234. width: auto;
  235. height: auto;
  236. z-index: 0;
  237. -ms-transform: translateX(-50%) translateY(-50%);
  238. -moz-transform: translateX(-50%) translateY(-50%);
  239. -webkit-transform: translateX(-50%) translateY(-50%);
  240. transform: translateX(-50%) translateY(-50%);
  241. }
  242. header .container {
  243. position: relative;
  244. z-index: 2;
  245. }
  246. /* MAIN NAV */
  247. #mainNav {
  248. box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  249. background-color: rgba(255, 255, 255, 0.7);
  250. transition: background-color 0.2s ease;
  251. }
  252. #mainNav .navbar-nav .nav-item .nav-link {
  253. color: #6c757d;
  254. font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  255. font-weight: 700;
  256. font-size: 0.9rem;
  257. padding: 0.75rem 0;
  258. }
  259. #mainNav .navbar-nav .nav-item .nav-link:hover, #mainNav .navbar-nav .nav-item .nav-link:active {
  260. color: #1e7e34;
  261. }
  262. #mainNav .navbar-nav .nav-item .nav-link.active {
  263. color: #28a745 !important;
  264. }
  265. @media (min-width: 992px) {
  266. #mainNav {
  267. box-shadow: none;
  268. background-color: transparent;
  269. }
  270. #mainNav .navbar-brand {
  271. color: rgba(255, 255, 255, 0.7);
  272. }
  273. #mainNav .navbar-brand:hover {
  274. color: #fff;
  275. }
  276. #mainNav .navbar-nav .nav-item .nav-link {
  277. color: rgba(255, 255, 255, 0.7);
  278. padding: 0 1rem;
  279. }
  280. #mainNav .navbar-nav .nav-item .nav-link:hover {
  281. color: #fff;
  282. }
  283. #mainNav .navbar-nav .nav-item:last-child .nav-link {
  284. padding-right: 0;
  285. }
  286. #mainNav.navbar-scrolled {
  287. box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  288. background-color: #fff;
  289. }
  290. #mainNav.navbar-scrolled .navbar-brand {
  291. color: #212529;
  292. }
  293. #mainNav.navbar-scrolled .navbar-brand:hover {
  294. color: #1e7e34;
  295. }
  296. #mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link {
  297. color: #212529;
  298. }
  299. #mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link:hover {
  300. color: #1e7e34;
  301. }
  302. }