custom.scss 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560
  1. @import "../fontawesome/font-awesome";
  2. @import "../fontawesome/solid";
  3. @import "../fontawesome/brands";
  4. /* declare colors i say again and again and again and ..yet again a */
  5. $turquoise:#16a0a0;
  6. $turquoise2:#00ffff;
  7. $seablue:#007f7f;
  8. $darkgreen:#007f00;
  9. $palegreen:#827f00;
  10. $red:#ff0000;
  11. $mygray:#cccccc;
  12. $purple: #9f009f;
  13. $purple2:#ff00ff;
  14. $green: #007f7f;
  15. $brown: #7f0000;
  16. $brown2:#8B4513;
  17. $orange: #d96b26;
  18. $yellow:#ede013;
  19. $brand-primary: $green;
  20. $font-stack: Helvetica, sans-serif;
  21. $blue:#6200ff;
  22. $beige:#e2b877;
  23. $cream:#e2d4be;
  24. $gold:#daa520;
  25. $lightyellow:#FFFFE0;
  26. $lemonchiffon:#FFFACD;
  27. $papay:#FFEFD5;
  28. $moccasin:#FFE4B5;
  29. $gray1:#bcb0a1;
  30. $gray2:#bca1a1;
  31. @mixin clearfix() {
  32. &::after {
  33. display: block;
  34. content: "";
  35. clear: both;
  36. }
  37. }
  38. @mixin left-margin-minus
  39. {
  40. margin-left:-0rem;
  41. }
  42. @mixin left-margin
  43. {
  44. left-margin:1rem;
  45. }
  46. @mixin justify-center
  47. {
  48. align-self:center;
  49. }
  50. @mixin left-margin-2
  51. {
  52. margin-left:3rem;
  53. }
  54. @mixin right-margin
  55. {
  56. margin-right:1rem;
  57. }
  58. @mixin margin
  59. {
  60. margin-left:1rem;
  61. margin-right:1rem;
  62. }
  63. @mixin left
  64. {
  65. align-self:flex-start;
  66. }
  67. @mixin right
  68. {
  69. align-self:flex-end;
  70. }
  71. @mixin center
  72. {
  73. align-self:center;
  74. }
  75. br.clearfix
  76. {
  77. @include clearfix;
  78. }
  79. a.navbar-brand
  80. {
  81. color:$brown;
  82. }
  83. .navbar-toggler-icon
  84. {
  85. background-color: orange;
  86. text-shadow: 2px 2px;
  87. }
  88. li.nav-item a.nav-link:link
  89. {
  90. color:$brown2;
  91. }
  92. li.nav-item a.nav-link:hover
  93. {
  94. background-color:$lemonchiffon;
  95. }
  96. div.center
  97. {
  98. width:100%;
  99. display:flex;
  100. text-align:center;
  101. }
  102. div.dropdown-menu p
  103. {
  104. text-align:center;
  105. color:black;
  106. font-weight:bold;
  107. }
  108. li a.dropdown-item:link
  109. {
  110. text-align:center;
  111. }
  112. li a.dropdown-item:hover
  113. {
  114. text-align:center;
  115. color:black;
  116. background:yellow;
  117. }
  118. .btn
  119. {
  120. @include margin;
  121. }
  122. h1.magnolia
  123. {
  124. @include center;
  125. font-family: 'magnolia_lightregular';
  126. color:$purple2;
  127. font-weight:regular;
  128. font-size:6rem;
  129. text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  130. }
  131. h1.magnolia::first-letter {
  132. color: $gold;
  133. font-weight:regular;
  134. }
  135. h1#quikhand
  136. {
  137. @include center;
  138. font-family: 'bellefairregular';
  139. color:$purple2;
  140. font-weight:regular;
  141. font-size:6rem;
  142. text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  143. /* font is not quikhand but all media breaks use it */
  144. }
  145. h1#quikhand::first-letter {
  146. font-family: 'amadeus_regularamadeusRg';
  147. color: $gold;
  148. font-weight:regular;
  149. }
  150. h4.bellefair
  151. {
  152. font-family: 'bellefairregular';
  153. @include margin;
  154. font-size:1.6rem;
  155. color:black;
  156. font-weight:normal;
  157. font-style: oblique;
  158. }
  159. h3.links
  160. {
  161. letter-spacing:4px;
  162. @include margin;
  163. }
  164. h8,h9,h10,h11,h12,h13
  165. {
  166. font-family: 'bellefairregular';
  167. }
  168. h8
  169. {
  170. color:$seablue;
  171. }
  172. h9
  173. {
  174. color:$blue;
  175. }
  176. h10
  177. {
  178. color:$darkgreen;
  179. }
  180. h11
  181. {
  182. color:$brown;
  183. }
  184. h12
  185. {
  186. color:$purple2;
  187. }
  188. h13
  189. {
  190. @include margin;
  191. color:$darkgreen;
  192. font-size:1.6rem;
  193. font-weight:normal;
  194. font-style: oblique;
  195. }
  196. h8,h9,h10,h11,h12
  197. {
  198. flex-shrink:1;
  199. @include margin;
  200. }
  201. h1.dumb2
  202. {
  203. font-family: '2dumbregular';
  204. @include margin;
  205. color:$red;
  206. }
  207. h1.bellefair
  208. {
  209. font-family: 'bellefairregular';
  210. @include margin;
  211. color:$blue;
  212. }
  213. h1.quikhand
  214. {
  215. font-family: 'quikhandregular';
  216. color:$brown2;
  217. @include left-margin;
  218. }
  219. h1.dumb
  220. {
  221. font-family: '2dumbregular';
  222. @include left-margin;
  223. color:$yellow;
  224. }
  225. h1.blackjack
  226. {
  227. font-family: 'bellefairegular';
  228. @include left-margin;
  229. color:$brown;
  230. }
  231. h1.grandhotel
  232. {
  233. font-family: 'grand_hotelregular';
  234. @include left-margin;
  235. color:$purple;
  236. }
  237. div.header
  238. {
  239. color:blue;
  240. display:flex;
  241. flex-direction:column;
  242. width:100%;
  243. /*background:url("../images/header.png");*/
  244. /*flex-basis:160px;*/
  245. flex-wrap:nowrap;
  246. background-repeat: no-repeat;
  247. background-size:stretch;
  248. }
  249. div.header div.logo
  250. {
  251. display:flex;
  252. width:120px;
  253. align-self:flex-start;
  254. }
  255. div.logo img
  256. {
  257. @include left-margin;
  258. width:100%;
  259. }
  260. div.title
  261. {
  262. display:flex;
  263. flex-direction:column;
  264. flex-basis:90px;
  265. align-self:center;
  266. align-items:flex-start;
  267. justify-content:flex-start;
  268. flex-shrink:1;
  269. flex-grow:2;
  270. }
  271. div.captcha
  272. {
  273. display:flex;
  274. flex-direction:row;
  275. width:100%;
  276. justify-content:center;
  277. }
  278. div.captcha IMG
  279. {
  280. flex-basis:50px;
  281. }
  282. div.homelinks
  283. {
  284. display:flex;
  285. flex-direction:row;
  286. width:100%;
  287. justify-content:space-between;
  288. }
  289. div.hlinkitem
  290. {
  291. display:flex;
  292. @include margin;
  293. flex-basis:200px;
  294. flex-shrink:3;
  295. }
  296. div.hlinkitem img
  297. {
  298. width:90%;
  299. }
  300. div.link
  301. {
  302. display:flex;
  303. flex-direction:row;
  304. width:100%;
  305. justify-content:space-between;
  306. }
  307. div.linkImage
  308. {
  309. display:flex;
  310. }
  311. div.footer
  312. {
  313. display:flex;
  314. flex-direction:column;
  315. flex-wrap:nowrap;
  316. /* */
  317. background-color:lighten($gray2, 20%);
  318. /*background-color:#fd7eed; */
  319. /* background:url("../images/footer.png"); */
  320. background-size:100%;
  321. }
  322. div.iconwrapper
  323. {
  324. display:flex;
  325. width:100%;
  326. height:auto;
  327. flex-direction:row;
  328. justify-content:space-around;
  329. align-items:stretch;
  330. }
  331. div.icon
  332. {
  333. display:flex;
  334. align-self:flex-end;
  335. }
  336. div.icon h4
  337. {
  338. display:flex;
  339. font-size:1.2rem;
  340. color:black;
  341. font-weight:normal;
  342. }
  343. div.center
  344. {
  345. display:flex;
  346. @include left;
  347. }
  348. div.flex1
  349. {
  350. display:flex;
  351. justify-content:space-between;
  352. flex-wrap:nowrap;
  353. width:100%;
  354. min-height:60vh;
  355. flex-direction:row;
  356. }
  357. div.textbox
  358. {
  359. @include left-margin;
  360. flex-basis:70%;
  361. flex-grow:3;
  362. }
  363. div.textbox textarea
  364. {
  365. width:95%;
  366. }
  367. div.portfolio
  368. {
  369. display:flex;
  370. flex-wrap:wrap;
  371. }
  372. div.thumb
  373. {
  374. display:flex;
  375. flex-direction:column;
  376. text-align:center;
  377. width:150px;
  378. margin-top:5px;
  379. @include margin;
  380. border-style:solid;
  381. border-color:black;
  382. }
  383. div.thumb .img-fluid
  384. {
  385. width:90%;
  386. }
  387. div.item
  388. {
  389. display:flex;
  390. flex-direction:column;
  391. text-align:center;
  392. flex-basis:300px;
  393. width:290px;
  394. margin-top:5px;
  395. @include margin;
  396. }
  397. div.item .img-fluid
  398. {
  399. display:flex;
  400. transition: transform ease-in-out 1.3s;
  401. filter: brightness(99%);
  402. width:90%;
  403. align-items:flex-start;
  404. border: 5px solid #555;
  405. }
  406. div.item:hover .img-fluid
  407. {
  408. display:flex;
  409. width:90%;
  410. align-items:flex-start;
  411. border: 5px solid #555;
  412. }
  413. div.editinfo
  414. {
  415. @include right-margin;
  416. background-color:$cream;
  417. flex-basis:30%;
  418. flex-grow:0;
  419. flex-shrink:1;
  420. }
  421. div.flex2
  422. {
  423. display:flex;
  424. width:100%;
  425. flex-direction:column;
  426. min-height:70vh;
  427. align-items:stretch;
  428. background-image:url("../images/contentBk.png");
  429. background-size:100%;
  430. /*background-color:$moccasin;*/
  431. }
  432. div.content
  433. {
  434. flex-grow:1;
  435. width:100%;
  436. }
  437. div.flex2 p
  438. {
  439. font-family: 'bellefairregular';
  440. font-size:1.5rem;
  441. line-height:140%;
  442. @include margin;
  443. }
  444. div.blog
  445. {
  446. display:flex;
  447. flex-grow:1;
  448. }
  449. div.blog .img-fluid
  450. {
  451. display:flex;
  452. @include margin;
  453. flex-basis:290px;
  454. }
  455. div.productInfo
  456. {
  457. display:flex;
  458. flex-direction:column;
  459. width:350px;
  460. text-align:center;
  461. }
  462. div.productInfo .img-fluid
  463. {
  464. display:flex;
  465. transition: transform ease-in-out 1.3s;
  466. filter: brightness(92%);
  467. flex-basis:290px;
  468. align-items:flex-start;
  469. border: 5px solid #555;
  470. @include margin;
  471. }
  472. div.productInfo:hover .img-fluid
  473. {
  474. display:flex;
  475. transform: scale(1.5) translateX(30%);
  476. filter: brightness(100%);
  477. /*width:91%;*/
  478. /*align-items:flex-start;*/
  479. /*border: 5px solid #555;*/
  480. }
  481. div.twothirdleft
  482. {
  483. @include left-margin;
  484. flex-basis:70%;
  485. flex-grow:3;
  486. align-self:stretch;
  487. }
  488. div.onethirdright
  489. {
  490. @include right-margin;
  491. background-color:$cream;
  492. flex-basis:30%;
  493. }
  494. /* logo flip and crow stuff */
  495. img#bounce
  496. {
  497. position:relative;
  498. left:10px;
  499. top:30px;
  500. }
  501. img#crow
  502. {
  503. position:relative;
  504. left:10px;
  505. top:30px;
  506. }
  507. img#gb
  508. {
  509. display:inline;
  510. }
  511. img#gbFlip
  512. {
  513. display:none;
  514. }
  515. p#toggle
  516. {
  517. font-family: 'bellefairregular';
  518. font-size:1.3rem;
  519. color:black;
  520. font-weight:normal;
  521. font-style: oblique;
  522. }
  523. p#toggle h13
  524. {
  525. @include left-margin-minus;
  526. font-family: 'bellefairregular';
  527. color:$darkgreen;
  528. font-size:1.6rem;
  529. font-weight:normal;
  530. font-style: oblique;
  531. }
  532. p#toggle h4
  533. {
  534. font-family: 'bellefairregular';
  535. font-size:1.3rem;
  536. color:black;
  537. font-weight:normal;
  538. font-style: oblique;
  539. }
  540. p#andy
  541. {
  542. font-family:Arial;
  543. font-weight:bold;
  544. color:$red;
  545. font-size:16px;
  546. }
  547. .clearfix
  548. {
  549. clear:both;
  550. }
  551. div.editinfo table.andy
  552. {
  553. width:100%;
  554. }
  555. table.andy th,td {
  556. border: 1px solid black;
  557. padding: 5px;
  558. }
  559. /*_______________________________________________________________
  560. *
  561. *1st break point
  562. *_________________________________________________________________
  563. *
  564. */
  565. @media (max-width: 480px)
  566. {
  567. h1.quikhand,h1.bellefair,h1.dumb,h1.blackjack, h1#akwaaba,h1#akwaaba::first-letter,h1.grandhotel,h1.dumb2
  568. {
  569. font-size:2.0rem;
  570. text-align:center;
  571. }
  572. h1#quikhand, h1.magnolia
  573. {
  574. font-size:2.0rem;
  575. }
  576. h8,h9,h10,h11,h12
  577. {
  578. font-size:1.4rem;
  579. }
  580. div.iconwrapper
  581. {
  582. display:flex;
  583. flex-direction:column;
  584. }
  585. div.homelinks
  586. {
  587. display:flex;
  588. flex-shrink:3;
  589. flex-direction:column;
  590. align-items:center;
  591. justify-content:space-between;
  592. }
  593. div.hlinkitem
  594. {
  595. display:flex;
  596. width:45%;
  597. margin-bottom:20px;
  598. justify-content:flex-start;
  599. }
  600. div.hlinkitem img
  601. {
  602. display:flex;
  603. flex-direction:column;
  604. justify-content:space-between;
  605. margin-top:15px;
  606. width:90%x;
  607. }
  608. div.icon
  609. {
  610. display:flex;
  611. /*align-self:flex-end;*/
  612. font-size:1.8rem;
  613. align-self:center;
  614. margin-bottom:1.8rem;
  615. }
  616. div.icon img
  617. {
  618. width:3rem;
  619. }
  620. div.flex2 p
  621. {
  622. @include margin;
  623. font-family: 'bellefairregular';
  624. font-size:1.25rem;
  625. line-height:105%;
  626. }
  627. div.link
  628. {
  629. display:flex;
  630. flex-direction:column;
  631. width:100%;
  632. justify-content:space-between;
  633. align-items:center;
  634. }
  635. div.linkImage
  636. {
  637. slef-align:center;
  638. display:flex;
  639. width:45%;
  640. }
  641. div.linkImage img
  642. {
  643. width:90%;
  644. height:auto;
  645. }
  646. }/* end 1st */
  647. /*
  648. --------------------------------------------------------------
  649. 2nd media break point
  650. ---------------------------------------------------------------
  651. */
  652. @media (min-width : 481px) and (max-width:767px)
  653. {
  654. h1.quikhand,h1.bellefair,h1.dumb,h1.blackjack, h1#akwaaba,h1#akwaaba::first-letter,h1.grandhotel,h1.dumb2
  655. {
  656. font-size:1.6rem;
  657. text-align:center;
  658. }
  659. h1#quikhand ,h1.magnolia
  660. {
  661. font-size:2.2rem;
  662. text-align:center;
  663. }
  664. h8,h9,h10,h11,h12
  665. {
  666. font-size:1.5rem;
  667. }
  668. div.iconwrapper
  669. {
  670. display:flex;
  671. flex-direction:column;
  672. }
  673. div.icon
  674. {
  675. display:flex;
  676. font-size:1.8rem;
  677. align-self:center;
  678. margin-bottom:1.8rem;
  679. }
  680. div.icon img
  681. {
  682. width:3.8rem;
  683. }
  684. div.flex2 p
  685. {
  686. @include margin;
  687. font-family: 'bellefairregular';
  688. font-size:1.3rem;
  689. line-height:110%;
  690. }
  691. div.link
  692. {
  693. display:flex;
  694. flex-direction:column;
  695. width:100%;
  696. justify-content:space-between;
  697. flex-wrap:wrap;
  698. align-items:center;
  699. }
  700. div.linkImage
  701. {
  702. display:flex;
  703. width:25%;
  704. }
  705. div.linkImage img
  706. {
  707. width:90%;
  708. height:auto;
  709. }
  710. div.homelinks
  711. {
  712. display:flex;
  713. flex-shrink:3;
  714. flex-direction:column;
  715. align-items:center;
  716. justify-content:space-between;
  717. }
  718. div.hlinkitem
  719. {
  720. display:flex;
  721. width:33%;
  722. height:auto;
  723. align-items:flex-start;
  724. margin-bottom:40px;
  725. }
  726. div.hlinkitem img
  727. {
  728. display:flex;
  729. flex-direction:column;
  730. justify-content:space-between;
  731. margin-top:15px;
  732. width:40%px;
  733. height:auto;
  734. align-self:center;
  735. }
  736. }
  737. /*
  738. ----------------------------------------------------------------
  739. 3 rd media breakpoint
  740. ----------------------------------------------------------
  741. */
  742. @media (min-width:768px)and (max-width:1024px) and (orientation:landscape)
  743. {
  744. h1.quikhand,h1.bellefair,h1.dumb,h1.blackjack, h1#akwaaba,h1#akwaaba::first-letter,h1.grandhotel,h1.dumb2
  745. {
  746. font-size:2.0rem;
  747. text-align:center;
  748. }
  749. h1#quikhand ,h1.magnolia
  750. {
  751. font-size:2.8rem;
  752. text-align:center;
  753. }
  754. h8,h9,h10,h11,h12
  755. {
  756. font-size:1.5rem;
  757. }
  758. div.iconwrapper
  759. {
  760. display:flex;
  761. flex-direction:row;
  762. }
  763. div.icon
  764. {
  765. display:flex;
  766. align-self:flex-end;
  767. font-size:2.0rem;
  768. align-self:center;
  769. margin-bottom:2.0rem;
  770. }
  771. div.icon img
  772. {
  773. width:4.0rem;
  774. }
  775. div.flex2 p
  776. {
  777. @include margin;
  778. font-family: 'bellefairregular';
  779. font-size:1.25rem;
  780. line-height:105%;
  781. }
  782. div.link
  783. {
  784. display:flex;
  785. flex-direction:row;
  786. width:100%;
  787. justify-content:space-around;
  788. align-items:center;
  789. }
  790. div.linkImage
  791. {
  792. display:flex;
  793. flex-wrap:wrap;
  794. width:25%;
  795. }
  796. div.linkImage img
  797. {
  798. width:90%;
  799. height:auto;
  800. }
  801. div.homelinks
  802. {
  803. display:flex;
  804. flex-shrink:3;
  805. flex-direction:row;
  806. align-items:center;
  807. justify-content:space-between;
  808. }
  809. div.hlinkitem
  810. {
  811. display:flex;
  812. width:50%;
  813. height:auto;
  814. align-items:flex-start;
  815. }
  816. div.hlinkitem img
  817. {
  818. display:flex;
  819. flex-direction:column;
  820. justify-content:space-between;
  821. margin-top:15px;
  822. width:65%;
  823. align-self:center;
  824. }
  825. }
  826. /*
  827. ------------------------------------------------------
  828. 4th media breakpoint
  829. ----------------------------------------------------------
  830. */
  831. @media (min-width:768px)and (max-width:1024px) and (orientation:portrait)
  832. {
  833. h1.quikhand,h1.bellefair,h1.dumb,h1.blackjack, h1#akwaaba,h1#akwaaba::first-letter,h1.grandhotel,h1.dumb2
  834. {
  835. font-size:2.5rem;
  836. text-align:left;
  837. }
  838. h1#quikhand ,h1.magnolia
  839. {
  840. font-size:3.2rem;
  841. text-align:center;
  842. }
  843. h8,h9,h10,h11,h12
  844. {
  845. font-size:1.8rem;
  846. }
  847. div.iconwrapper
  848. {
  849. display:flex;
  850. flex-direction:row;
  851. }
  852. div.icon
  853. {
  854. font-size:2.5rem;
  855. align-self:center;
  856. margin-bottom:2.0rem;
  857. }
  858. div.icon img
  859. {
  860. width:5rem;
  861. }
  862. div.flex2 p
  863. {
  864. @include margin;
  865. font-family: 'bellefairregular';
  866. font-size:1.25rem;
  867. line-height:105%;
  868. }
  869. div.link
  870. {
  871. display:flex;
  872. flex-direction:column;
  873. width:100%;
  874. justify-content:space-around;
  875. flex-wrap:wrap;
  876. align-items:center;
  877. }
  878. div.linkImage
  879. {
  880. display:flex;
  881. width:45%;
  882. }
  883. div.linkImage img
  884. {
  885. width:90%;
  886. height:auto;
  887. }
  888. }
  889. /*
  890. -------------------------------------------------------------------
  891. 5 th media break point
  892. ---------------------------------------------------------
  893. */
  894. @media (min-width:1025px)and (max-width:1280px)
  895. {
  896. h1.quikhand,h1.bellefair,h1.dumb,h1.blackjack, h1#akwaaba,h1#akwaaba::first-letter,h1.grandhotel,h1.dumb2
  897. {
  898. font-size:2.5rem;
  899. text-align:left;
  900. }
  901. h1#quikhand , h1.magnolia
  902. {
  903. font-size:4.7rem;
  904. text-align:center;
  905. }
  906. h8,h9,h10,h11,h12
  907. {
  908. font-size:1.8rem;
  909. }
  910. div.iconwrapper
  911. {
  912. display:flex;
  913. flex-direction:row;
  914. }
  915. div.icon
  916. {
  917. display:flex;
  918. flex-direction:row;
  919. font-size:2.5rem;
  920. align-self:center;
  921. margin-bottom:2.5rem;
  922. }
  923. div.icon img
  924. {
  925. width:3.5rem;
  926. }
  927. div.flex2 p
  928. {
  929. @include margin;
  930. font-family: 'bellefairregular';
  931. font-size:1.25rem;
  932. line-height:105%;
  933. }
  934. div.link
  935. {
  936. display:flex;
  937. flex-direction:row;
  938. width:100%;
  939. justify-content:space-between;
  940. }
  941. div.linkImage
  942. {
  943. display:flex;
  944. width:24%;
  945. }
  946. div.linkImage img
  947. {
  948. width:90%;
  949. height:auto;
  950. }
  951. }
  952. /*
  953. *
  954. *-------------------------------------------------------------
  955. *
  956. * 6th media break point
  957. *---------------------------------------------------------------
  958. */
  959. @media (min-width:1281px)
  960. {
  961. h1.quikhand,h1.bellefair,h1.dumb,h1.blackjack, h1#akwaaba,h1#akwaaba::first-letter,h1.grandhotel,h1.dumb2
  962. {
  963. font-size:2.2rem;
  964. text-align:left;
  965. }
  966. h1#quikhand ,h1.magnolia
  967. {
  968. font-size:4.7rem;
  969. text-align:center;
  970. }
  971. h8,h9,h10,h11,h12
  972. {
  973. font-size:1.9rem;
  974. }
  975. div.iconwrapper
  976. {
  977. display:flex;
  978. flex-direction:row;
  979. }
  980. div.icon
  981. {
  982. display:flex;
  983. font-size:2.5rem;
  984. align-self:center;
  985. margin-bottom:3.0rem;
  986. }
  987. div.icon img
  988. {
  989. width:3.8rem;
  990. }
  991. div.flex2 p
  992. {
  993. @include margin;
  994. font-family: 'bellefairregular';
  995. font-size:1.25rem;
  996. line-height:105%;
  997. }
  998. div.link
  999. {
  1000. display:flex;
  1001. flex-direction:row;
  1002. width:100%;
  1003. justify-content:space-around;
  1004. flex-wrap:nowrap;
  1005. align-items:center;
  1006. }
  1007. div.linkImage
  1008. {
  1009. display:flex;
  1010. width:22%;
  1011. }
  1012. }
  1013. /* ----------- iPad Pro ----------- /
  1014. / Portrait and Landscape */
  1015. @media (min-width: 1024px) and (max-height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5)
  1016. {
  1017. h1.quikhand,h1.bellefair,h1.dumb,h1.blackjack, h1#akwaaba,h1#akwaaba::first-letter,h1.grandhotel,h1.dumb2
  1018. {
  1019. font-size:2.2rem;
  1020. text-align:left;
  1021. }
  1022. }