reset.css 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988
  1. /* --------------------------------
  2. Main Components
  3. -------------------------------- */
  4. header {
  5. height: 65px;
  6. }
  7. .cd-dropdown-wrapper {
  8. display: inline-block;
  9. position: relative;
  10. height: 40px;
  11. margin: 0 0 0 0%;
  12. -webkit-font-smoothing: antialiased;
  13. -moz-osx-font-smoothing: grayscale;
  14. float: right;
  15. }
  16. .house_toggle i{
  17. font-size:17px;
  18. }
  19. .cd-dropdown-trigger {
  20. display: block;
  21. position: relative;
  22. padding: 0 36px 0 20px;
  23. line-height: 40px;
  24. background-color: #111433;
  25. color: #ffffff;
  26. border-radius: 3px;
  27. }
  28. .no-touch .cd-dropdown-trigger:hover {
  29. background-color: #171b46;
  30. }
  31. .cd-dropdown-trigger::before, .cd-dropdown-trigger::after {
  32. /* this is the arrow inside the dropdown trigger*/
  33. content: '';
  34. position: absolute;
  35. top: 50%;
  36. margin-top: -1px;
  37. height: 2px;
  38. width: 9px;
  39. background: #ffffff;
  40. -webkit-backface-visibility: hidden;
  41. backface-visibility: hidden;
  42. -webkit-transition: width 0.3s, -webkit-transform 0.3s;
  43. -moz-transition: width 0.3s, -moz-transform 0.3s;
  44. transition: width 0.3s, transform 0.3s;
  45. }
  46. .cd-dropdown-trigger::before {
  47. right: 22px;
  48. -webkit-transform: rotate(45deg);
  49. -moz-transform: rotate(45deg);
  50. -ms-transform: rotate(45deg);
  51. -o-transform: rotate(45deg);
  52. transform: rotate(45deg);
  53. }
  54. .cd-dropdown-trigger::after {
  55. right: 17px;
  56. -webkit-transform: rotate(-45deg);
  57. -moz-transform: rotate(-45deg);
  58. -ms-transform: rotate(-45deg);
  59. -o-transform: rotate(-45deg);
  60. transform: rotate(-45deg);
  61. }
  62. @media only screen and (min-width: 1024px) {
  63. .cd-dropdown-trigger {
  64. font-size: 1.5rem;
  65. }
  66. .cd-dropdown-trigger.dropdown-is-active {
  67. background-color: #3f8654;
  68. }
  69. .no-touch .cd-dropdown-trigger.dropdown-is-active:hover {
  70. background-color: #47975f;
  71. }
  72. .cd-dropdown-trigger.dropdown-is-active::before, .cd-dropdown-trigger.dropdown-is-active::after {
  73. /* transform the arrow into a 'X' */
  74. width: 14px;
  75. }
  76. .cd-dropdown-trigger.dropdown-is-active::before {
  77. /* transform the arrow into a 'X' */
  78. -webkit-transform: translateX(5px) rotate(-45deg);
  79. -moz-transform: translateX(5px) rotate(-45deg);
  80. -ms-transform: translateX(5px) rotate(-45deg);
  81. -o-transform: translateX(5px) rotate(-45deg);
  82. transform: translateX(5px) rotate(-45deg);
  83. }
  84. .cd-dropdown-trigger.dropdown-is-active::after {
  85. /* transform the arrow into a 'X' */
  86. -webkit-transform: rotate(45deg);
  87. -moz-transform: rotate(45deg);
  88. -ms-transform: rotate(45deg);
  89. -o-transform: rotate(45deg);
  90. transform: rotate(45deg);
  91. }
  92. }
  93. .cd-dropdown h2,
  94. .cd-dropdown-content a,
  95. .cd-dropdown-content ul a {
  96. height: 50px;
  97. line-height: 50px;
  98. }
  99. @media only screen and (min-width: 768px) {
  100. .cd-dropdown h2,
  101. .cd-dropdown-content a,
  102. .cd-dropdown-content ul a {
  103. height: 60px;
  104. line-height: 60px;
  105. }
  106. }
  107. @media only screen and (min-width: 1024px) {
  108. .cd-dropdown h2,
  109. .cd-dropdown-content a,
  110. .cd-dropdown-content ul a {
  111. height: 50px;
  112. line-height: 50px;
  113. }
  114. }
  115. .cd-dropdown h2,
  116. .cd-dropdown-content a,
  117. .cd-dropdown-content ul a,
  118. .cd-dropdown-content .cd-divider {
  119. padding: 0 20px;
  120. padding-right: 50px;
  121. }
  122. .cd-dropdown {
  123. position: fixed;
  124. z-index: 100;
  125. top: 0;
  126. left: 0;
  127. width: 400PX;
  128. height: 100%;
  129. background-color: #ffffff;
  130. color: #000000;
  131. visibility: hidden;
  132. /* Force Hardware Acceleration */
  133. -webkit-backface-visibility: hidden;
  134. backface-visibility: hidden;
  135. -webkit-transform: translateX(-100%);
  136. -moz-transform: translateX(-100%);
  137. -ms-transform: translateX(-100%);
  138. -o-transform: translateX(-100%);
  139. transform: translateX(-100%);
  140. -webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0.5s;
  141. -moz-transition: -moz-transform 0.5s 0s, visibility 0s 0.5s;
  142. transition: transform 0.5s 0s, visibility 0s 0.5s;
  143. }
  144. .cd-dropdown h2 {
  145. /* dropdown title - mobile version only */
  146. position: relative;
  147. z-index: 1;
  148. position:relative;
  149. line-height: 31px;
  150. background: #fff;
  151. padding:15px 0 15px 20px;
  152. }
  153. .cd-dropdown h2 a{
  154. color: #004165;
  155. font-size: 16px;
  156. font-weight: 400;
  157. }
  158. .cd-dropdown h2 span{
  159. color:#23c0e9;
  160. }
  161. .cd-dropdown .cd-close {
  162. /* 'X' close icon - mobile version only */
  163. position: absolute;
  164. z-index: 1;
  165. right: 10px;
  166. top: 15px;
  167. height: 50px;
  168. width: 50px;
  169. /* image replacement */
  170. overflow: hidden;
  171. text-indent: 100%;
  172. white-space: nowrap;
  173. color: transparent;
  174. }
  175. .cd-dropdown .cd-close::after, .cd-dropdown .cd-close::before {
  176. /* this is the 'X' icon */
  177. content: '';
  178. position: absolute;
  179. left: 50%;
  180. top: 50%;
  181. bottom: auto;
  182. right: auto;
  183. -webkit-transform: translateX(-50%) translateY(-50%);
  184. -moz-transform: translateX(-50%) translateY(-50%);
  185. -ms-transform: translateX(-50%) translateY(-50%);
  186. -o-transform: translateX(-50%) translateY(-50%);
  187. transform: translateX(-50%) translateY(-50%);
  188. height: 18px;
  189. width:2px;
  190. background-color: #000000;
  191. }
  192. .cd-dropdown .cd-close::after {
  193. -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  194. -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  195. -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  196. -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  197. transform: translateX(-50%) translateY(-50%) rotate(45deg);
  198. }
  199. .cd-dropdown .cd-close::before {
  200. -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  201. -moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  202. -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  203. -o-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  204. transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  205. }
  206. .cd-dropdown.dropdown-is-active {
  207. visibility: visible;
  208. -webkit-transform: translateY(0);
  209. -moz-transform: translateY(0);
  210. -ms-transform: translateY(0);
  211. -o-transform: translateY(0);
  212. transform: translateY(0);
  213. -webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0s;
  214. -moz-transition: -moz-transform 0.5s 0s, visibility 0s 0s;
  215. transition: transform 0.5s 0s, visibility 0s 0s;
  216. box-shadow: 2px 0 20px rgba(0, 0, 0, 0.05);
  217. background:#fff;
  218. }
  219. @media only screen and (min-width: 1024px) {
  220. .cd-dropdown {
  221. position: absolute;
  222. top: calc(100% - 2px);
  223. /* reset style*/
  224. height: auto;
  225. width: auto;
  226. -webkit-transform: translateX(0);
  227. -moz-transform: translateX(0);
  228. -ms-transform: translateX(0);
  229. -o-transform: translateX(0);
  230. transform: translateX(0);
  231. background-color: #ffffff;
  232. color: #111433;
  233. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  234. opacity: 0;
  235. -webkit-transform: translateY(30px);
  236. -moz-transform: translateY(30px);
  237. -ms-transform: translateY(30px);
  238. -o-transform: translateY(30px);
  239. transform: translateY(30px);
  240. -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s;
  241. -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s;
  242. transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
  243. }
  244. .open-to-left .cd-dropdown {
  245. /* use the .open-to-left class if you want to open the dropdown on the left */
  246. right: 0;
  247. left: auto;
  248. }
  249. .cd-dropdown h2, .cd-dropdown .cd-close {
  250. /* on desktop - hide title and 'X' */
  251. display: none;
  252. }
  253. .cd-dropdown.dropdown-is-active {
  254. opacity: 1;
  255. -webkit-transform: translateY(0);
  256. -moz-transform: translateY(0);
  257. -ms-transform: translateY(0);
  258. -o-transform: translateY(0);
  259. transform: translateY(0);
  260. -webkit-transition: opacity 0.3s 0s, visibility 0.3s 0s, -webkit-transform 0.3s 0s;
  261. -moz-transition: opacity 0.3s 0s, visibility 0.3s 0s, -moz-transform 0.3s 0s;
  262. transition: opacity 0.3s 0s, visibility 0.3s 0s, transform 0.3s 0s;
  263. }
  264. }
  265. .cd-dropdown-content, .cd-dropdown-content ul {
  266. position: absolute;
  267. top: 0;
  268. left: 0;
  269. width: 100%;
  270. height: 100%;
  271. -webkit-transition: -webkit-transform 0.3s;
  272. -moz-transition: -moz-transform 0.3s;
  273. transition: transform 0.3s;
  274. padding-top: 80px;
  275. overflow:auto;
  276. overflow-x:hidden;
  277. }
  278. .cd-dropdown-content a, .cd-dropdown-content ul a {
  279. display: block;
  280. color: #111;
  281. /* truncate text with ellipsis if too long */
  282. overflow: hidden;
  283. text-transform:capitalize;
  284. text-overflow: ellipsis;
  285. white-space: nowrap;
  286. font-size:16px;
  287. }
  288. .cd-dropdown-content li:first-of-type > a, .cd-dropdown-content ul li:first-of-type > a {
  289. border-top-width: 0;
  290. }
  291. .cd-dropdown-content li:last-of-type > a, .cd-dropdown-content ul li:last-of-type > a {
  292. border-bottom-width: 1px;
  293. }
  294. .cd-dropdown-content .cd-divider, .cd-dropdown-content ul .cd-divider {
  295. padding-top: 10px;
  296. padding-bottom: 10px;
  297. background-color: #0b0e23;
  298. font-size: 1.1rem;
  299. font-weight: bold;
  300. letter-spacing: 1px;
  301. color: #585a70;
  302. text-transform: uppercase;
  303. }
  304. .cd-dropdown-content .cd-divider + li > a, .cd-dropdown-content ul .cd-divider + li > a {
  305. border-top-width: 0;
  306. }
  307. .cd-dropdown-content a, .cd-dropdown-content .cd-search, .cd-dropdown-content .cd-divider, .cd-dropdown-content ul a, .cd-dropdown-content ul .cd-search, .cd-dropdown-content ul .cd-divider {
  308. /* Force Hardware Acceleration */
  309. -webkit-transform: translateZ(0);
  310. -moz-transform: translateZ(0);
  311. -ms-transform: translateZ(0);
  312. -o-transform: translateZ(0);
  313. transform: translateZ(0);
  314. -webkit-backface-visibility: hidden;
  315. backface-visibility: hidden;
  316. -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  317. -moz-transition: opacity 0.3s, -moz-transform 0.3s;
  318. transition: opacity 0.3s, transform 0.3s;
  319. }
  320. .cd-dropdown-content.is-hidden, .cd-dropdown-content ul.is-hidden {
  321. /* push the secondary dropdown items to the right */
  322. -webkit-transform: translateX(100%);
  323. -moz-transform: translateX(100%);
  324. -ms-transform: translateX(100%);
  325. -o-transform: translateX(100%);
  326. transform: translateX(100%);
  327. }
  328. .cd-dropdown-content.is-hidden > li > a, .cd-dropdown-content.is-hidden > li > .cd-search, .cd-dropdown-content.is-hidden > .cd-divider, .cd-dropdown-content.move-out > li > a, .cd-dropdown-content.move-out > li > .cd-search, .cd-dropdown-content.move-out > .cd-divider, .cd-dropdown-content ul.is-hidden > li > a, .cd-dropdown-content ul.is-hidden > li > .cd-search, .cd-dropdown-content ul.is-hidden > .cd-divider, .cd-dropdown-content ul.move-out > li > a, .cd-dropdown-content ul.move-out > li > .cd-search, .cd-dropdown-content ul.move-out > .cd-divider {
  329. /* lower down the dropdown items opacity - when secondary dropdown slides in or for dropdown items hidden on the right */
  330. opacity: 0;
  331. }
  332. .cd-dropdown-content.move-out > li > a, .cd-dropdown-content.move-out > li > .cd-search, .cd-dropdown-content.move-out > .cd-divider, .cd-dropdown-content ul.move-out > li > a, .cd-dropdown-content ul.move-out > li > .cd-search, .cd-dropdown-content ul.move-out > .cd-divider {
  333. /* push the dropdown items to the left when secondary dropdown slides in */
  334. -webkit-transform: translateX(-100%);
  335. -moz-transform: translateX(-100%);
  336. -ms-transform: translateX(-100%);
  337. -o-transform: translateX(-100%);
  338. transform: translateX(-100%);
  339. }
  340. .dropdown-is-active .cd-dropdown-content, .dropdown-is-active .cd-dropdown-content ul {
  341. -webkit-overflow-scrolling: touch;
  342. }
  343. @media only screen and (min-width: 768px) {
  344. .cd-dropdown-content, .cd-dropdown-content ul {
  345. }
  346. .cd-dropdown-content a, .cd-dropdown-content ul a {
  347. }
  348. }
  349. @media only screen and (min-width: 1024px) {
  350. .cd-dropdown-content, .cd-dropdown-content ul {
  351. padding-top: 0;
  352. overflow: visible;
  353. }
  354. .cd-dropdown-content a, .cd-dropdown-content ul a {
  355. color: #111433;
  356. height: 50px;
  357. line-height: 50px;
  358. font-size: 1.5rem;
  359. border-color: #ebebeb;
  360. }
  361. .cd-dropdown-content .cd-divider, .cd-dropdown-content ul .cd-divider {
  362. background-color: transparent;
  363. color: #b3b3b3;
  364. border-top: 1px solid #ebebeb;
  365. }
  366. .cd-dropdown-content .cd-divider + li > a, .cd-dropdown-content ul .cd-divider + li > a {
  367. border-top-width: 1px;
  368. }
  369. .cd-dropdown-content.is-hidden > li > a, .cd-dropdown-content.is-hidden > li > .cd-search, .cd-dropdown-content.is-hidden > .cd-divider, .cd-dropdown-content.move-out > li > a, .cd-dropdown-content.move-out > li > .cd-search, .cd-dropdown-content.move-out > .cd-divider, .cd-dropdown-content ul.is-hidden > li > a, .cd-dropdown-content ul.is-hidden > li > .cd-search, .cd-dropdown-content ul.is-hidden > .cd-divider, .cd-dropdown-content ul.move-out > li > a, .cd-dropdown-content ul.move-out > li > .cd-search, .cd-dropdown-content ul.move-out > .cd-divider {
  370. /* reset mobile style */
  371. opacity: 1;
  372. }
  373. }
  374. .cd-dropdown-content .see-all a {
  375. /* different style for the See all links */
  376. color: #3f8654;
  377. }
  378. .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item, .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item {
  379. /* items with picture (or icon) and title */
  380. height: 80px;
  381. line-height: 80px;
  382. }
  383. .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item h3, .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item h3 {
  384. /* truncate text with ellipsis if too long */
  385. overflow: hidden;
  386. text-overflow: ellipsis;
  387. white-space: nowrap;
  388. }
  389. .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item {
  390. padding-left: 90px;
  391. }
  392. .cd-dropdown-content .cd-dropdown-gallery img {
  393. position: absolute;
  394. display: block;
  395. height: 40px;
  396. width: auto;
  397. left: 20px;
  398. top: 50%;
  399. margin-top: -20px;
  400. }
  401. .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item {
  402. padding-left: 75px;
  403. position: relative;
  404. }
  405. .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item p {
  406. color: #111433;
  407. font-size: 1.3rem;
  408. /* hide description on small devices */
  409. display: none;
  410. }
  411. .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item::before {
  412. /* item icon */
  413. content: '';
  414. display: block;
  415. position: absolute;
  416. left: 20px;
  417. top: 50%;
  418. margin-top: -20px;
  419. width: 40px;
  420. height: 40px;
  421. background-repeat: no-repeat;
  422. background-position: center center;
  423. background-size: 40px 40px;
  424. }
  425. .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-1::before {
  426. background-image: url("../img/nucleo-icon-1.svg");
  427. }
  428. .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-2::before {
  429. background-image: url("../img/nucleo-icon-2.svg");
  430. }
  431. .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-3::before {
  432. background-image: url("../img/nucleo-icon-3.svg");
  433. }
  434. .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-4::before {
  435. background-image: url("../img/nucleo-icon-4.svg");
  436. }
  437. .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-5::before {
  438. background-image: url("../img/nucleo-icon-5.svg");
  439. }
  440. .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-6::before {
  441. background-image: url("../img/nucleo-icon-6.svg");
  442. }
  443. .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-7::before {
  444. background-image: url("../img/nucleo-icon-7.svg");
  445. }
  446. .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-8::before {
  447. background-image: url("../img/nucleo-icon-8.svg");
  448. }
  449. .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-9::before {
  450. background-image: url("../img/nucleo-icon-9.svg");
  451. }
  452. .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-10::before {
  453. background-image: url("../img/nucleo-icon-10.svg");
  454. }
  455. .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-11::before {
  456. background-image: url("../img/nucleo-icon-11.svg");
  457. }
  458. .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-12::before {
  459. background-image: url("../img/nucleo-icon-12.svg");
  460. }
  461. @media only screen and (min-width: 1024px) {
  462. .cd-dropdown-content {
  463. /* reset mobile style */
  464. position: static;
  465. height: auto;
  466. width: 280px;
  467. }
  468. .cd-dropdown-content > li:last-of-type a {
  469. border-bottom: none;
  470. }
  471. .no-touch .cd-dropdown-content > li:not(.has-children) a:hover {
  472. color: #000000;
  473. }
  474. .cd-dropdown-content.move-out > li > a, .cd-dropdown-content.move-out > li > .cd-search, .cd-dropdown-content.move-out > .cd-divider {
  475. /* reset mobile style */
  476. -webkit-transform: translateX(0);
  477. -moz-transform: translateX(0);
  478. -ms-transform: translateX(0);
  479. -o-transform: translateX(0);
  480. transform: translateX(0);
  481. opacity: 1;
  482. }
  483. .cd-dropdown-content .cd-secondary-dropdown, .cd-dropdown-content .cd-dropdown-gallery, .cd-dropdown-content .cd-dropdown-icons {
  484. -webkit-transform: translateX(0);
  485. -moz-transform: translateX(0);
  486. -ms-transform: translateX(0);
  487. -o-transform: translateX(0);
  488. transform: translateX(0);
  489. left: 100%;
  490. height: auto;
  491. background-color: #ffffff;
  492. box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
  493. }
  494. .cd-dropdown-content .cd-secondary-dropdown::after, .cd-dropdown-content .cd-dropdown-gallery::after, .cd-dropdown-content .cd-dropdown-icons::after {
  495. clear: both;
  496. content: "";
  497. display: table;
  498. }
  499. .open-to-left .cd-dropdown-content .cd-secondary-dropdown, .open-to-left .cd-dropdown-content .cd-dropdown-gallery, .open-to-left .cd-dropdown-content .cd-dropdown-icons {
  500. /* use the .open-to-left class if you want to open the dropdown on the left */
  501. left: auto;
  502. right: 100%;
  503. }
  504. .cd-dropdown-content .cd-secondary-dropdown.is-hidden, .cd-dropdown-content .cd-dropdown-gallery.is-hidden, .cd-dropdown-content .cd-dropdown-icons.is-hidden {
  505. /* reset mobile style */
  506. -webkit-transform: translateX(0);
  507. -moz-transform: translateX(0);
  508. -ms-transform: translateX(0);
  509. -o-transform: translateX(0);
  510. transform: translateX(0);
  511. }
  512. .cd-dropdown-content .cd-secondary-dropdown.fade-in, .cd-dropdown-content .cd-dropdown-gallery.fade-in, .cd-dropdown-content .cd-dropdown-icons.fade-in {
  513. /* animate secondary dropdown items when hovering over of of the .cd-dropdown-content list items */
  514. -webkit-animation: cd-fade-in 0.2s;
  515. -moz-animation: cd-fade-in 0.2s;
  516. animation: cd-fade-in 0.2s;
  517. }
  518. .cd-dropdown-content .cd-secondary-dropdown.fade-out, .cd-dropdown-content .cd-dropdown-gallery.fade-out, .cd-dropdown-content .cd-dropdown-icons.fade-out {
  519. /* animate secondary dropdown items when hovering over of of the .cd-dropdown-content list items */
  520. -webkit-animation: cd-fade-out 0.2s;
  521. -moz-animation: cd-fade-out 0.2s;
  522. animation: cd-fade-out 0.2s;
  523. }
  524. .cd-dropdown-content .cd-secondary-dropdown > .go-back, .cd-dropdown-content .cd-dropdown-gallery > .go-back, .cd-dropdown-content .cd-dropdown-icons > .go-back {
  525. display: none;
  526. }
  527. .cd-dropdown-content .cd-secondary-dropdown > .see-all, .cd-dropdown-content .cd-dropdown-gallery > .see-all, .cd-dropdown-content .cd-dropdown-icons > .see-all {
  528. position: absolute;
  529. bottom: 20px;
  530. height: 45px;
  531. text-align: center;
  532. }
  533. .cd-dropdown-content .cd-secondary-dropdown > .see-all a, .cd-dropdown-content .cd-dropdown-gallery > .see-all a, .cd-dropdown-content .cd-dropdown-icons > .see-all a {
  534. margin: 0;
  535. height: 100%;
  536. line-height: 45px;
  537. background: #ebebeb;
  538. pointer-events: auto;
  539. -webkit-transition: color 0.2s, background-color 0.2s;
  540. -moz-transition: color 0.2s, background-color 0.2s;
  541. transition: color 0.2s, background-color 0.2s;
  542. }
  543. .no-touch .cd-dropdown-content .cd-secondary-dropdown > .see-all a:hover, .no-touch .cd-dropdown-content .cd-dropdown-gallery > .see-all a:hover, .no-touch .cd-dropdown-content .cd-dropdown-icons > .see-all a:hover {
  544. color: #ffffff;
  545. background-color: #111433;
  546. }
  547. .cd-dropdown-content .cd-secondary-dropdown .cd-dropdown-item, .cd-dropdown-content .cd-secondary-dropdown a, .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item, .cd-dropdown-content .cd-dropdown-gallery a, .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item, .cd-dropdown-content .cd-dropdown-icons a {
  548. border: none;
  549. }
  550. .cd-dropdown-content .cd-dropdown-gallery, .cd-dropdown-content .cd-dropdown-icons {
  551. padding: 20px 30px 100px;
  552. }
  553. .cd-dropdown-content .cd-dropdown-gallery > .see-all, .cd-dropdown-content .cd-dropdown-icons > .see-all {
  554. width: calc(100% - 60px);
  555. }
  556. .cd-dropdown-content .cd-dropdown-icons > li, .cd-dropdown-content .cd-secondary-dropdown > li {
  557. width: 50%;
  558. float: left;
  559. }
  560. .cd-dropdown-content .cd-secondary-dropdown {
  561. overflow: hidden;
  562. width: 550px;
  563. padding-bottom: 65px;
  564. }
  565. .cd-dropdown-content .cd-secondary-dropdown::before {
  566. /* this is the separation line in the middle of the .cd-secondary-dropdown element */
  567. position: absolute;
  568. content: '';
  569. top: 290px;
  570. left: 15px;
  571. height: 1px;
  572. width: 520px;
  573. background-color: #ebebeb;
  574. }
  575. .cd-dropdown-content .cd-secondary-dropdown > li > a {
  576. color: #3f8654;
  577. font-size: 1.6rem;
  578. margin-bottom: 10px;
  579. line-height: 30px;
  580. height: 30px;
  581. pointer-events: none;
  582. }
  583. .cd-dropdown-content .cd-secondary-dropdown > li > a::after, .cd-dropdown-content .cd-secondary-dropdown > li > a::before {
  584. /* hide the arrow */
  585. display: none;
  586. }
  587. .cd-dropdown-content .cd-secondary-dropdown.move-out > li > a {
  588. /* reset mobile style */
  589. -webkit-transform: translateX(0);
  590. -moz-transform: translateX(0);
  591. -ms-transform: translateX(0);
  592. -o-transform: translateX(0);
  593. transform: translateX(0);
  594. }
  595. .cd-dropdown-content .cd-secondary-dropdown > li {
  596. margin: 20px 0;
  597. border-right-width: 1px;
  598. border-color: #ebebeb;
  599. border-style: solid;
  600. padding: 0 30px;
  601. height: 250px;
  602. }
  603. .cd-dropdown-content .cd-secondary-dropdown > li:nth-of-type(2n) {
  604. border-right-width: 0;
  605. }
  606. .cd-dropdown-content .cd-secondary-dropdown > li > ul {
  607. /* reset mobile style */
  608. -webkit-transform: translate(0);
  609. -moz-transform: translate(0);
  610. -ms-transform: translate(0);
  611. -o-transform: translate(0);
  612. transform: translate(0);
  613. position: relative;
  614. height: auto;
  615. }
  616. .cd-dropdown-content .cd-secondary-dropdown > li > ul > .go-back {
  617. display: none;
  618. }
  619. .cd-dropdown-content .cd-secondary-dropdown a {
  620. line-height: 25px;
  621. height: 25px;
  622. font-size: 1.3rem;
  623. padding-left: 0;
  624. }
  625. .no-touch .cd-dropdown-content .cd-secondary-dropdown a:hover {
  626. color: #3f8654;
  627. }
  628. .cd-dropdown-content .cd-secondary-dropdown ul {
  629. padding-bottom: 25px;
  630. overflow: hidden;
  631. height: auto;
  632. }
  633. .cd-dropdown-content .cd-secondary-dropdown .go-back a {
  634. padding-left: 20px;
  635. color: transparent;
  636. }
  637. .no-touch .cd-dropdown-content .cd-secondary-dropdown .go-back a:hover {
  638. color: transparent;
  639. }
  640. .cd-dropdown-content .cd-secondary-dropdown .go-back a::before, .cd-dropdown-content .cd-secondary-dropdown .go-back a::after {
  641. left: 0;
  642. }
  643. .cd-dropdown-content .cd-secondary-dropdown .see-all {
  644. position: absolute;
  645. bottom: 0;
  646. left: 0;
  647. width: 100%;
  648. }
  649. .cd-dropdown-content .cd-dropdown-gallery {
  650. width: 600px;
  651. padding-bottom: 100px;
  652. }
  653. .cd-dropdown-content .cd-dropdown-gallery > li {
  654. width: 48%;
  655. float: left;
  656. margin-right: 4%;
  657. }
  658. .cd-dropdown-content .cd-dropdown-gallery > li:nth-of-type(2n) {
  659. margin-right: 0;
  660. }
  661. .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item {
  662. padding: 0;
  663. height: auto;
  664. line-height: normal;
  665. color: #3f8654;
  666. margin-bottom: 2em;
  667. }
  668. .cd-dropdown-content .cd-dropdown-gallery > li:nth-last-of-type(2) a,
  669. .cd-dropdown-content .cd-dropdown-gallery > li:last-of-type a {
  670. margin-bottom: 0;
  671. }
  672. .cd-dropdown-content .cd-dropdown-gallery img {
  673. position: static;
  674. height: auto;
  675. width: 100%;
  676. margin: 0 0 0.6em;
  677. }
  678. .cd-dropdown-content .cd-dropdown-icons {
  679. width: 600px;
  680. }
  681. .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item {
  682. height: 80px;
  683. line-height: 1.2;
  684. padding: 24px 0 0 85px;
  685. }
  686. .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item:hover {
  687. background: #ebebeb;
  688. }
  689. .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item h3 {
  690. color: #3f8654;
  691. font-weight: bold;
  692. }
  693. .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item p {
  694. display: block;
  695. font-size: 1.2rem;
  696. }
  697. .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item::before {
  698. left: 25px;
  699. }
  700. .cd-dropdown-content > .has-children > ul {
  701. visibility: hidden;
  702. }
  703. .cd-dropdown-content > .has-children > ul.is-active {
  704. /* when hover over .cd-dropdown-content items - show subnavigation */
  705. visibility: visible;
  706. }
  707. .cd-dropdown-content > .has-children > .cd-secondary-dropdown.is-active > li > ul {
  708. /* if .cd-secondary-dropdown is visible - show also subnavigation */
  709. visibility: visible;
  710. }
  711. .cd-dropdown-content > .has-children > a.is-active {
  712. /* hover effect for .cd-dropdown-content items with subnavigation */
  713. box-shadow: inset 2px 0 0 #3f8654;
  714. color: #3f8654;
  715. }
  716. .cd-dropdown-content > .has-children > a.is-active::before, .cd-dropdown-content > .has-children > a.is-active::after {
  717. background: #3f8654;
  718. }
  719. .open-to-left .cd-dropdown-content > .has-children > a.is-active {
  720. box-shadow: inset -2px 0 0 #3f8654;
  721. }
  722. }
  723. @-webkit-keyframes cd-fade-in {
  724. 0% {
  725. opacity: 0;
  726. visibility: visible;
  727. }
  728. 100% {
  729. opacity: 1;
  730. visibility: visible;
  731. }
  732. }
  733. @-moz-keyframes cd-fade-in {
  734. 0% {
  735. opacity: 0;
  736. visibility: visible;
  737. }
  738. 100% {
  739. opacity: 1;
  740. visibility: visible;
  741. }
  742. }
  743. @keyframes cd-fade-in {
  744. 0% {
  745. opacity: 0;
  746. visibility: visible;
  747. }
  748. 100% {
  749. opacity: 1;
  750. visibility: visible;
  751. }
  752. }
  753. @-webkit-keyframes cd-fade-out {
  754. 0% {
  755. opacity: 1;
  756. visibility: visible;
  757. }
  758. 100% {
  759. opacity: 0;
  760. visibility: visible;
  761. }
  762. }
  763. @-moz-keyframes cd-fade-out {
  764. 0% {
  765. opacity: 1;
  766. visibility: visible;
  767. }
  768. 100% {
  769. opacity: 0;
  770. visibility: visible;
  771. }
  772. }
  773. @keyframes cd-fade-out {
  774. 0% {
  775. opacity: 1;
  776. visibility: visible;
  777. }
  778. 100% {
  779. opacity: 0;
  780. visibility: visible;
  781. }
  782. }
  783. .cd-search input[type="search"] {
  784. width: 100%;
  785. height: 60px;
  786. padding: 0 20px;
  787. -webkit-appearance: none;
  788. -moz-appearance: none;
  789. -ms-appearance: none;
  790. -o-appearance: none;
  791. appearance: none;
  792. background-color: #fff;
  793. color: #2d3a4b;
  794. border: none;
  795. border-radius: 0;
  796. border:1px solid #eee;
  797. border-left:0;
  798. border-right:0;
  799. }
  800. .cd-search input[type="search"]::-webkit-input-placeholder {
  801. color: #2d3a4b;
  802. }
  803. .cd-search input[type="search"]::-moz-placeholder {
  804. color: #2d3a4b;
  805. }
  806. .cd-search input[type="search"]:-moz-placeholder {
  807. color: #2d3a4b;
  808. }
  809. .cd-search input[type="search"]:-ms-input-placeholder {
  810. color: #2d3a4b;
  811. }
  812. .cd-search input[type="search"]:focus {
  813. background: #ffffff;
  814. color: #111433;
  815. outline: none;
  816. }
  817. .cd-search input[type="search"]:focus::-webkit-input-placeholder {
  818. color: rgba(17, 20, 51, 0.4);
  819. }
  820. .cd-search input[type="search"]:focus::-moz-placeholder {
  821. color: rgba(17, 20, 51, 0.4);
  822. }
  823. .cd-search input[type="search"]:focus:-moz-placeholder {
  824. color: rgba(17, 20, 51, 0.4);
  825. }
  826. .cd-search input[type="search"]:focus:-ms-input-placeholder {
  827. color: rgba(17, 20, 51, 0.4);
  828. }
  829. @media only screen and (min-width: 1024px) {
  830. .cd-search input[type="search"] {
  831. background-color: #ebebeb;
  832. }
  833. .cd-search input[type="search"]::-webkit-input-placeholder {
  834. color: #b3b3b3;
  835. }
  836. .cd-search input[type="search"]::-moz-placeholder {
  837. color: #b3b3b3;
  838. }
  839. .cd-search input[type="search"]:-moz-placeholder {
  840. color: #b3b3b3;
  841. }
  842. .cd-search input[type="search"]:-ms-input-placeholder {
  843. color: #b3b3b3;
  844. }
  845. }
  846. .has-children > a, .go-back a {
  847. position: relative;
  848. }
  849. .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
  850. /* arrow icon in CSS - for element with nested unordered lists */
  851. content: '';
  852. position: absolute;
  853. top: 50%;
  854. margin-top: -1px;
  855. display: inline-block;
  856. height: 2px;
  857. width: 9px;
  858. background: #2d3a4b;
  859. -webkit-backface-visibility: hidden;
  860. backface-visibility: hidden;
  861. -webkit-transition: all 0.5s;
  862. -o-transition: all 0.5s;
  863. -ms-transition: all 0.5s;
  864. -moz-transition: all 0.5s;
  865. transition: all 0.5s;
  866. }
  867. .has-children > a::before, .go-back a::before {
  868. -webkit-transform: rotate(45deg);
  869. -moz-transform: rotate(45deg);
  870. -ms-transform: rotate(45deg);
  871. -o-transform: rotate(45deg);
  872. transform: rotate(45deg);
  873. }
  874. .has-children > a::after, .go-back a::after {
  875. -webkit-transform: rotate(-45deg);
  876. -moz-transform: rotate(-45deg);
  877. -ms-transform: rotate(-45deg);
  878. -o-transform: rotate(-45deg);
  879. transform: rotate(-45deg);
  880. }
  881. @media only screen and (min-width: 1024px) {
  882. .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
  883. background: #b3b3b3;
  884. }
  885. }
  886. .has-children > a {
  887. padding-right: 40px;
  888. font-size:16px;
  889. border-bottom:1px solid #eee;
  890. }
  891. .has-children > a::before, .has-children > a::after {
  892. /* arrow goes on the right side - children navigation */
  893. right: 20px;
  894. -webkit-transform-origin: 9px 50%;
  895. -moz-transform-origin: 9px 50%;
  896. -ms-transform-origin: 9px 50%;
  897. -o-transform-origin: 9px 50%;
  898. transform-origin: 9px 50%;
  899. }
  900. .cd-dropdown-content li a{
  901. border-bottom:1px solid #eee;
  902. }
  903. @media only screen and (min-width: 1024px) {
  904. .open-to-left .cd-dropdown-content > .has-children > a {
  905. padding-left: 40px;
  906. padding-right: 20px;
  907. }
  908. .open-to-left .cd-dropdown-content > .has-children > a::before, .open-to-left .cd-dropdown-content > .has-children > a::after {
  909. right: auto;
  910. left: 20px;
  911. -webkit-transform-origin: 1px 50%;
  912. -moz-transform-origin: 1px 50%;
  913. -ms-transform-origin: 1px 50%;
  914. -o-transform-origin: 1px 50%;
  915. transform-origin: 1px 50%;
  916. }
  917. }
  918. .cd-dropdown-content .go-back a {
  919. padding-left: 40px;
  920. }
  921. .cd-dropdown-content .go-back a::before, .cd-dropdown-content .go-back a::after {
  922. /* arrow goes on the left side - go back button */
  923. left: 20px;
  924. -webkit-transform-origin: 1px 50%;
  925. -moz-transform-origin: 1px 50%;
  926. -ms-transform-origin: 1px 50%;
  927. -o-transform-origin: 1px 50%;
  928. transform-origin: 1px 50%;
  929. }
  930. .cd-main-content {
  931. background-color: #e6e6e6;
  932. min-height: calc(100vh - 100px);
  933. padding: 2em 5%;
  934. line-height: 2;
  935. }
  936. .no-js .cd-dropdown-wrapper:hover .cd-dropdown {
  937. visibility: visible;
  938. opacity: 1;
  939. -webkit-transform: translateY(0);
  940. -moz-transform: translateY(0);
  941. -ms-transform: translateY(0);
  942. -o-transform: translateY(0);
  943. transform: translateY(0);
  944. }
  945. .no-js .cd-dropdown-wrapper .cd-close {
  946. display: none;
  947. }
  948. .cd-dropdown-content li a{
  949. -webkit-transition: all 0.5s;
  950. -o-transition: all 0.5s;
  951. -ms-transition: all 0.5s;
  952. -moz-transition: all 0.5s;
  953. transition: all 0.5s;
  954. }
  955. .cd-dropdown-content li a:hover{
  956. background:#45108a;
  957. color:#ffffff;
  958. -webkit-transition: all 0.5s;
  959. -o-transition: all 0.5s;
  960. -ms-transition: all 0.5s;
  961. -moz-transition: all 0.5s;
  962. transition: all 0.5s;
  963. }
  964. .has-children:hover > a::before, .has-children:hover > a::after, .go-back:hover a::before, .go-back:hover a::after{
  965. background:#ffffff;
  966. -webkit-transition: all 0.5s;
  967. -o-transition: all 0.5s;
  968. -ms-transition: all 0.5s;
  969. -moz-transition: all 0.5s;
  970. transition: all 0.5s;
  971. }
  972. .cd-dropdown-content li a:hover::before, .cd-dropdown-content li a:hover::after, .cd-dropdown-content li a:hover::before, .cd-dropdown-content li a:hover::after{
  973. background:#fff;
  974. }