[text] test

Viewer

  1. $var1: #FFFFFF;
  2. $var2: #eaeaea;
  3. $var3: #ffffff;
  4. $var4: #4e4e4e;
  5. $var5: #ccd4e1;
  6. $var6: #ffffff;
  7. $var7: #efa603;
  8. $var8: #FFFFFF;
  9. $var9: #efeff4;
  10. $var10: #1f1f1f;
  11. $var11: #000000;
  12. $var12: #f7f8fa;
  13. $var13: #262628;
  14. $var14: #618beb;
  15.  
  16. .images-wrapper {
  17.         min-width: 253px;
  18. }
  19. /** Navigation **/
  20.     .owl-theme .owl-nav{
  21.         position: absolute;
  22.         top: calc(50% - 24px);
  23.         width: 100%;
  24.         margin-top: 0;
  25.     }
  26.     .owl-theme .owl-nav [class*=owl-]:hover,
  27.     .owl-carousel .owl-nav button.owl-next,
  28.     .owl-carousel .owl-nav button.owl-prev {
  29.         position: absolute;
  30.         background-color: transparent;
  31.         background-repeat: no-repeat;
  32.         background-size: 22px;
  33.         background-position: center center;
  34.         content: "";
  35.         width: 30px;
  36.         height: 30px;
  37.         display: block;
  38.         border-radius: 50%;
  39.         padding: 4px;
  40.         opacity: 1;
  41.         box-sizing: border-box;
  42.     }
  43.  
  44.     /** Slide **/
  45.     .owl-carousel,
  46.     .owl-carousel .owl-stage-outer,
  47.     .owl-carousel .owl-stage,
  48.     .owl-carousel .owl-item,
  49.     .owl-carousel .owl-item > div,
  50.     .owl-carousel .owl-item img,
  51.     .card .image{
  52.         height: 100%;
  53.     }
  54.  
  55.     .owl-carousel .owl-item img{
  56.         object-fit: cover;
  57.     }
  58.  
  59.     .owl-carousel .owl-stage-outer{
  60.         cursor: pointer;
  61.     }
  62.     
  63.     @import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");
  64.  
  65. /**
  66.  * Header
  67.  */
  68. header .logo.fixed{
  69.     position: fixed;
  70.     top: 10px;
  71.     left: 40px;
  72.     z-index: 2;
  73. }
  74.  
  75. header .logo.fixed img{
  76.     height: 18px;
  77.     margin-top: 20px;
  78. }
  79.  
  80. @media (min-width: 768px) {
  81.  
  82.     .page-template-page-find header .container,
  83.     .tax-locations header .container {
  84.         box-sizing: border-box;
  85.         width: 100%;
  86.         max-width: none;
  87.         padding: 0 40px;
  88.         margin: 0;
  89.     }
  90. }
  91.  
  92.  
  93. /**
  94.  * Breadcrumb
  95.  */
  96. @media (min-width: 1232px) {
  97.     #breadcrumbs.fixed{
  98.         position: fixed;
  99.         top: 110px;
  100.         max-width: 250px;
  101.         z-index: 3;
  102.     }
  103. }
  104.  
  105. /**
  106.  *    Location search grid and filters
  107.  */
  108.  
  109. body.page-template-page-find .hidden-values,
  110. body.archive.tax-locations .hidden-values {
  111.     background-color: pink;
  112. }
  113.  
  114. /**
  115.  * Top Form
  116.  */
  117. .top-form *, .top-form *::before, .top-form *::after {
  118.     box-sizing: border-box;
  119. }
  120.  
  121. body.page-template-page-find .top-form,
  122. body.archive.tax-locations .top-form {
  123.     margin-bottom: 70px;
  124.     text-align: center;
  125.  
  126.     position: relative;
  127.     z-index: 1;
  128. }
  129.  
  130. body.page-template-page-find .top-form .top-form__inner,
  131. body.archive.tax-locations .top-form .top-form__inner{
  132.     transform: translate(0, 0); /* For browsers don't support translate3d. */
  133.     transform: translate3d(0, 0, 0);
  134.     will-change: position, transform;
  135.     z-index: 99;
  136. }
  137. body.page-template-page-find .top-form.is-affixed .top-form__inner,
  138. body.archive.tax-locations .top-form.is-affixed .top-form__inner{
  139.     background: #FFFFFF;
  140.     border-bottom: 1px solid #eaeaea;
  141. }
  142.  
  143. body.page-template-page-find .top-form .row,
  144. body.archive.tax-locations .top-form .row{
  145.     padding: 15px 0;
  146. }
  147. @media (min-width: 769px) {
  148.     body.page-template-page-find .top-form .row,
  149.     body.archive.tax-locations .top-form .row {
  150.         position: relative;
  151.     }
  152. }
  153.  
  154. @media(max-width: 768px){
  155.  
  156.     body.page-template-page-find .top-form,
  157.     body.archive.tax-locations .top-form {
  158.         margin-bottom: 30px;
  159.     }
  160.  
  161.     .top-form form > .container > .row > div[class^="col-"]{
  162.         padding: 0;
  163.         margin-bottom: 20px;
  164.     }
  165.  
  166.     .top-form form > .container > .row > div[class^="col-"]:last-child{
  167.         margin-bottom: 0;
  168.     }
  169. }
  170.  
  171. /**
  172.     Top form elements
  173.  */
  174. .top-form .input-group{
  175.     box-shadow: 0 5px 15px 0 rgb(0 0 0 / 8%);
  176. }
  177.  
  178. .top-form .input-group-text{
  179.     border: none;
  180.     background-color: #fff;
  181.     font-size: 1.2em;
  182. }
  183.  
  184. .top-form .form-control {
  185.     height: calc(1.5em + 0.75rem + 8px);
  186. }
  187.  
  188. .top-form select,
  189. .top-form input[type="text"],
  190. .top-form button.btn{
  191.     text-align-last: center;
  192.     padding-right: 39px; /* Otherwise text is not centered */
  193.     border: none;
  194.  
  195.     font-family: Montserrat;
  196.     font-size: 14px;
  197.     color: #4e4e4e;
  198.  
  199.     /* Arrow */
  200.     -webkit-appearance: initial !important;
  201.     background-image: url("../../content/icons/arrow.svg");
  202.     background-position: calc(100% - 20px) calc(50%);
  203.     background-size: 20px 20px;
  204.     background-repeat: no-repeat;
  205. }
  206.  
  207. .top-form input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  208.     color: #4e4e4e;
  209.     opacity: 1; /* Firefox */
  210. }
  211.  
  212. .top-form input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  213.     color: #4e4e4e;
  214. }
  215.  
  216. .top-form input::-ms-input-placeholder { /* Microsoft Edge */
  217.     color: #4e4e4e;
  218. }
  219.  
  220. /**
  221.  Location  multiselect dropdown
  222.  */
  223. #locationDropdownMenu{
  224.     width: calc(100% - 43px);
  225. }
  226.  
  227. #locationDropdownMenu .dropdown-menu{
  228.     width: auto;
  229.     margin-left: -44px;
  230.     padding: 10px;
  231.  
  232.     max-height: 60vh;
  233.     overflow-y: scroll;
  234. }
  235. @media (min-width: 980px) {
  236.     #locationDropdownMenu .dropdown-menu{
  237.         min-width: 600px;
  238.     }
  239. }
  240. .top-form button.btn.btn-light{
  241.     background-color: #FFF !important;
  242.     width: 100%;
  243.     border-top-left-radius: 0;
  244.     border-bottom-left-radius: 0;
  245. }
  246. .top-form button.btn.btn-light:after{
  247.     content: none;
  248. }
  249.  
  250. .top-form .btn-light:not(:disabled):not(.disabled):active:focus,
  251. .show > .btn-light.dropdown-toggle:focus,
  252. .top-form .btn-light:focus, .top-form .btn-light.focus{
  253.     color: #4e4e4e;
  254.     /*border: none;
  255.     box-shadow: none;*/
  256. }
  257.  
  258. .top-form .form-check{
  259.     margin-bottom: 5px;
  260. }
  261. .top-form .form-check-input{
  262.     height: 20px;
  263.     width: 20px;
  264.     border-radius: 2px;
  265.     border: solid 1px #ccd4e1;
  266.     background-color: #ffffff;
  267. }
  268. .top-form input[type="checkbox"].form-check-input:checked {
  269.     border: solid 1px #efa603;
  270.     background-color: #efa603;
  271. }
  272. .top-form .form-check-label{
  273.     vertical-align: middle;
  274.     line-height: 30px;
  275.     margin-left: 7px;
  276. }
  277.  
  278. .top-form .dropdown-menu .form-check > .children{
  279.     padding-left: 10px;
  280. }
  281.  
  282. .top-form .dropdown-menu .dropdown-close{
  283.     position: absolute;
  284.     bottom: 20px;
  285.     right: 20px;
  286. }
  287. .top-form .dropdown-menu .dropdown-close.btn-warning{
  288.     background-color: #efa603;
  289.     color: #FFF;
  290. }
  291.  
  292. @media (max-width: 768px) {
  293.  
  294.     #locationDropdownMenu .dropdown-menu .row > div[class^="col-"]:nth-child(2) > .form-check > label{
  295.         display: none;
  296.     }
  297.  
  298.     /* Open dropdown as modal on mobile */
  299.     #locationDropdownMenu.show .dropdown-menu{
  300.         position: fixed;
  301.         top: 0;
  302.         z-index: 99999;
  303.         display: block;
  304.         width: 100%;
  305.         max-height: initial;
  306.         height: 100vh;
  307.         margin: 0;
  308.     }
  309.  
  310.     .top-form .dropdown-menu .dropdown-close{
  311.         position: fixed;
  312.         width: calc(100% - 20px);
  313.         left: 10px;
  314.         right: initial;
  315.  
  316.         box-shadow: 0 5px 20px 0 rgb(0 0 0 / 20%);
  317.         font-size: 18px;
  318.         font-weight: 400;
  319.     }
  320.  
  321.     body.page-template-page-find .top-form .top-form__inner, body.archive.tax-locations .top-form .top-form__inner {
  322.         transform: unset;
  323.         will-change: unset;
  324.     }
  325. }
  326.  
  327. /**
  328.     Breadcrumb
  329. */
  330. section.breadcrumb{
  331.     padding-top: 30px;
  332.     padding-bottom: 30px;
  333. }
  334. #breadcrumbs{
  335.     color: #4e4e4e;
  336. }
  337. #breadcrumbs a{
  338.     color: #efa603;
  339. }
  340. #breadcrumbs .breadcrumb_last{
  341.     color: #4e4e4e;
  342. }
  343.  
  344. /**
  345.     Grid
  346.  */
  347. .locations{
  348.     padding-top: 0;
  349. }
  350.  
  351. .locations .container{
  352.     overflow: visible;
  353. }
  354. .locations .container .grid{
  355.     display: grid;
  356.     grid-template-columns: 100%;
  357. }
  358. .locations .container .grid .column-1{
  359.     display: none;
  360. }
  361. .locations .container .grid .column-1.visible{
  362.     display: block;
  363.     background: white;
  364.  
  365.     top: 0;
  366.     left: 0;
  367.     z-index: 9999;
  368.     width: calc(100% - 60px);
  369.     /*   height: 100%; */
  370.     padding: 30px 30px 0 30px;
  371.     position: fixed;
  372.     height: 100vh;
  373.     overflow: scroll;
  374.     padding-bottom: 60px;
  375. }
  376.  
  377. .locations .container .grid .column-1 ul{
  378.     padding: 0 !important;
  379. }
  380. .locations .container .grid .column-1 ul label{
  381.     display: inline;
  382. }
  383. .locations .container .grid .column-2{
  384.     padding: 0 !important;
  385. }
  386.  
  387. @media (min-width: 980px) {
  388.     .locations .container .grid{
  389.         display: grid;
  390.         /*grid-template-columns: 25% 65%;*/
  391.         grid-template-columns: auto 881px;
  392.         column-gap: 5%;
  393.     }
  394.     .locations .container .grid .column-1{
  395.         display: block;
  396.     }
  397.     .locations .container .grid .column-2 .card b{
  398.         grid-row: 2;
  399.     }
  400. }
  401.  
  402. /**
  403.     Filters
  404.  */
  405. button.back-to-results{
  406.     background: none;
  407.     border: none;
  408.  
  409.     font-family: Poppins, sans-serif;
  410.     font-size: 18px;
  411.     font-width: 500;
  412.  
  413.     position: absolute;
  414.     top: 10px;
  415.     right: 10px;
  416. }
  417.  
  418. .filter-container{
  419.     background-color: white;
  420.     margin-bottom: 100px;
  421.     will-change: min-height;}
  422.  
  423.  
  424. .filter-container{box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.08);}
  425. @media(min-width: 980px){
  426.     .filter-container{
  427.         border-radius: 15px;
  428.         overflow: hidden;
  429.     }
  430. }
  431. .filter-container div div{display: block; transition: 1s;}
  432. .filter-container div div.hide{display: none; transition: 1s;}
  433. .filter-container .drinks h3{border-top: solid 1px #efeff4;}
  434. .filter-container h2{
  435.     position: relative;
  436.  
  437.     font-family: Poppins, sans-serif;
  438.     font-size: 24px;
  439.     font-weight: bold;
  440.     font-stretch: normal;
  441.     font-style: normal;
  442.     line-height: 2;
  443.     letter-spacing: normal;
  444.     text-align: left;
  445.     color: #1f1f1f;
  446.  
  447.     padding: 20px 21px;
  448. }
  449. .filter-container h3{
  450.     padding: 20px; margin: 0; border-bottom: solid 1px #efeff4;
  451.     font-family: Poppins, sans-serif;
  452.     font-size: 18px;
  453.     font-weight: 600;
  454.     font-stretch: normal;
  455.     font-style: normal;
  456.     line-height: 1.5;
  457.     letter-spacing: normal;
  458.     text-align: left;
  459.     color: #1f1f1f;
  460.  
  461.     position: relative;
  462.  
  463.     cursor: pointer;
  464. }
  465. .filter-container h3 .icon{
  466.     width: 14px;
  467.     height: 14px;
  468.     /* background: lightpink; */
  469.  
  470.     position: absolute;
  471.     top: 25px;
  472.     right: 27px;
  473. }
  474. .filter-container h3 .icon i:first-child{
  475.     width: 14px;
  476.     height: 2px;
  477.     display: block;
  478.     background: #000000;
  479.  
  480.     position: absolute;
  481.     top: 6px;
  482. }
  483. .filter-container h3.closed .icon i:last-child{
  484.     width: 14px;
  485.     height: 2px;
  486.     display: block;
  487.     background: #000000;
  488.  
  489.     position: absolute;
  490.     top: 6px;
  491.  
  492.     transform: rotate(90deg);
  493.  
  494.     opacity: 1;
  495.  
  496.     transition: 1s;
  497. }
  498. .filter-container h3 .icon i:last-child{
  499.     width: 14px;
  500.     height: 2px;
  501.     display: block;
  502.     background: #000000;
  503.  
  504.     position: absolute;
  505.     top: 6px;
  506.  
  507.     transform: rotate(0deg);
  508.  
  509.     opacity: 0;
  510.  
  511.     transition: 1s;
  512. }
  513.  
  514. .filter-container label, .date-content{display: block; background-color: #f7f8fa; border-bottom: solid 1px #efeff4; padding: 15px 20px;}
  515.  
  516. .filter-container label {
  517.     display: block;
  518.     position: relative;
  519.     padding-left: 55px;
  520.     /* margin-bottom: 12px; */
  521.     cursor: pointer;
  522.  
  523.  
  524.     font-family: Poppins, sans-serif;
  525.     font-size: 16px;
  526.     font-weight: normal;
  527.     font-stretch: normal;
  528.     font-style: normal;
  529.     line-height: 1.56;
  530.     letter-spacing: normal;
  531.     text-align: left;
  532.     color: #262628;
  533.  
  534.     -webkit-user-select: none;
  535.     -moz-user-select: none;
  536.     -ms-user-select: none;
  537.     user-select: none;
  538. }
  539.  
  540.  
  541.  
  542. /* Hide the browser's default checkbox */
  543. .filter-container label input {
  544.     position: absolute;
  545.     opacity: 0;
  546.     cursor: pointer;
  547.     height: 0;
  548.     width: 0;
  549. }
  550.  
  551. /* Create a custom checkbox */
  552. .filter-container .checkmark {
  553.     position: absolute;
  554.     top: 15px;
  555.     left: 20px;
  556.     height: 20px;
  557.     width: 20px;
  558.  
  559.     border-radius: 2px;
  560.     border: solid 1px #ccd4e1;
  561.     background-color: #ffffff;
  562.  
  563. }
  564.  
  565. /* On mouse-over, add a grey background color */
  566. .filter-container label:hover input ~ .checkmark {
  567.     background-color: #ffffff;
  568. }
  569.  
  570. /* When the checkbox is checked, add a blue background */
  571. .filter-container label input:checked ~ .checkmark {
  572.     border: solid 1px #efa603;
  573.     background-color: #efa603;
  574. }
  575.  
  576. /* Create the checkmark/indicator (hidden when not checked) */
  577. .filter-container .checkmark:after {
  578.     content: "";
  579.     position: absolute;
  580.     display: none;
  581. }
  582.  
  583. /* Show the checkmark when checked */
  584. .filter-container label input:checked ~ .checkmark:after {
  585.     display: block;
  586. }
  587.  
  588. /* Style the checkmark/indicator */
  589. .filter-container label .checkmark:after {
  590.     left: 6px;
  591.     top: 2px;
  592.     width: 5px;
  593.     height: 10px;
  594.     border: solid white;
  595.     border-width: 0 3px 3px 0;
  596.     -webkit-transform: rotate(45deg);
  597.     -ms-transform: rotate(45deg);
  598.     transform: rotate(45deg);
  599. }
  600.  
  601. .mobile-filters{
  602.     position: fixed;
  603.     bottom: 0;
  604.     left: 0;
  605.     background: #ffffff;
  606.     width: 100%;
  607.     z-index: 9999;
  608.  
  609.     display: none;
  610.  
  611. }
  612.  
  613. .mobile-filters #close, .mobile-filters #open{
  614.     max-width: 100%;
  615.     font-size: 18px;
  616.     text-align: center;
  617.     width: calc(100% - 30px);
  618.     margin: 15px;
  619.     height: auto;
  620.     border-radius: 0px;
  621.     background-color: #efa603;
  622.     color: #fff;
  623.     text-decoration: none;
  624.     padding: .618em 0;
  625.     cursor: pointer;
  626.     box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.2);
  627.     font-weight: 400;
  628.     line-height: 1;
  629.     border: none !important;
  630.  
  631.     cursor: pointer;
  632. }
  633.  
  634. div.searchandfilter{
  635.     display: none;
  636.     background: lightpink;
  637. }
  638.  
  639. .filter__close, .filter__open, .filter__cancel{
  640.     display: none;
  641. }
  642. .filter__close.visible, .filter__open.visible{
  643.     display: block;
  644. }
  645. @media (min-width: 980px) {
  646.     .filter__close, .filter__open{
  647.         display: none;
  648.     }
  649. }
  650. @media (max-width: 980px) {
  651.     .filter__cancel{
  652.         display: block;
  653.     }
  654. }
  655. .filter__container{
  656.     position: fixed;
  657.     left: 0;
  658.     bottom: 0;
  659.     width: 100%;
  660.     z-index: 100;
  661.     background: white;
  662. }
  663.  
  664. /**
  665.     Cards layout
  666.  */
  667.  
  668. .card .info table, .card .info table tr, .card .info table tr td{
  669.     border-spacing: 0;
  670. }
  671. .card .info table{
  672.     width: 100%;
  673. }
  674. .card .info table tr .value{
  675.     width: calc(100% - 30px);
  676. }
  677.  .restaurant-card{
  678.     display: block;
  679.     border-radius: 15px;
  680.     overflow: hidden;
  681.     text-decoration: none;
  682.     box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.16);
  683.     box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.08);
  684.     background-color: #ffffff;
  685.  
  686.     -webkit-transform: perspective(1px) translateZ(0);
  687.     transform: perspective(1px) translateZ(0);
  688.     -webkit-transition-duration: 0.3s;
  689.     transition-duration: 0.3s;
  690.     -webkit-transition-property: transform;
  691.     transition-property: transform;
  692. }
  693. .restaurant-card:hover {
  694.     -webkit-transform: scale(0.98);
  695.     transform: scale(0.98);
  696. }
  697.  
  698. .card .image{
  699.     width: 100%;
  700.     display: flex;
  701.     align-items: flex-start;
  702.     overflow: hidden;
  703. }
  704. .card .image .slide {
  705.     height: 100%;
  706. }
  707. .card .image .slide > img{
  708.     object-fit: cover;
  709.     height: 100%;
  710.     width: 100%;
  711.     max-width: 358px;
  712. }
  713.  
  714. @media (min-width: 980px){
  715.     .restaurant-card{
  716.         margin-bottom: 27px;
  717.         display: grid;
  718.         grid-template-columns: 253px auto;
  719.     }
  720.     .card .info.desktop{
  721.         display: block;
  722.         padding: 16.1px 27.9px 23.2px 26.6px;
  723.     }
  724.     .card .info.mobile{
  725.         display: none;
  726.     }
  727.  
  728.     .card .info.desktop h3{
  729.         font-size: 18px;
  730.         font-weight: 600;
  731.         font-stretch: normal;
  732.         font-style: normal;
  733.         line-height: 1.5;
  734.         letter-spacing: normal;
  735.         text-align: left;
  736.         color: #4e4e4e;
  737.  
  738.         margin-bottom: 8.1px;
  739.     }
  740.     .card .info.desktop table tr .value{
  741.         opacity: 0.9;
  742.         font-size: 13px;
  743.         font-weight: normal;
  744.         font-stretch: normal;
  745.         font-style: normal;
  746.         line-height: 1.54;
  747.         letter-spacing: normal;
  748.         text-align: left;
  749.         color: #4e4e4e;
  750.  
  751.     }
  752.     .card .info.desktop table tr .icon, .card .info.desktop table tr .value{
  753.         padding-bottom: 4px;
  754.     }
  755.  
  756.     .card .info.desktop hr{
  757.         margin: 13px 0 12px 0;
  758.         color: #4e4e4e;
  759.         background: #4e4e4e;
  760.     }
  761.  
  762.     .card .info.desktop p {
  763.         opacity: 0.9;
  764.         font-size: 13px;
  765.         font-weight: normal;
  766.         font-stretch: normal;
  767.         font-style: normal;
  768.         line-height: 1.54;
  769.         letter-spacing: normal;
  770.         text-align: left;
  771.         color: #4e4e4e;
  772.  
  773.     }
  774.  
  775.     .card .info.desktop .more{
  776.  
  777.         font-size: 14px;
  778.         font-weight: 500;
  779.         font-stretch: normal;
  780.         font-style: normal;
  781.         line-height: 1.46;
  782.         letter-spacing: normal;
  783.         text-align: center;
  784.         color: #efa603;
  785.  
  786.         display: block;
  787.         margin-bottom: 20px;
  788.  
  789.     }
  790.  
  791.     .card .info.desktop .cta{
  792.  
  793.         border-radius: 5px;
  794.         background-color: #efa603;
  795.  
  796.         font-size: 13px;
  797.         font-weight: 700;
  798.         font-stretch: normal;
  799.         font-style: normal;
  800.         line-height: 1;
  801.         letter-spacing: normal;
  802.         text-align: center;
  803.         color: #ffffff;
  804.  
  805.         /*padding: 12.4px 47.3px 10.6px 47.7px;*/
  806.         padding: 10px 20px;
  807.  
  808.         text-decoration: none;
  809.  
  810.     }
  811.  
  812.     .card .info.desktop .cta > span > .cta-icon {
  813.         filter: invert(100%) sepia(0%) saturate(2820%) hue-rotate(55deg) brightness(122%) contrast(108%);
  814.         max-height: 24px;
  815.     }
  816.  
  817.     .card .info.desktop table tr .icon{
  818.         width: 30px;
  819.     }
  820.     .card .info.desktop table tr .icon img{
  821.         display: block;
  822.         /* width: 12px;
  823.                 height: 12px; */
  824.         width: 16px;
  825.         max-width: 16px;
  826.         height: 18px;
  827.         /* background: #4e4e4e; */
  828.     }
  829.  
  830. }
  831.  
  832. @media (max-width: 979px){
  833.     .card{
  834.         margin-bottom: 19px;
  835.     }
  836.     .card .info.mobile{
  837.         display: block;
  838.         padding: 11.7px 13.4px 17.2px 13.6px;
  839.     }
  840.     .card .info.desktop{
  841.         display: none;
  842.     }
  843.  
  844.     .card .info.mobile h3{
  845.         font-size: 16px;
  846.         font-weight: 600;
  847.         font-stretch: normal;
  848.         font-style: normal;
  849.         line-height: 1.56;
  850.         letter-spacing: normal;
  851.         text-align: left;
  852.         color: #4e4e4e;
  853.  
  854.         margin-bottom: 7.1px;
  855.     }
  856.     .card .info.mobile table tr .value{
  857.         opacity: 0.9;
  858.         font-size: 12px;
  859.         font-weight: normal;
  860.         font-stretch: normal;
  861.         font-style: normal;
  862.         line-height: 1.5;
  863.         letter-spacing: normal;
  864.         text-align: left;
  865.         color: #4e4e4e;
  866.  
  867.     }
  868.     .card .info.mobile table tr .icon, .card .info.mobile table tr .value{
  869.         padding-bottom: 5px;
  870.     }
  871.  
  872.     .card .info.mobile hr{
  873.         margin: 7px 0 11px 0;
  874.         padding: 0;
  875.         color: #4e4e4e;
  876.         background: #4e4e4e;
  877.     }
  878.  
  879.     .card .info.mobile p {
  880.         opacity: 0.9;
  881.         font-size: 12px;
  882.         font-weight: normal;
  883.         font-stretch: normal;
  884.         font-style: normal;
  885.         line-height: 1.5;
  886.         letter-spacing: normal;
  887.         text-align: left;
  888.         color: #4e4e4e;
  889.  
  890.         display: block;
  891.         margin-bottom: 12.5px;
  892.     }
  893.  
  894.     .card .info.mobile .more{
  895.  
  896.         /*     padding: 11px 44px; */
  897.         padding: 11px 0px;
  898.         display: inline-block;
  899.  
  900.         font-size: 14px;
  901.         font-weight: 500;
  902.         font-stretch: normal;
  903.         font-style: normal;
  904.         line-height: 1;
  905.         letter-spacing: normal;
  906.         text-align: center;
  907.         color: #efa603;
  908.  
  909.         /*     float: left; */
  910.  
  911.         flex: 1;
  912.         margin-right: 20px;
  913.     }
  914.  
  915.     .card .info.mobile .cta{
  916.  
  917.         border-radius: 5px;
  918.         background-color: #efa603;
  919.  
  920.         /*     padding: 11px 44px; */
  921.         padding: 11px 0px;
  922.         display: inline-block;
  923.  
  924.         font-size: 13px;
  925.         font-weight: 700;
  926.         font-stretch: normal;
  927.         font-style: normal;
  928.         line-height: 1;
  929.         letter-spacing: normal;
  930.         text-align: center;
  931.         color: #ffffff;
  932.         text-decoration: none;
  933.  
  934.         /* float: right;
  935.         margin-bottom: 28px;    */
  936.         flex: 1;
  937.     }
  938.  
  939.     .card .info.mobile table tr .icon{
  940.         max-width: 14px;
  941.     }
  942.     .card .info.mobile table tr .icon img{
  943.         display: block;
  944.         /* background: #4e4e4e; */
  945.         /* width: 9px;
  946.                 height: 9px; */
  947.         width: 16px;
  948.         max-width: 16px;
  949.         height: 18px;
  950.     }
  951.  
  952. }
  953.  
  954. /* Bottom form */
  955.  
  956. @media (min-width: 980px){
  957.  
  958.     .bottom-form{
  959.         display: none;
  960.     }
  961. }
  962.  
  963. .container.bottom-form,
  964. .container.bottom-form .row{
  965.     box-sizing: border-box;
  966. }
  967.  
  968. .bottom-form .input-group-text{
  969.     padding: 0.375rem 0.5rem;
  970.  
  971.     border-right: none;
  972.     background-color: #fff;
  973. }
  974. .bottom-form .input-group-text i{
  975.     color: #efa603;
  976. }
  977.  
  978. .bottom-form .input-group > .form-control{
  979.     padding-left: 0;
  980.     padding-right: 0;
  981.     border-left: none;
  982. }
  983.  
  984. .bottom-form div[class^="col-"]:not(:first-child) .input-group > .input-group-prepend > .input-group-text,
  985. .bottom-form div[class^="col-"]:not(:last-child) .input-group > .form-control{
  986.     border-radius: 0;
  987. }
  988. .bottom-form div[class^="col-"]:not(:last-child) .input-group > .form-control{
  989.     border-right-width: 0;
  990. }
  991.  
  992. .bottom-form .form-control > select{
  993.     -webkit-appearance: initial !important;
  994. }
  995.  
  996. /* Pagination */
  997. .wp-pagenavi a, .wp-pagenavi span {
  998.     display: inline-block;
  999.     min-width: 15px;
  1000.     text-align: center;
  1001.  
  1002.     padding: 5px 10px;
  1003.     margin: 4px;
  1004.     color: #4e4e4e;
  1005.     border-color: #eaeaea;
  1006.  
  1007.     -webkit-border-radius: 5px;
  1008.     -moz-border-radius: 5px;
  1009.     border-radius: 5px;
  1010. }
  1011. .wp-pagenavi span.current {
  1012.     font-weight: normal;
  1013.     color: #4e4e4e;
  1014. }
  1015. .wp-pagenavi a:hover, .wp-pagenavi span.current {
  1016.     background-color: #eaeaea;
  1017.     border-color: #eaeaea;
  1018.     text-decoration: none;
  1019. }
  1020. .wp-pagenavi span:not(.current){
  1021.     border: none;
  1022. }
  1023.  
  1024. @media(max-width: 768px) {
  1025.     .wp-pagenavi span:not(.current){
  1026.         display: block;
  1027.     }
  1028. }
  1029.  
  1030. #location-card{
  1031.     border-radius: 32px;
  1032. }
  1033.  
  1034. #location-card .card-footer{
  1035.     border-radius: 32px;
  1036. }
  1037.  
  1038. #location-card .card-footer .input-group{
  1039.     box-shadow: 0 5px 15px 0 rgb(0 0 0 / 8%);
  1040. }
  1041.  
  1042. #location-card .card-footer .input-group-text{
  1043.     border: none;
  1044.     background-color: #fff;
  1045.     font-size: 1.2em;
  1046. }
  1047.  
  1048. #location-card .card-footer select,
  1049. #location-card .card-footer input[type="text"]{
  1050.     text-align-last: center;
  1051.     padding-right: 39px; /* Otherwise text is not centered */
  1052.     border: none;
  1053.  
  1054.     font-family: Montserrat;
  1055.     font-size: 14px;
  1056.     color: #4e4e4e;
  1057.  
  1058.     /* Arrow */
  1059.     -webkit-appearance: initial !important;
  1060.     background-image: url("../../content/icons/arrow.svg");
  1061.     background-position: calc(100% - 20px) calc(50%);
  1062.     background-size: 20px 20px;
  1063.     background-repeat: no-repeat;
  1064. }
  1065.  
  1066. #location-card .card-footer .btn-date {
  1067.     background-color: rgb(82, 183, 136) !important;
  1068.     color: white;
  1069. }
  1070.  
  1071.     body.archive.tax-locations .section .container p{
  1072.         max-width: 100%;
  1073.     }
  1074.  
  1075.     @media(max-width: 1127px) {
  1076.  
  1077.         .text-search{
  1078.             font-size: 16px !important;
  1079.             font-weight: 600 !important;
  1080.         }
  1081.  
  1082.         body.archive.tax-locations .results .card {
  1083.             min-width: 100%;
  1084.             grid-template-columns: 1fr 1fr;
  1085.         }
  1086.  
  1087.         body.archive.tax-locations .results .card a:nth-child(3) {
  1088.             grid-column: auto / span 2;
  1089.             display: none;
  1090.         }
  1091.  
  1092.         body.archive.tax-locations .section .container h1, body.archive.tax-locations .section .container p {
  1093.             text-align: left;
  1094.         }
  1095.  
  1096.         body.archive.tax-locations .hero-img {
  1097.             background-position: center !important;
  1098.             background-size: cover;
  1099.         }
  1100.  
  1101.         .hero-img {
  1102.             height: 40px !important;
  1103.             margin-bottom: 10px !important;
  1104.         }
  1105.  
  1106.         .hero-title {
  1107.             font-size: 23px;
  1108.             padding: 0px 10px;
  1109.         }
  1110.  
  1111.         .top-form form > .container > .row > div[class^="col-"] {
  1112.             margin-bottom: 8px;
  1113.         }
  1114.  
  1115.         .breadcrumb{
  1116.             padding: 10px 0 !important;
  1117.         }
  1118.  
  1119.     }
  1120.     #description p {
  1121.         margin: auto auto 6px auto !important;
  1122.  
  1123.     }
  1124.     #readMoreBtn {
  1125.         font-family: Montserrat;
  1126.         font-size: 13px;
  1127.         font-weight: 600;
  1128.         font-stretch: normal;
  1129.         font-style: normal;
  1130.         line-height: 1.23;
  1131.         letter-spacing: normal;
  1132.         text-align: left;
  1133.         color: #618beb;
  1134.         background: none;
  1135.         border: none;
  1136.         padding: 0;
  1137.         /*margin-top: 7px;*/
  1138.  
  1139. .owl-theme .owl-nav {
  1140.         position: absolute;
  1141.         top: calc(50% - 24px);
  1142.         width: 100%;
  1143.         margin-top: 0;
  1144. }
  1145. .owl-theme .owl-nav [class*=owl-]:hover, .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
  1146.         position: absolute;
  1147.         background-color: transparent;
  1148.         background-repeat: no-repeat;
  1149.         background-size: 22px;
  1150.         background-position: center center;
  1151.         content: "";
  1152.         width: 30px;
  1153.         height: 30px;
  1154.         display: block;
  1155.         border-radius: 50%;
  1156.         padding: 4px;
  1157.         opacity: 1;
  1158.         box-sizing: border-box;
  1159. }
  1160. .owl-carousel, .owl-carousel .owl-stage-outer, .owl-carousel .owl-stage, .owl-carousel .owl-item, .owl-carousel .owl-item > div, .owl-carousel .owl-item img, .card .image {
  1161.         height: 100%;
  1162. }
  1163. .owl-carousel .owl-item img {
  1164.         object-fit: cover;
  1165. }
  1166. .owl-carousel .owl-stage-outer {
  1167.         cursor: pointer;
  1168. }
  1169. header .logo.fixed {
  1170.         position: fixed;
  1171.         top: 10px;
  1172.         left: 40px;
  1173.         z-index: 2;
  1174.         img {
  1175.                 height: 18px;
  1176.                 margin-top: 20px;
  1177.         }
  1178. }
  1179. media (min-width: 768px) {
  1180.         box-sizing: border-box;
  1181.         width: 100%;
  1182.         max-width: none;
  1183.         padding: 0 40px;
  1184.         margin: 0;
  1185. }
  1186. media (min-width: 1232px) {
  1187.         position: fixed;
  1188.         top: 110px;
  1189.         max-width: 250px;
  1190.         z-index: 3;
  1191. }
  1192. body.page-template-page-find .hidden-values, body.archive.tax-locations .hidden-values {
  1193.         background-color: pink;
  1194. }
  1195. .top-form *, .top-form *::before, .top-form *::after {
  1196.         box-sizing: border-box;
  1197. }
  1198. body.page-template-page-find .top-form, body.archive.tax-locations .top-form {
  1199.         margin-bottom: 70px;
  1200.         text-align: center;
  1201.         position: relative;
  1202.         z-index: 1;
  1203.         .top-form__inner {
  1204.                 transform: translate(0, 0);
  1205.                 transform: translate3d(0, 0, 0);
  1206.                 will-change: position, transform;
  1207.                 z-index: 99;
  1208.         }
  1209.         &.is-affixed .top-form__inner {
  1210.                 background: @var1;
  1211.                 border-bottom: 1px solid @var2;
  1212.         }
  1213.         .row {
  1214.                 padding: 15px 0;
  1215.         }
  1216.         .top-form__inner {
  1217.                 transform: unset;
  1218.                 will-change: unset;
  1219.         }
  1220. }
  1221. media (min-width: 769px) {
  1222.         position: relative;
  1223. }
  1224. media(max-width: 768px) {
  1225.         margin-bottom: 30px;
  1226. }
  1227. .top-form form > .container > .row > div[class^="col-"] {
  1228.         padding: 0;
  1229.         margin-bottom: 20px;
  1230.         &:last-child {
  1231.                 margin-bottom: 0;
  1232.         }
  1233. }
  1234. .top-form .input-group {
  1235.         box-shadow: 0 5px 15px 0 rgb(0 0 0 ;
  1236.         &-text {
  1237.                 border: none;
  1238.                 background-color: @var3;
  1239.                 font-size: 1.2em;
  1240.         }
  1241. }
  1242. .top-form .form-control {
  1243.         height: calc(1.5em ;
  1244. }
  1245. .top-form select, .top-form input[type="text"], .top-form button.btn {
  1246.         text-align-last: center;
  1247.         padding-right: 39px;
  1248.         border: none;
  1249.         font-family: Montserrat;
  1250.         font-size: 14px;
  1251.         color: @var4;
  1252.         -webkit-appearance: initial ;
  1253.         background-image: url("..;
  1254.         background-position: calc(100% - 20px) calc(50%);
  1255.         background-size: 20px 20px;
  1256.         background-repeat: no-repeat;
  1257. }
  1258. .top-form input::placeholder {
  1259.         color: @var4;
  1260.         opacity: 1;
  1261. }
  1262. .top-form input:-ms-input-placeholder {
  1263.         color: @var4;
  1264. }
  1265. .top-form input::-ms-input-placeholder {
  1266.         color: @var4;
  1267. }
  1268. #locationDropdownMenu {
  1269.         width: calc(100% - 43px);
  1270.         .dropdown-menu {
  1271.                 width: auto;
  1272.                 margin-left: -44px;
  1273.                 padding: 10px;
  1274.                 max-height: 60vh;
  1275.                 overflow-y: scroll;
  1276.         }
  1277.         &.show .dropdown-menu {
  1278.                 position: fixed;
  1279.                 top: 0;
  1280.                 z-index: 99999;
  1281.                 display: block;
  1282.                 width: 100%;
  1283.                 max-height: initial;
  1284.                 height: 100vh;
  1285.                 margin: 0;
  1286.         }
  1287. }
  1288. media (min-width: 980px) {
  1289.         min-width: 600px;
  1290. }
  1291. .top-form button.btn.btn-light {
  1292.         background-color: @var8 ;
  1293.         width: 100%;
  1294.         border-top-left-radius: 0;
  1295.         border-bottom-left-radius: 0;
  1296.         &:after {
  1297.                 content: none;
  1298.         }
  1299. }
  1300. .top-form .btn-light:not(:disabled):not(.disabled):active:focus, .show > .btn-light.dropdown-toggle:focus, .top-form .btn-light:focus, .top-form .btn-light.focus {
  1301.         color: @var4;
  1302.         border: none;
  1303.         box-shadow: none;
  1304. }
  1305. .top-form .form-check {
  1306.         margin-bottom: 5px;
  1307.         &-input {
  1308.                 height: 20px;
  1309.                 width: 20px;
  1310.                 border-radius: 2px;
  1311.                 border: solid 1px @var5;
  1312.                 background-color: @var3fff;
  1313.         }
  1314.         &-label {
  1315.                 vertical-align: middle;
  1316.                 line-height: 30px;
  1317.                 margin-left: 7px;
  1318.         }
  1319. }
  1320. .top-form input[type="checkbox"].form-check-input:checked {
  1321.         border: solid 1px @var7;
  1322.         background-color: @var7;
  1323. }
  1324. .top-form .dropdown-menu .form-check > .children {
  1325.         padding-left: 10px;
  1326. }
  1327. .top-form .dropdown-menu .dropdown-close {
  1328.         position: absolute;
  1329.         bottom: 20px;
  1330.         right: 20px;
  1331.         &.btn-warning {
  1332.                 background-color: @var7;
  1333.                 color: @var8;
  1334.         }
  1335. }
  1336. media (max-width: 768px) {
  1337.         display: none;
  1338. }
  1339. .top-form .dropdown-menu .dropdown-close {
  1340.         position: fixed;
  1341.         width: calc(100% - 20px);
  1342.         left: 10px;
  1343.         right: initial;
  1344.         box-shadow: 0 5px 20px 0 rgb(0 0 0 ;
  1345.         font-size: 18px;
  1346.         font-weight: 400;
  1347. }
  1348. section.breadcrumb {
  1349.         padding-top: 30px;
  1350.         padding-bottom: 30px;
  1351. }
  1352. #breadcrumbs {
  1353.         color: @var4;
  1354.         a {
  1355.                 color: @var7;
  1356.         }
  1357.         .breadcrumb_last {
  1358.                 color: @var4;
  1359.         }
  1360. }
  1361. .locations {
  1362.         padding-top: 0;
  1363.         .container {
  1364.                 overflow: visible;
  1365.                 .grid {
  1366.                         display: grid;
  1367.                         grid-template-columns: 100%;
  1368.                         .column-1 {
  1369.                                 display: none;
  1370.                                 &.visible {
  1371.                                         display: block;
  1372.                                         background: white;
  1373.                                         top: 0;
  1374.                                         left: 0;
  1375.                                         z-index: 9999;
  1376.                                         width: calc(100% - 60px);
  1377.                                         height: 100%;
  1378.                                         padding: 30px 30px 0 30px;
  1379.                                         position: fixed;
  1380.                                         height: 100vh;
  1381.                                         overflow: scroll;
  1382.                                         padding-bottom: 60px;
  1383.                                 }
  1384.                                 ul {
  1385.                                         padding: 0 ;
  1386.                                         label {
  1387.                                                 display: inline;
  1388.                                         }
  1389.                                 }
  1390.                         }
  1391.                         .column-2 {
  1392.                                 padding: 0 ;
  1393.                                 .card b {
  1394.                                         grid-row: 2;
  1395.                                 }
  1396.                         }
  1397.                         .column-1 {
  1398.                                 display: block;
  1399.                         }
  1400.                 }
  1401.         }
  1402. }
  1403. media (min-width: 980px) {
  1404.         display: grid;
  1405.         grid-template-columns: 25% 65%;
  1406.         grid-template-columns: auto 881px;
  1407.         column-gap: 5%;
  1408. }
  1409. button.back-to-results {
  1410.         background: none;
  1411.         border: none;
  1412.         font-family: Poppins, sans-serif;
  1413.         font-size: 18px;
  1414.         font-width: 500;
  1415.         position: absolute;
  1416.         top: 10px;
  1417.         right: 10px;
  1418. }
  1419. .filter-container {
  1420.         background-color: white;
  1421.         margin-bottom: 100px;
  1422.         will-change: min-height;
  1423.         div div {
  1424.                 display: block;
  1425.                 transition: 1s;
  1426.                 &.hide {
  1427.                         display: none;
  1428.                         transition: 1s;
  1429.                 }
  1430.         }
  1431.         .drinks h3 {
  1432.                 border-top: solid 1px @var9;
  1433.         }
  1434.         h2 {
  1435.                 position: relative;
  1436.                 font-family: Poppins, sans-serif;
  1437.                 font-size: 24px;
  1438.                 font-weight: bold;
  1439.                 font-stretch: normal;
  1440.                 font-style: normal;
  1441.                 line-height: 2;
  1442.                 letter-spacing: normal;
  1443.                 text-align: left;
  1444.                 color: @var10;
  1445.                 padding: 20px 21px;
  1446.         }
  1447.         h3 {
  1448.                 padding: 20px;
  1449.                 margin: 0;
  1450.                 border-bottom: solid 1px @var9;
  1451.                 font-family: Poppins, sans-serif;
  1452.                 font-size: 18px;
  1453.                 font-weight: 600;
  1454.                 font-stretch: normal;
  1455.                 font-style: normal;
  1456.                 line-height: 1.5;
  1457.                 letter-spacing: normal;
  1458.                 text-align: left;
  1459.                 color: @var10;
  1460.                 position: relative;
  1461.                 cursor: pointer;
  1462.                 .icon {
  1463.                         width: 14px;
  1464.                         height: 14px;
  1465.                         background: lightpink;
  1466.                         position: absolute;
  1467.                         top: 25px;
  1468.                         right: 27px;
  1469.                         i:first-child {
  1470.                                 width: 14px;
  1471.                                 height: 2px;
  1472.                                 display: block;
  1473.                                 background: @var11;
  1474.                                 position: absolute;
  1475.                                 top: 6px;
  1476.                         }
  1477.                         i:last-child {
  1478.                                 width: 14px;
  1479.                                 height: 2px;
  1480.                                 display: block;
  1481.                                 background: @var11;
  1482.                                 position: absolute;
  1483.                                 top: 6px;
  1484.                                 transform: rotate(0deg);
  1485.                                 opacity: 0;
  1486.                                 transition: 1s;
  1487.                         }
  1488.                 }
  1489.                 &.closed .icon i:last-child {
  1490.                         width: 14px;
  1491.                         height: 2px;
  1492.                         display: block;
  1493.                         background: @var11;
  1494.                         position: absolute;
  1495.                         top: 6px;
  1496.                         transform: rotate(90deg);
  1497.                         opacity: 1;
  1498.                         transition: 1s;
  1499.                 }
  1500.         }
  1501.         label {
  1502.                 display: block;
  1503.                 position: relative;
  1504.                 padding-left: 55px;
  1505.                 margin-bottom: 12px;
  1506.                 cursor: pointer;
  1507.                 font-family: Poppins, sans-serif;
  1508.                 font-size: 16px;
  1509.                 font-weight: normal;
  1510.                 font-stretch: normal;
  1511.                 font-style: normal;
  1512.                 line-height: 1.56;
  1513.                 letter-spacing: normal;
  1514.                 text-align: left;
  1515.                 color: @var13;
  1516.                 -webkit-user-select: none;
  1517.                 -moz-user-select: none;
  1518.                 -ms-user-select: none;
  1519.                 user-select: none;
  1520.                 input {
  1521.                         position: absolute;
  1522.                         opacity: 0;
  1523.                         cursor: pointer;
  1524.                         height: 0;
  1525.                         width: 0;
  1526.                         &:checked ~ .checkmark {
  1527.                                 border: solid 1px @var7;
  1528.                                 background-color: @var7;
  1529.                                 &:after {
  1530.                                         display: block;
  1531.                                 }
  1532.                         }
  1533.                 }
  1534.                 &:hover input ~ .checkmark {
  1535.                         background-color: @var3fff;
  1536.                 }
  1537.                 &:after {
  1538.                         left: 6px;
  1539.                         top: 2px;
  1540.                         width: 5px;
  1541.                         height: 10px;
  1542.                         border: solid white;
  1543.                         border-width: 0 3px 3px 0;
  1544.                         -webkit-transform: rotate(45deg);
  1545.                         -ms-transform: rotate(45deg);
  1546.                         transform: rotate(45deg);
  1547.                 }
  1548.         }
  1549.         .checkmark {
  1550.                 position: absolute;
  1551.                 top: 15px;
  1552.                 left: 20px;
  1553.                 height: 20px;
  1554.                 width: 20px;
  1555.                 border-radius: 2px;
  1556.                 border: solid 1px @var5;
  1557.                 background-color: @var3fff;
  1558.                 &:after {
  1559.                         content: "";
  1560.                         position: absolute;
  1561.                         display: none;
  1562.                 }
  1563.                 &:after {
  1564.                         left: 6px;
  1565.                         top: 2px;
  1566.                         width: 5px;
  1567.                         height: 10px;
  1568.                         border: solid white;
  1569.                         border-width: 0 3px 3px 0;
  1570.                         -webkit-transform: rotate(45deg);
  1571.                         -ms-transform: rotate(45deg);
  1572.                         transform: rotate(45deg);
  1573.                 }
  1574.         }
  1575. }
  1576. .filter-container {
  1577.         box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.08);
  1578. }
  1579. media(min-width: 980px) {
  1580.         border-radius: 15px;
  1581.         overflow: hidden;
  1582. }
  1583. .filter-container label, .date-content {
  1584.         display: block;
  1585.         background-color: @var12;
  1586.         border-bottom: solid 1px @var9;
  1587.         padding: 15px 20px;
  1588. }
  1589. .mobile-filters {
  1590.         position: fixed;
  1591.         bottom: 0;
  1592.         left: 0;
  1593.         background: @var3fff;
  1594.         width: 100%;
  1595.         z-index: 9999;
  1596.         display: none;
  1597.         #close, #open {
  1598.                 max-width: 100%;
  1599.                 font-size: 18px;
  1600.                 text-align: center;
  1601.                 width: calc(100% - 30px);
  1602.                 margin: 15px;
  1603.                 height: auto;
  1604.                 border-radius: 0px;
  1605.                 background-color: @var7;
  1606.                 color: @var3;
  1607.                 text-decoration: none;
  1608.                 padding: .618em 0;
  1609.                 cursor: pointer;
  1610.                 box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.2);
  1611.                 font-weight: 400;
  1612.                 line-height: 1;
  1613.                 border: none ;
  1614.                 cursor: pointer;
  1615.         }
  1616. }
  1617. div.searchandfilter {
  1618.         display: none;
  1619.         background: lightpink;
  1620. }
  1621. .filter__close, .filter__open, .filter__cancel {
  1622.         display: none;
  1623. }
  1624. .filter__close.visible, .filter__open.visible {
  1625.         display: block;
  1626. }
  1627. media (min-width: 980px) {
  1628.         display: none;
  1629. }
  1630. media (max-width: 980px) {
  1631.         display: block;
  1632. }
  1633. .filter__container {
  1634.         position: fixed;
  1635.         left: 0;
  1636.         bottom: 0;
  1637.         width: 100%;
  1638.         z-index: 100;
  1639.         background: white;
  1640. }
  1641. .card .info table, .card .info table tr, .card .info table tr td {
  1642.         border-spacing: 0;
  1643. }
  1644. .card .info table {
  1645.         width: 100%;
  1646.         tr .value {
  1647.                 width: calc(100% - 30px);
  1648.         }
  1649. }
  1650. .restaurant-card {
  1651.         display: block;
  1652.         border-radius: 15px;
  1653.         overflow: hidden;
  1654.         text-decoration: none;
  1655.         box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.16);
  1656.         box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.08);
  1657.         background-color: @var3fff;
  1658.         -webkit-transform: perspective(1px) translateZ(0);
  1659.         transform: perspective(1px) translateZ(0);
  1660.         -webkit-transition-duration: 0.3s;
  1661.         transition-duration: 0.3s;
  1662.         -webkit-transition-property: transform;
  1663.         transition-property: transform;
  1664.         &:hover {
  1665.                 -webkit-transform: scale(0.98);
  1666.                 transform: scale(0.98);
  1667.         }
  1668. }
  1669. .card .image {
  1670.         width: 100%;
  1671.         display: flex;
  1672.         align-items: flex-start;
  1673.         overflow: hidden;
  1674.         .slide {
  1675.                 height: 100%;
  1676.                 > img {
  1677.                         object-fit: cover;
  1678.                         height: 100%;
  1679.                         width: 100%;
  1680.                         max-width: 358px;
  1681.                 }
  1682.         }
  1683. }
  1684. media (min-width: 980px) {
  1685.         margin-bottom: 27px;
  1686.         display: grid;
  1687.         grid-template-columns: 253px auto;
  1688. }
  1689. .card .info.desktop {
  1690.         display: block;
  1691.         padding: 16.1px 27.9px 23.2px 26.6px;
  1692.         h3 {
  1693.                 font-size: 18px;
  1694.                 font-weight: 600;
  1695.                 font-stretch: normal;
  1696.                 font-style: normal;
  1697.                 line-height: 1.5;
  1698.                 letter-spacing: normal;
  1699.                 text-align: left;
  1700.                 color: @var4;
  1701.                 margin-bottom: 8.1px;
  1702.         }
  1703.         table tr .value {
  1704.                 opacity: 0.9;
  1705.                 font-size: 13px;
  1706.                 font-weight: normal;
  1707.                 font-stretch: normal;
  1708.                 font-style: normal;
  1709.                 line-height: 1.54;
  1710.                 letter-spacing: normal;
  1711.                 text-align: left;
  1712.                 color: @var4;
  1713.         }
  1714.         table tr .icon, table tr .value {
  1715.                 padding-bottom: 4px;
  1716.         }
  1717.         hr {
  1718.                 margin: 13px 0 12px 0;
  1719.                 color: @var4;
  1720.                 background: @var4;
  1721.         }
  1722.         p {
  1723.                 opacity: 0.9;
  1724.                 font-size: 13px;
  1725.                 font-weight: normal;
  1726.                 font-stretch: normal;
  1727.                 font-style: normal;
  1728.                 line-height: 1.54;
  1729.                 letter-spacing: normal;
  1730.                 text-align: left;
  1731.                 color: @var4;
  1732.         }
  1733.         .more {
  1734.                 font-size: 14px;
  1735.                 font-weight: 500;
  1736.                 font-stretch: normal;
  1737.                 font-style: normal;
  1738.                 line-height: 1.46;
  1739.                 letter-spacing: normal;
  1740.                 text-align: center;
  1741.                 color: @var7;
  1742.                 display: block;
  1743.                 margin-bottom: 20px;
  1744.         }
  1745.         .cta {
  1746.                 border-radius: 5px;
  1747.                 background-color: @var7;
  1748.                 font-size: 13px;
  1749.                 font-weight: 700;
  1750.                 font-stretch: normal;
  1751.                 font-style: normal;
  1752.                 line-height: 1;
  1753.                 letter-spacing: normal;
  1754.                 text-align: center;
  1755.                 color: @var3fff;
  1756.                 padding: 12.4px 47.3px 10.6px 47.7px;
  1757.                 padding: 10px 20px;
  1758.                 text-decoration: none;
  1759.                 > span > .cta-icon {
  1760.                         filter: invert(100%) sepia(0%) saturate(2820%) hue-rotate(55deg) brightness(122%) contrast(108%);
  1761.                         max-height: 24px;
  1762.                 }
  1763.         }
  1764.         table tr .icon {
  1765.                 width: 30px;
  1766.                 img {
  1767.                         display: block;
  1768.                         width: 12px;
  1769.                         height: 12px;
  1770.                         width: 16px;
  1771.                         max-width: 16px;
  1772.                         height: 18px;
  1773.                         background: @var4;
  1774.                 }
  1775.         }
  1776. }
  1777. .card .info.mobile {
  1778.         display: none;
  1779.         h3 {
  1780.                 font-size: 16px;
  1781.                 font-weight: 600;
  1782.                 font-stretch: normal;
  1783.                 font-style: normal;
  1784.                 line-height: 1.56;
  1785.                 letter-spacing: normal;
  1786.                 text-align: left;
  1787.                 color: @var4;
  1788.                 margin-bottom: 7.1px;
  1789.         }
  1790.         table tr .value {
  1791.                 opacity: 0.9;
  1792.                 font-size: 12px;
  1793.                 font-weight: normal;
  1794.                 font-stretch: normal;
  1795.                 font-style: normal;
  1796.                 line-height: 1.5;
  1797.                 letter-spacing: normal;
  1798.                 text-align: left;
  1799.                 color: @var4;
  1800.         }
  1801.         table tr .icon, table tr .value {
  1802.                 padding-bottom: 5px;
  1803.         }
  1804.         hr {
  1805.                 margin: 7px 0 11px 0;
  1806.                 padding: 0;
  1807.                 color: @var4;
  1808.                 background: @var4;
  1809.         }
  1810.         p {
  1811.                 opacity: 0.9;
  1812.                 font-size: 12px;
  1813.                 font-weight: normal;
  1814.                 font-stretch: normal;
  1815.                 font-style: normal;
  1816.                 line-height: 1.5;
  1817.                 letter-spacing: normal;
  1818.                 text-align: left;
  1819.                 color: @var4;
  1820.                 display: block;
  1821.                 margin-bottom: 12.5px;
  1822.         }
  1823.         .more {
  1824.                 padding: 11px 44px;
  1825.                 padding: 11px 0px;
  1826.                 display: inline-block;
  1827.                 font-size: 14px;
  1828.                 font-weight: 500;
  1829.                 font-stretch: normal;
  1830.                 font-style: normal;
  1831.                 line-height: 1;
  1832.                 letter-spacing: normal;
  1833.                 text-align: center;
  1834.                 color: @var7;
  1835.                 float: left;
  1836.                 flex: 1;
  1837.                 margin-right: 20px;
  1838.         }
  1839.         .cta {
  1840.                 border-radius: 5px;
  1841.                 background-color: @var7;
  1842.                 padding: 11px 44px;
  1843.                 padding: 11px 0px;
  1844.                 display: inline-block;
  1845.                 font-size: 13px;
  1846.                 font-weight: 700;
  1847.                 font-stretch: normal;
  1848.                 font-style: normal;
  1849.                 line-height: 1;
  1850.                 letter-spacing: normal;
  1851.                 text-align: center;
  1852.                 color: @var3fff;
  1853.                 text-decoration: none;
  1854.                 float: right;
  1855.                 margin-bottom: 28px;
  1856.                 flex: 1;
  1857.         }
  1858.         table tr .icon {
  1859.                 max-width: 14px;
  1860.                 img {
  1861.                         display: block;
  1862.                         background: @var4;
  1863.                         width: 9px;
  1864.                         height: 9px;
  1865.                         width: 16px;
  1866.                         max-width: 16px;
  1867.                         height: 18px;
  1868.                 }
  1869.         }
  1870. }
  1871. media (max-width: 979px) {
  1872.         margin-bottom: 19px;
  1873. }
  1874. .card .info.mobile {
  1875.         display: block;
  1876.         padding: 11.7px 13.4px 17.2px 13.6px;
  1877. }
  1878. .card .info.desktop {
  1879.         display: none;
  1880. }
  1881. media (min-width: 980px) {
  1882.         display: none;
  1883. }
  1884. .container.bottom-form, .container.bottom-form .row {
  1885.         box-sizing: border-box;
  1886. }
  1887. .bottom-form .input-group-text {
  1888.         padding: 0.375rem 0.5rem;
  1889.         border-right: none;
  1890.         background-color: @var3;
  1891.         i {
  1892.                 color: @var7;
  1893.         }
  1894. }
  1895. .bottom-form .input-group > .form-control {
  1896.         padding-left: 0;
  1897.         padding-right: 0;
  1898.         border-left: none;
  1899. }
  1900. .bottom-form div[class^="col-"]:not(:first-child) .input-group > .input-group-prepend > .input-group-text, .bottom-form div[class^="col-"]:not(:last-child) .input-group > .form-control {
  1901.         border-radius: 0;
  1902. }
  1903. .bottom-form div[class^="col-"]:not(:last-child) .input-group > .form-control {
  1904.         border-right-width: 0;
  1905. }
  1906. .bottom-form .form-control > select {
  1907.         -webkit-appearance: initial ;
  1908. }
  1909. .wp-pagenavi a, .wp-pagenavi span {
  1910.         display: inline-block;
  1911.         min-width: 15px;
  1912.         text-align: center;
  1913.         padding: 5px 10px;
  1914.         margin: 4px;
  1915.         color: @var4;
  1916.         border-color: @var2;
  1917.         -webkit-border-radius: 5px;
  1918.         -moz-border-radius: 5px;
  1919.         border-radius: 5px;
  1920.         &:hover, &.current {
  1921.                 background-color: @var2;
  1922.                 border-color: @var2;
  1923.                 text-decoration: none;
  1924.         }
  1925. }
  1926. .wp-pagenavi span.current {
  1927.         font-weight: normal;
  1928.         color: @var4;
  1929. }
  1930. .wp-pagenavi span:not(.current) {
  1931.         border: none;
  1932. }
  1933. media(max-width: 768px) {
  1934.         span: not(.current);
  1935.         display: block;
  1936. }
  1937. #location-card {
  1938.         border-radius: 32px;
  1939.         .card-footer {
  1940.                 border-radius: 32px;
  1941.                 .input-group {
  1942.                         box-shadow: 0 5px 15px 0 rgb(0 0 0 ;
  1943.                         &-text {
  1944.                                 border: none;
  1945.                                 background-color: @var3;
  1946.                                 font-size: 1.2em;
  1947.                         }
  1948.                 }
  1949.                 select, input[type="text"] {
  1950.                         text-align-last: center;
  1951.                         padding-right: 39px;
  1952.                         border: none;
  1953.                         font-family: Montserrat;
  1954.                         font-size: 14px;
  1955.                         color: @var4;
  1956.                         -webkit-appearance: initial ;
  1957.                         background-image: url("..;
  1958.                         background-position: calc(100% - 20px) calc(50%);
  1959.                         background-size: 20px 20px;
  1960.                         background-repeat: no-repeat;
  1961.                 }
  1962.                 .btn-date {
  1963.                         background-color: rgb(82, 183, 136) ;
  1964.                         color: white;
  1965.                 }
  1966.         }
  1967. }
  1968. body.archive.tax-locations .section .container p {
  1969.         max-width: 100%;
  1970. }
  1971. media(max-width: 1127px) {
  1972.         font-size: 16px ;
  1973.         font-weight: 600 ;
  1974. }
  1975. body.archive.tax-locations .results .card {
  1976.         min-width: 100%;
  1977.         grid-template-columns: 1fr 1fr;
  1978.         a:nth-child(3) {
  1979.                 grid-column: auto ;
  1980.                 display: none;
  1981.         }
  1982. }
  1983. body.archive.tax-locations .section .container h1, body.archive.tax-locations .section .container p {
  1984.         text-align: left;
  1985. }
  1986. body.archive.tax-locations .hero-img {
  1987.         background-position: center ;
  1988.         background-size: cover;
  1989. }
  1990. .hero-img {
  1991.         height: 40px ;
  1992.         margin-bottom: 10px ;
  1993. }
  1994. .hero-title {
  1995.         font-size: 23px;
  1996.         padding: 0px 10px;
  1997. }
  1998. .top-form form > .container > .row > div[class^="col-"] {
  1999.         margin-bottom: 8px;
  2000. }
  2001. .breadcrumb {
  2002.         padding: 10px 0 ;
  2003. }
  2004. #description p {
  2005.         margin: auto auto 6px auto ;
  2006. }
  2007. #readMoreBtn {
  2008.         font-family: Montserrat;
  2009.         font-size: 13px;
  2010.         font-weight: 600;
  2011.         font-stretch: normal;
  2012.         font-style: normal;
  2013.         line-height: 1.23;
  2014.         letter-spacing: normal;
  2015.         text-align: left;
  2016.         color: @var14;
  2017.         background: none;
  2018.         border: none;
  2019.         padding: 0;
  2020.         margin-top: 7px;
  2021.         &:hover {
  2022.                 cursor: pointer;
  2023.         }
  2024. }
  2025. #more {
  2026.         display: none;
  2027. }
  2028. .location-title {
  2029.         font-size: 22px;
  2030.         font-weight: 700;
  2031.         line-height: 1.31;
  2032.         color: @var4;
  2033. }
  2034. media (min-width: 1232px) {
  2035.         font-size: 28px;
  2036. }
  2037. .text-search {
  2038.         font-size: 20px ;
  2039. }
  2040.  

Editor

You can edit this paste and save as new:


File Description
  • test
  • Paste Code
  • 02 Dec-2022
  • 42.4 Kb
You can Share it: