templates/Theme/layoutbase.html.twig line 5025

Open in your IDE?
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  5.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  7.   <meta name="msapplication-tap-highlight" content="no"/>
  8.   {{ render(controller("App\\Controller\\General\\Template\\MenuController:relicon")) }}
  9.   {% block meta %} {% endblock %}
  11.   <title>
  12.     {% block title %}
  13.       {{ render(controller("App\\Controller\\General\\Template\\MenuController:relicon", {'position': 'title'})) }}
  14.     {% endblock %}
  15.   </title>
  17.   {% block stylesheets %}
  19.     <!-- Web Font -->
  20.     <link href="https://fonts.googleapis.com/css?family=Poppins:200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet"/>
  21.     <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"/>
  23.     {{ render(controller("App\\Controller\\General\\Template\\MenuController:variablesCss")) }}
  25.       <style>
  26.           .header.shop .all-category{
  27.               background: var(--bg-principal)!important;
  28.         color: var(--text-principal)!important;
  29.           }
  30.       .header.shop .header-inner {
  31.         background: var(--bg-secondaire)!important;
  32.         color: var(--text-secondaire)!important;
  33.       }
  34.       .header.shop .list-main span i{
  35.         color: var(--text-icon-color)!important;
  36.       }
  37.       .header.shop .list-main span a:hover{
  38.         color: var(--text-icon-color)!important;
  39.       }
  40.       .header.shop .nice-select .list li:hover, .header.shop .nav li .dropdown li:hover a, .header.shop .nav li a:hover, .header.shop .main-category li a:hover{
  41.         background: var(--bg-principal)!important;
  42.         color: var(--text-principal)!important;
  43.       }
  44.       .header.sticky .header-inner .nav li a {
  45.         color: var(--text-secondaire)!important;
  46.       }
  47.       .owl-theme .owl-nav [class*='owl-'], .header.shop .nav li .new{
  48.         background: var(--bg-principal)!important;
  49.         color: var(--text-principal)!important;
  50.       }
  51.       .header.shop .nav li .new::before{
  52.         border: 4px solid var(--bg-principal)!important;
  53.       }
  54.       .header.shop .main-category li .mega-menu .single-menu .title-link{
  55.         background: var(--bg-principal)!important;
  56.         color: var(--text-principal)!important;
  57.       }
  58.       .header.shop .main-category li .mega-menu .single-menu .title-link:hover{
  59.         background: var(--bg-principal)!important;
  60.         color: var(--text-principal)!important;
  61.       }
  62.       .header.shop .main-category li .mega-menu {
  63.         border-left: 3px solid var(--bg-principal)!important;
  64.       }
  65.       .header.shop .main-category li .mega-menu .single-menu .image{
  66.           overflow: hidden;
  67.           text-align: center!important;
  68.           box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  69.           transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  70.           padding: 15px 10px;
  71.       }
  73.       .header.shop .main-category li .mega-menu .single-menu img {
  74.           display: inline-block!important;
  75.           cursor: pointer;
  76.       }
  77.       .header.shop .topbar{
  78.         background: var(--bg-principal)!important;
  79.       }
  81.       .header.shop .list-main span a, .principal-link{
  82.         color: var(--text-principal)!important;
  83.       }
  84.       .header.shop .list-main span a:hover, .principal-link:hover{
  85.         background: var(--bg-secondaire)!important;
  86.         color: var(--text-secondaire)!important;
  87.       }
  88.       .call-action-post, .header.shop .right-bar .sinlge-bar .single-icon .total-count{
  89.         background: var(--bg-principal)!important;
  90.         color: var(--text-principal)!important;
  91.       }
  92.       .header.shop .list-main span i{
  93.         color: var(--text-principal)!important;
  94.       }
  95.       .header.shop .nav li.menu-dd-coustom:hover a.target-dd {
  96.         background: var(--bg-principal)!important;
  97.         color: var(--text-principal)!important;
  98.       }
  99.       .header .shopping .dropdown-cart-header a:hover, .header.shop .right-bar .sinlge-bar .single-icon:hover{
  100.         color: var(--bg-principal)!important;
  101.       }
  102.       .header .shopping-item .bottom .btn:hover, .header.shop .search-bar .btnn:hover{
  103.         background: var(--bg-principal)!important;
  104.         color: var(--text-principal)!important;
  105.       }
  106.       </style>
  108.     <!-- Bootstrap -->
  109.     <link rel="stylesheet" href="{{ asset('template/css/bootstrap.css') }}"/>
  110.     <link href="{{ asset('template/css/afhstyle.css') }}" type="text/css" rel="stylesheet" media="screen,projection"/>
  111.     <!-- Magnific Popup -->
  112.   <link rel="stylesheet" href="{{ asset('template/css/magnific-popup.min.css') }}"/>
  113.     <!-- Font Awesome -->
  114.   <link rel="stylesheet" href="{{ asset('template/css/font-awesome.css') }}"/>
  115.     <!-- Fancybox -->
  116.     <link rel="stylesheet" href="{{ asset('template/css/jquery.fancybox.min.css') }}"/>
  117.     <!-- Themify Icons -->
  118.   <link rel="stylesheet" href="{{ asset('template/css/themify-icons.css') }}"/>
  119.     <!-- Nice Select CSS -->
  120.   <link rel="stylesheet" href="{{ asset('template/css/niceselect.css') }}"/>
  121.     <!-- Animate CSS -->
  122.   <link rel="stylesheet" href="{{ asset('template/css/animate.css') }}"/>
  123.     <!-- Flex Slider CSS -->
  124.   <link rel="stylesheet" href="{{ asset('template/css/flex-slider.min.css') }}"/>
  125.     <!-- Owl Carousel -->
  126.   <link rel="stylesheet" href="{{ asset('template/css/owl-carousel.css') }}"/>
  127.     <!-- Slicknav -->
  128.   <link rel="stylesheet" href="{{ asset('template/css/slicknav.min.css') }}"/>
  130.     <!-- Eshop StyleSheet -->
  131.     <link rel="stylesheet" href="{{ asset('template/css/reset.css') }}"/>
  132.     <link rel="stylesheet" href="{{ asset('template/css/style.css') }}"/>
  133.   <link rel="stylesheet" href="{{ asset('template/css/responsive.css') }}"/>
  134.     <link rel="stylesheet" href="{{ asset('autocomplete/css/jquery.auto-complete.css') }}"/>
  135.   <link rel="stylesheet" href="{{ asset('template/css/bootstrap-icons.css') }}"/>
  136.     <script src="{{ asset('template/js/jquery.min.js') }}"></script>
  137.     <script src="{{ asset('template/js/jquery.newsTicker.js') }}"></script>
  138.     <script src="{{ asset('template/js/lottieflow.min.js') }}" type="text/javascript"></script>
  139.     <!-- Owl Carousel JS -->
  140.     <script src="{{ asset('template/js/owl.carousel.min.js') }}"></script>
  142.     <link rel="stylesheet" href="{{ asset('template/notify/themes/alertify.core.css') }}"/>
  143.     <link rel="stylesheet" href="{{ asset('template/notify/themes/alertify.default.css') }}" id="toggleCSS"/>
  144.     <script src="{{ asset('template/notify/lib/alertify.min.js') }}"></script>
  145.     <script>
  146.         function resetNotif(){
  147.             $("#toggleCSS").attr("href", "{{ asset('template/notify/themes/alertify.default.css') }}");
  148.             alertify.set({
  149.                 labels : {
  150.                     ok     : "OK",
  151.                     cancel : "Cancel"
  152.                 },
  153.                 delay : 5000,
  154.                 buttonReverse : false,
  155.                 buttonFocus   : "ok"
  156.             });
  157.         }
  158.     </script>
  160. <style>
  161. .hover-offer, .hover-offer h2 {
  162.     text-align: left;
  163. }
  164. .hover-offer, .hover-offer .overlay2 {
  165.     width: 95%;
  166.     max-width: 450px;
  167.     height: auto;
  168.     overflow: hidden
  169. }
  170. .hover-offer button.info, .hover-offer h2 {
  171.     text-transform: uppercase;
  172.     color: #fff
  173. }
  174. .hover-offer {
  175. cursor: pointer;
  176.     margin-bottom: 20px;
  177.     border-radius: 2px;
  178.     width: 100%;
  179.         min-width: 267px;
  180.     max-height: 350px;
  181.     max-width: 400px;
  182.     margin-left: auto;
  183.     margin-right: auto;
  184. }
  185. .hover-offer .overlay2 {
  186.     position: absolute;
  187.     top: 0;
  188.     left: 0
  189. }
  190. .hover-offer img {
  191.     display: block;
  192.     position: relative;
  193. }
  194. .offer-content {
  195. position: absolute;
  196.     z-index: 10;
  197.     /* height: 100%; */
  198.        width: 94%;
  199.     /* max-height: 239px; */
  200.     bottom: 0;
  201.     padding: 5% 4% 14% 7%;
  202.     color: #FFF;
  203.    background-image: linear-gradient(145deg, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.1) 80%);
  204.     background-image: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.1) 80%);
  205.     background-image:-webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.1) 80%);
  206.     /* background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 60%); */
  207.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#000', endColorstr='transparent', GradientType=1 );
  208.     /* -webkit-transition: all .3s ease-out 0s; */
  209.     -moz-transition: all .3s ease-out 0s;
  210.     -o-transition: all .3s ease-out 0s;
  211.     -ms-transition: all .3s ease-out 0s;
  212.     transition: all .3s ease-out 0s;
  213.     margin-bottom: 20px;
  214.     margin-top: 1px;
  215.     top: 0;
  216. }
  217. .offer-content h4 {
  218.     font-size: 170% !important;
  219.     margin-top: 10px;
  220.     margin-bottom: 16px;
  221.     font-weight: 700;
  222.     margin-top: 20px;
  223. }
  224. .offer-content .price {
  225.     font-size: 20px;
  226.     color: #fff;
  227.     text-align: left;
  228.     padding-top: 2%;
  229. }
  230. .ehover1 img {
  231.     -webkit-transition: all .4s linear;
  232.     transition: all .4s linear
  233. }
  234. .ehover1 .overlay2 {
  235.     -webkit-transition: all .4s ease-in-out;
  236.     transition: all .4s ease-in-out
  237. }
  238. .ehover1:hover img {
  239.     -ms-transform: scale(1.2);
  240.     -webkit-transform: scale(1.2);
  241.     transform: scale(1.2)
  242. }
  243. .ehover1:hover .overlay2 {
  244.     opacity: 1
  245. }
  246. .offer-content .price-offer {
  247.     font-size: 32px;
  248.     color: #fff;
  249.     margin-top: 10px;
  250. }
  251. .flights-icon {
  252.     border: 1px solid #ffffff;
  253.     border-radius: 100%;
  254.     display: block;
  255.     font-family: "theme-icons";
  256.     font-size: 20px !important;
  257.     height: 38px;
  258.     line-height: 38px !important;
  259.     text-align: center;
  260.     width: 38px;
  261. }
  262. p.detail {
  263.     font-size: 118%;
  264.     line-height: 38px;
  265. }
  266. p.price-offer {
  267.     font-size: 16px;
  268.     color: #fff;
  269.     font-weight: 500;
  270.     line-height: 23px;
  271. }
  272. p.price-offer span {
  273.     font-size: 16px;
  274. }
  275. /* RIBBON */
  278. .ribbon {
  279.     position: absolute;
  280.     z-index: 10;
  281.     padding: 0px 7px;
  282.     /* margin-left: 62.5%; */
  283.     /* margin-right: 12.0%; */
  284.     border-top-left-radius: 2px;
  285.     border-bottom-left-radius: 2px;
  286.     font-size: 15px;
  287.     line-height: 32px;
  288.     font-weight: bold;
  289.     text-align: center;
  290.     color: #fff;
  291.     text-shadow: 0 1px 1px rgba(0,0,0,0.2);
  292.     -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  293.     -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  294.     box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  295.     zoom: 1;
  296.     /* top: 8%; */
  297. right: -3%;
  299.     /* left: 61%; */
  300.     min-width: 40%;
  301.     max-width: 50%;
  302.     height: 32px;
  304. }
  305. .orange {
  306.     background: #FF9600;
  307. }
  308. .blue {
  309.     background: #3398d9
  310. }
  311. .green {
  312.     background: #66b94d;
  313. }
  314. .ribbon:after {
  315.     content: "";
  316.     position: absolute;
  317.     z-index: -20;
  318.     top: 100%;
  319.     left: auto;
  320.     border-style: solid;
  321.     border-width: 0 0 10px 10px;
  322.     right: 0;
  323. }
  324. .orange:after {
  325.     border-color: transparent #DC5F0B;
  326. }
  327. .blue:after {
  328.     border-color: transparent #1e5b82;
  329. }
  330. .green:after {
  331.     border-color: transparent #3e7030;
  332. }
  333. .no-ribbon {
  334.     height: 41px;
  335.     position: absolute;
  336.     z-index: 2000;
  337. }
  338. /*END OF RIBBON */
  339. .button2 {
  340.     margin: 0 auto;
  341.     /* width: 145px; */
  342.     height: 40px;
  343.     background: rgba(0, 0, 0, 0.5);
  344.     overflow: hidden;
  345.     text-align: center;
  346.     transition: .2s;
  347.     cursor: pointer;
  348.     border-radius: 4px !important;
  349.     float: left;
  350.     border: 1px solid white;
  351.     font-size: 17px;
  352.     margin-top: 20px;
  353.     font-weight: 400;
  354.     padding: 20px 20px;
  355.     line-height: 0em;
  356.     position: absolute;
  357.     right: 7%;
  358.     bottom: 7%;
  359. }
  361. @media (max-width: 768px) {
  362. .offer-content h4 {
  363.     font-size: 150% !important;
  364. }
  365. p.detail {
  366.     font-size: 140%;
  367.     text-shadow: 1px 1px 9px rgba(0, 0, 0, 1);
  368.       line-height: 18px;
  369. }
  370. .offer-content {
  371. position: absolute;
  372.  z-index: 10;
  373.  min-width:279px;
  374. max-width: 400px;
  375. width: 89%;
  376. bottom: 0;
  377.  color: #FFF;
  378.      padding: 5% 7% 14% 7%;
  379. }
  380. .hover-offer {
  381.     width:95%;
  382.     min-width: 280px;
  383.  min-height: auto;
  384.  max-height: 550px;
  385.  /*max-width: 640px;*/
  386.     /* margin-left: auto; */
  387.     margin-right: auto;
  388.     /* height: 100%; */
  390. /* width: auto; */
  391. }
  392. .col-xs-offset-1 {
  393.     margin-left: 0;
  394. }
  395. .ribbon {
  396.     width: 60%;
  397.         left: 52.5%;
  398. }
  399. }
  401. @media (max-width: 545px) {
  402. .button2 {
  403.  width: 80%;
  404.  padding: 23px;
  405.  font-size: 23px;
  406.  margin-right: 2%;
  407.        bottom: 2%;
  408. }
  409. .ribbon {
  410.     width: 49.9%;
  411.  left: 53.4%;
  412. }
  413. }
  415. .hover-offer {
  416.     position: initial
  417. }
  418. .col-lg-3, .col-md-4, .col-sm-6, .col-xs-12 {
  419.     padding: 0 10px
  420. }
  422. @media (min-width: 1024px) {
  423.   .offer-content:hover {
  424.     box-shadow: none
  425.   }
  426.   .offer-content:hover figcaption {
  427.     background-image: none
  428.   }
  429. }
  430. /*------------ END OF OFFERS ✂----------------------✂*/
  432. .coustom-my-text{
  433.     text-align: left;word-wrap: break-word;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;
  434. }
  435. .mega-menu{
  436.     box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  437.     z-index: 50000;
  438. }
  439. .main-category{
  440. box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  441. transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  442. }
  443. .display-vertical-menu{
  444.     opacity: 0;
  445.     visibility: hidden;
  446. }
  448. .row{
  449.     margin: 0px;
  450. }
  452. .breadcrumbs {
  453.   list-style: none;
  454.   margin: 0;
  455.   padding: 0;
  456. }
  458. .breadcrumbs li {
  459.   list-style: none;
  460.   margin: 0;
  461.   padding: 0;
  462.   display: block;
  463.   float: left;
  464.   font-family: 'Montserrat', sans-serif!important;
  465.   font-size: 13px;
  466.   text-transform: capitalize;
  467.   font-weight: 700;
  468.   letter-spacing: .05em;
  469.   line-height: 20px;
  470.   color: hsl(0, 0%, 30%);
  471. }
  473. .breadcrumbs li a {
  474.   display: block;
  475.   padding: 0 40px 0 0px;
  476.   color: hsl(0, 0%, 30%);
  477.   text-decoration: none;
  478.   height: 20px;
  479.   font-weight: 700;
  480.   letter-spacing: .05em;
  481.   line-height: 20px;
  482.   position: relative;
  483.   perspective: 700px;
  484. }
  486. .breadcrumbs li a:after {
  487.   content: '';
  488.   width: 20px;
  489.   height: 20px;
  490.   border-color: #333;
  491.   border-style: solid;
  492.   border-width: 1px 1px 0 0;
  494.   -webkit-backface-visibility: hidden;
  495.   outline: 1px solid transparent;
  497.   position: absolute;
  498.   right: 20px;
  499.   -webkit-transition: all .15s ease;
  500.      -moz-transition: all .15s ease;
  501.       -ms-transition: all .15s ease;
  502.           transition: all .15s ease;
  503.   -webkit-transform: rotateZ(45deg) skew(10deg, 10deg);
  504.      -moz-transform: rotateZ(45deg) skew(10deg, 10deg);
  505.       -ms-transform: rotateZ(45deg) skew(10deg, 10deg);
  506.           transform: rotateZ(45deg) skew(10deg, 10deg);
  507. }
  510. .breadcrumbs li a:hover:after {
  511.   right: 15px;
  512.   -webkit-transform: rotateZ(45deg) skew(-10deg, -10deg);
  513.      -moz-transform: rotateZ(45deg) skew(-10deg, -10deg);
  514.       -ms-transform: rotateZ(45deg) skew(-10deg, -10deg);
  515.           transform: rotateZ(45deg) skew(-10deg, -10deg);
  516. }
  518. .btn-afh-flat {
  519.     font-size: 12px;
  520.     border: 3px solid #ddd;
  521.     margin-right: -2px;
  522.     font-family: 'Montserrat', sans-serif!important;
  523.     text-align: center;
  524.     color: #030303;
  525.     background: linear-gradient(#FFFFFF,#E6E6E6);
  526.     border: 1px solid #CDCDCD;
  527.     border-radius: 3px;
  528.     display: inline-block;
  529.     padding: 4px 7px;
  530. }
  532. .search-form-left-side .nice-select{
  533.     width: 100%!important;
  534. }
  535. .search-form-top-side .nice-select{
  536.     width: 100%!important;
  537. }
  538. .form-post-product .nice-select{
  539.     width: 100%!important;
  540. }
  543. .product-grid {
  544.   font-family: Raleway,sans-serif;
  545.   text-align: center;
  546.   padding: 0 0 72px;
  547.   border: 1px solid rgba(0, 0, 0, 0.1);
  548.   overflow: hidden;
  549.   position: relative;
  550.   z-index: 1;
  551. }
  552. .product-grid .product-image {
  553.   position: relative;
  554.   -webkit-transition: all .3s ease 0s;
  555.   transition: all .3s ease 0s;
  556. }
  557. .product-grid .product-image a {
  558.   display: block;
  559. }
  560. .product-grid .product-image img {
  561.   width: 100%;
  562.   height: auto;
  563. }
  564. .product-grid .pic-1 {
  565.   opacity: 1;
  566.   -webkit-transition: all .3s ease-out 0s;
  567.   transition: all .3s ease-out 0s;
  568. }
  569. .product-grid:hover .pic-1 {
  570.   opacity: 1;
  571. }
  572. .product-grid .pic-2 {
  573.   opacity: 0;
  574.   position: absolute;
  575.   top: 0;
  576.   left: 0;
  577.   -webkit-transition: all .3s ease-out 0s;
  578.   transition: all .3s ease-out 0s;
  579. }
  580. .product-grid:hover .pic-2 {
  581.   opacity: 1;
  582. }
  583. .product-grid .social {
  584.   width: 150px;
  585.   padding: 0;
  586.   margin: 0;
  587.   list-style: none;
  588.   opacity: 0;
  589.   -webkit-transform: translateY(-50%) translateX(-50%);
  590.           transform: translateY(-50%) translateX(-50%);
  591.   position: absolute;
  592.   top: 60%;
  593.   left: 50%;
  594.   z-index: 1;
  595.   -webkit-transition: all .3s ease 0s;
  596.   transition: all .3s ease 0s;
  597. }
  598. .product-grid:hover .social {
  599.   opacity: 1;
  600.   top: 50%;
  601. }
  602. .product-grid .social li {
  603.   display: inline-block;
  604. }
  605. .product-grid .social li a {
  606.   color: #fff;
  607.   background-color: #333;
  608.   font-size: 16px;
  609.   line-height: 40px;
  610.   text-align: center;
  611.   height: 40px;
  612.   width: 40px;
  613.   margin: 0 2px;
  614.   display: block;
  615.   position: relative;
  616.   -webkit-transition: all .3s ease-in-out;
  617.   transition: all .3s ease-in-out;
  618. }
  619. .product-grid .social li a:hover {
  620.   color: #fff;
  621.   background-color: #ef5777;
  622. }
  623. .product-grid .social li a:after, .product-grid .social li a:before {
  624.   content: attr(data-tip);
  625.   color: #fff;
  626.   background-color: #000;
  627.   font-size: 12px;
  628.   letter-spacing: 1px;
  629.   line-height: 20px;
  630.   padding: 1px 5px;
  631.   white-space: nowrap;
  632.   opacity: 0;
  633.   -webkit-transform: translateX(-50%);
  634.           transform: translateX(-50%);
  635.   position: absolute;
  636.   left: 50%;
  637.   top: -30px;
  638. }
  639. .product-grid .social li a:after {
  640.   content: '';
  641.   height: 15px;
  642.   width: 15px;
  643.   border-radius: 0;
  644.   -webkit-transform: translateX(-50%) rotate(45deg);
  645.           transform: translateX(-50%) rotate(45deg);
  646.   top: -20px;
  647.   z-index: -1;
  648. }
  649. .product-grid .social li a:hover:after, .product-grid .social li a:hover:before {
  650.   opacity: 1;
  651. }
  652. .product-grid .product-discount-label, .product-grid .product-new-label {
  653.   color: #fff;
  654.   background-color: #ef5777;
  655.   font-size: 12px;
  656.   text-transform: uppercase;
  657.   padding: 2px 7px;
  658.   display: block;
  659.   position: absolute;
  660.   top: 10px;
  661.   left: 0;
  662. }
  663. .product-grid .product-discount-label {
  664.   background-color: #333;
  665.   left: auto;
  666.   right: 0;
  667. }
  668. .product-grid .rating {
  669.   color: #FFD200;
  670.   font-size: 12px;
  671.   padding: 12px 0 0;
  672.   margin: 0;
  673.   list-style: none;
  674.   position: relative;
  675.   z-index: -1;
  676. }
  677. .product-grid .rating li.disable {
  678.   color: rgba(0, 0, 0, 0.2);
  679. }
  680. .product-grid .product-content {
  681.   background-color: #fff;
  682.   text-align: center;
  683.   padding: 12px 0;
  684.   margin: 0 auto;
  685.   position: absolute;
  686.   left: 0;
  687.   right: 0;
  688.   bottom: -27px;
  689.   z-index: 1;
  690.   -webkit-transition: all .3s;
  691.   transition: all .3s;
  692. }
  693. .product-grid:hover .product-content {
  694.   bottom: 0;
  695. }
  696. .product-grid .title {
  697.   font-size: 13px;
  698.   font-weight: 400;
  699.   letter-spacing: .5px;
  700.   text-transform: capitalize;
  701.   margin: 0 0 10px;
  702.   -webkit-transition: all .3s ease 0s;
  703.   transition: all .3s ease 0s;
  704. }
  705. .product-grid .title a {
  706.   color: #828282;
  707. }
  708. .product-grid .title a:hover {
  709.   color: #ef5777;
  710. }
  711. .product-grid:hover .title a {
  712.   color: #ef5777;
  713. }
  714. .product-grid .price {
  715.   color: #333;
  716.   font-size: 17px;
  717.   font-family: Montserrat,sans-serif;
  718.   font-weight: 700;
  719.   letter-spacing: .6px;
  720.   margin-bottom: 8px;
  721.   text-align: center;
  722.   -webkit-transition: all .3s;
  723.   transition: all .3s;
  724. }
  725. .product-grid .price span {
  726.   color: #999;
  727.   font-size: 13px;
  728.   font-weight: 400;
  729.   text-decoration: line-through;
  730.   margin-left: 3px;
  731.   display: inline-block;
  732. }
  733. .product-grid .add-to-cart {
  734.   color: #000;
  735.   font-size: 13px;
  736.   font-weight: 600;
  737. }
  739. @media only screen and (max-width: 990px) {
  740.   .product-grid {
  741.     margin-bottom: 30px;
  742.   }
  743. }
  744. /********************* Shopping Demo-2 **********************/
  745. .demo {
  746.   padding: 45px 0;
  747. }
  749. .product-grid2 {
  750.   font-family: 'Open Sans',sans-serif;
  751.   position: relative;
  752. }
  753. .product-grid2 .product-image2 {
  754.   overflow: hidden;
  755.   position: relative;
  756. }
  757. .product-grid2 .product-image2 a {
  758.   display: block;
  759. }
  760. .product-grid2 .product-image2 img {
  761.   width: 100%;
  762.   height: auto;
  763. }
  765. .product-image2 .pic-1 {
  766.   opacity: 1;
  767.   -webkit-transition: all .5s;
  768.   transition: all .5s;
  769. }
  771. .product-grid2:hover .product-image2 .pic-1 {
  772.   opacity: 0;
  773. }
  775. .product-image2 .pic-2 {
  776.   width: 100%;
  777.   height: 100%;
  778.   opacity: 0;
  779.   position: absolute;
  780.   top: 0;
  781.   left: 0;
  782.   -webkit-transition: all .5s;
  783.   transition: all .5s;
  784. }
  786. .product-grid2:hover .product-image2 .pic-2 {
  787.   opacity: 1;
  788. }
  789. .product-grid2 .social {
  790.   padding: 0;
  791.   margin: 0;
  792.   position: absolute;
  793.   bottom: 50px;
  794.   right: 25px;
  795.   z-index: 1;
  796. }
  797. .product-grid2 .social li {
  798.   margin: 0 0 10px;
  799.   display: block;
  800.   -webkit-transform: translateX(100px);
  801.           transform: translateX(100px);
  802.   -webkit-transition: all .5s;
  803.   transition: all .5s;
  804. }
  805. .product-grid2:hover .social li {
  806.   -webkit-transform: translateX(0);
  807.           transform: translateX(0);
  808. }
  809. .product-grid2:hover .social li:nth-child(2) {
  810.   -webkit-transition-delay: .15s;
  811.           transition-delay: .15s;
  812. }
  813. .product-grid2:hover .social li:nth-child(3) {
  814.   -webkit-transition-delay: .25s;
  815.           transition-delay: .25s;
  816. }
  817. .product-grid2 .social li a {
  818.   color: #505050;
  819.   background-color: #fff;
  820.   font-size: 17px;
  821.   line-height: 45px;
  822.   text-align: center;
  823.   height: 45px;
  824.   width: 45px;
  825.   border-radius: 50%;
  826.   display: block;
  827.   -webkit-transition: all .3s ease 0s;
  828.   transition: all .3s ease 0s;
  829. }
  830. .product-grid2 .social li a:hover {
  831.   color: #fff;
  832.   background-color: #3498db;
  833.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  834. }
  835. .product-grid2 .social li a:after, .product-grid2 .social li a:before {
  836.   content: attr(data-tip);
  837.   color: #fff;
  838.   background-color: #000;
  839.   font-size: 12px;
  840.   line-height: 22px;
  841.   border-radius: 3px;
  842.   padding: 0 5px;
  843.   white-space: nowrap;
  844.   opacity: 0;
  845.   -webkit-transform: translateX(-50%);
  846.           transform: translateX(-50%);
  847.   position: absolute;
  848.   left: 50%;
  849.   top: -30px;
  850. }
  851. .product-grid2 .social li a:after {
  852.   content: '';
  853.   height: 15px;
  854.   width: 15px;
  855.   border-radius: 0;
  856.   -webkit-transform: translateX(-50%) rotate(45deg);
  857.           transform: translateX(-50%) rotate(45deg);
  858.   top: -22px;
  859.   z-index: -1;
  860. }
  861. .product-grid2 .social li a:hover:after, .product-grid2 .social li a:hover:before {
  862.   opacity: 1;
  863. }
  864. .product-grid2 .add-to-cart {
  865.   color: #fff;
  866.   background-color: #404040;
  867.   font-size: 15px;
  868.   text-align: center;
  869.   width: 100%;
  870.   padding: 10px 0;
  871.   display: block;
  872.   position: absolute;
  873.   left: 0;
  874.   bottom: -100%;
  875.   -webkit-transition: all .3s;
  876.   transition: all .3s;
  877. }
  878. .product-grid2 .add-to-cart:hover {
  879.   background-color: #3498db;
  880.   text-decoration: none;
  881. }
  882. .product-grid2:hover .add-to-cart {
  883.   bottom: 0;
  884. }
  885. .product-grid2 .product-new-label {
  886.   background-color: #3498db;
  887.   color: #fff;
  888.   font-size: 17px;
  889.   padding: 5px 10px;
  890.   position: absolute;
  891.   right: 0;
  892.   top: 0;
  893.   -webkit-transition: all .3s;
  894.   transition: all .3s;
  895. }
  896. .product-grid2:hover .product-new-label {
  897.   opacity: 0;
  898. }
  899. .product-grid2 .product-content {
  900.   padding: 20px 10px;
  901.   text-align: center;
  902. }
  903. .product-grid2 .title {
  904.   font-size: 17px;
  905.   margin: 0 0 7px;
  906. }
  907. .product-grid2 .title a {
  908.   color: #303030;
  909. }
  910. .product-grid2 .title a:hover {
  911.   color: #3498db;
  912. }
  913. .product-grid2 .price {
  914.   color: #303030;
  915.   font-size: 15px;
  916. }
  918. @media screen and (max-width: 990px) {
  919.   .product-grid2 {
  920.     margin-bottom: 30px;
  921.   }
  922. }
  923. /********************* Shopping Demo-3 **********************/
  924. .product-grid3 {
  925.   font-family: Roboto,sans-serif;
  926.   text-align: center;
  927.   position: relative;
  928.   z-index: 1;
  929. }
  930. .product-grid3:before {
  931.   content: "";
  932.   height: 81%;
  933.   width: 100%;
  934.   background: #fff;
  935.   border: 1px solid rgba(0, 0, 0, 0.1);
  936.   opacity: 0;
  937.   position: absolute;
  938.   top: 0;
  939.   left: 0;
  940.   z-index: -1;
  941.   -webkit-transition: all .5s ease 0s;
  942.   transition: all .5s ease 0s;
  943. }
  944. .product-grid3:hover:before {
  945.   opacity: 1;
  946.   height: 100%;
  947. }
  948. .product-grid3 .product-image3 {
  949.   position: relative;
  950. }
  951. .product-grid3 .product-image3 a {
  952.   display: block;
  953. }
  954. .product-grid3 .product-image3 img {
  955.   width: 100%;
  956.   height: auto;
  957. }
  958. .product-grid3 .pic-1 {
  959.   opacity: 1;
  960.   -webkit-transition: all .5s ease-out 0s;
  961.   transition: all .5s ease-out 0s;
  962. }
  963. .product-grid3:hover .pic-1 {
  964.   opacity: 0;
  965. }
  966. .product-grid3 .pic-2 {
  967.   position: absolute;
  968.   top: 0;
  969.   left: 0;
  970.   opacity: 0;
  971.   -webkit-transition: all .5s ease-out 0s;
  972.   transition: all .5s ease-out 0s;
  973. }
  974. .product-grid3:hover .pic-2 {
  975.   opacity: 1;
  976. }
  977. .product-grid3 .social {
  978.   width: 120px;
  979.   padding: 0;
  980.   margin: 0 auto;
  981.   list-style: none;
  982.   opacity: 0;
  983.   position: absolute;
  984.   right: 0;
  985.   left: 0;
  986.   bottom: -23px;
  987.   -webkit-transform: scale(0);
  988.           transform: scale(0);
  989.   -webkit-transition: all .3s ease 0s;
  990.   transition: all .3s ease 0s;
  991. }
  992. .product-grid3:hover .social {
  993.   opacity: 1;
  994.   -webkit-transform: scale(1);
  995.           transform: scale(1);
  996. }
  997. .product-grid3:hover .product-discount-label, .product-grid3:hover .product-new-label, .product-grid3:hover .title {
  998.   opacity: 0;
  999. }
  1000. .product-grid3 .social li {
  1001.   display: inline-block;
  1002. }
  1003. .product-grid3 .social li a {
  1004.   color: #e67e22;
  1005.   background: #fff;
  1006.   font-size: 18px;
  1007.   line-height: 50px;
  1008.   width: 50px;
  1009.   height: 50px;
  1010.   border: 1px solid rgba(0, 0, 0, 0.1);
  1011.   border-radius: 50%;
  1012.   margin: 0 2px;
  1013.   display: block;
  1014.   -webkit-transition: all .3s ease 0s;
  1015.   transition: all .3s ease 0s;
  1016. }
  1017. .product-grid3 .social li a:hover {
  1018.   background: #e67e22;
  1019.   color: #fff;
  1020. }
  1021. .product-grid3 .product-discount-label, .product-grid3 .product-new-label {
  1022.   background-color: #e67e22;
  1023.   color: #fff;
  1024.   font-size: 17px;
  1025.   padding: 2px 10px;
  1026.   position: absolute;
  1027.   right: 10px;
  1028.   top: 10px;
  1029.   -webkit-transition: all .3s;
  1030.   transition: all .3s;
  1031. }
  1032. .product-grid3 .product-content {
  1033.   z-index: -1;
  1034.   padding: 15px;
  1035.   text-align: left;
  1036. }
  1037. .product-grid3 .title {
  1038.   font-size: 14px;
  1039.   text-transform: capitalize;
  1040.   margin: 0 0 7px;
  1041.   -webkit-transition: all .3s ease 0s;
  1042.   transition: all .3s ease 0s;
  1043. }
  1044. .product-grid3 .title a {
  1045.   color: #414141;
  1046. }
  1047. .product-grid3 .price {
  1048.   color: #000;
  1049.   font-size: 16px;
  1050.   letter-spacing: 1px;
  1051.   font-weight: 600;
  1052.   margin-right: 2px;
  1053.   display: inline-block;
  1054. }
  1055. .product-grid3 .price span {
  1056.   color: #909090;
  1057.   font-size: 14px;
  1058.   font-weight: 500;
  1059.   letter-spacing: 0;
  1060.   text-decoration: line-through;
  1061.   text-align: left;
  1062.   display: inline-block;
  1063.   margin-top: -2px;
  1064. }
  1065. .product-grid3 .rating {
  1066.   padding: 0;
  1067.   margin: -22px 0 0;
  1068.   list-style: none;
  1069.   text-align: right;
  1070.   display: block;
  1071. }
  1072. .product-grid3 .rating li {
  1073.   color: #ffd200;
  1074.   font-size: 13px;
  1075.   display: inline-block;
  1076. }
  1077. .product-grid3 .rating li.disable {
  1078.   color: #dcdcdc;
  1079. }
  1081. @media only screen and (max-width: 1200px) {
  1082.   .product-grid3 .rating {
  1083.     margin: 0;
  1084.   }
  1085. }
  1086. @media only screen and (max-width: 990px) {
  1087.   .product-grid3 {
  1088.     margin-bottom: 30px;
  1089.   }
  1090.   .product-grid3 .rating {
  1091.     margin: -22px 0 0;
  1092.   }
  1093. }
  1094. @media only screen and (max-width: 359px) {
  1095.   .product-grid3 .rating {
  1096.     margin: 0;
  1097.   }
  1098. }
  1101. /********************* Shopping Demo-4 **********************/
  1102. .product-grid4 {
  1103.   position: relative;
  1104.   font-family: Poppins,sans-serif;
  1105.   text-align: center;
  1106.   border-radius: 5px;
  1107.   overflow: hidden;
  1108.   z-index: 1;
  1109.   -webkit-transition: all .3s ease 0s;
  1110.   transition: all .3s ease 0s;
  1111.   box-shadow:0 4px 10px -6px #0005;
  1112. }
  1113. .product-grid4 .product-image4 {
  1114.   position: relative;
  1115. }
  1116. .product-grid4:hover {
  1117.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  1118. }
  1119. .product-grid4 .product-image4 a {
  1120.   display: block;
  1121. }
  1122. .product-grid4 .product-image4 img {
  1123.   width: 100%;
  1124.   height: auto;
  1125. }
  1126. .product-grid4 .pic-1 {
  1127.   opacity: 1;
  1128.   -webkit-transition: all .5s ease-out 0s;
  1129.   transition: all .5s ease-out 0s;
  1130. }
  1131. .product-grid4:hover .pic-1 {
  1132.   opacity: 0;
  1133. }
  1134. .product-grid4 .pic-2 {
  1135.   position: absolute;
  1136.   top: 0;
  1137.   left: 0;
  1138.   opacity: 0;
  1139.   -webkit-transition: all .5s ease-out 0s;
  1140.   transition: all .5s ease-out 0s;
  1141. }
  1142. .product-grid4:hover .pic-2 {
  1143.   opacity: 1;
  1144. }
  1145. .product-grid4 .social {
  1146.   width: 180px;
  1147.   padding: 0;
  1148.   margin: 0 auto;
  1149.   list-style: none;
  1150.   position: absolute;
  1151.   right: 0;
  1152.   left: 0;
  1153.   top: 50%;
  1154.   -webkit-transform: translateY(-50%);
  1155.           transform: translateY(-50%);
  1156.   -webkit-transition: all .3s ease 0s;
  1157.   transition: all .3s ease 0s;
  1158. }
  1159. .product-grid4 .social li {
  1160.   display: inline-block;
  1161.   opacity: 0;
  1162.   -webkit-transition: all .7s;
  1163.   transition: all .7s;
  1164. }
  1165. .product-grid4 .social li:nth-child(1) {
  1166.   -webkit-transition-delay: .15s;
  1167.           transition-delay: .15s;
  1168. }
  1169. .product-grid4 .social li:nth-child(2) {
  1170.   -webkit-transition-delay: .3s;
  1171.           transition-delay: .3s;
  1172. }
  1173. .product-grid4 .social li:nth-child(3) {
  1174.   -webkit-transition-delay: .45s;
  1175.           transition-delay: .45s;
  1176. }
  1177. .product-grid4:hover .social li {
  1178.   opacity: 1;
  1179. }
  1180. .product-grid4 .social li a {
  1181.   color: #222;
  1182.   background: #fff;
  1183.   font-size: 17px;
  1184.   line-height: 36px;
  1185.   width: 40px;
  1186.   height: 36px;
  1187.   border-radius: 2px;
  1188.   margin: 0 5px;
  1189.   display: block;
  1190.   -webkit-transition: all .3s ease 0s;
  1191.   transition: all .3s ease 0s;
  1192. }
  1193. .product-grid4 .social li a:hover {
  1194.   color: #fff;
  1195.   background: #16a085;
  1196. }
  1197. .product-grid4 .social li a:after, .product-grid4 .social li a:before {
  1198.   content: attr(data-tip);
  1199.   color: #fff;
  1200.   background-color: #000;
  1201.   font-size: 12px;
  1202.   line-height: 20px;
  1203.   border-radius: 3px;
  1204.   padding: 0 5px;
  1205.   white-space: nowrap;
  1206.   opacity: 0;
  1207.   -webkit-transform: translateX(-50%);
  1208.           transform: translateX(-50%);
  1209.   position: absolute;
  1210.   left: 50%;
  1211.   top: -30px;
  1212. }
  1213. .product-grid4 .social li a:after {
  1214.   content: '';
  1215.   height: 15px;
  1216.   width: 15px;
  1217.   border-radius: 0;
  1218.   -webkit-transform: translateX(-50%) rotate(45deg);
  1219.           transform: translateX(-50%) rotate(45deg);
  1220.   top: -22px;
  1221.   z-index: -1;
  1222. }
  1223. .product-grid4 .social li a:hover:after, .product-grid4 .social li a:hover:before {
  1224.   opacity: 1;
  1225. }
  1226. .product-grid4 .product-discount-label, .product-grid4 .product-new-label {
  1227.   color: #fff;
  1228.   background-color: #16a085;
  1229.   font-size: 13px;
  1230.   font-weight: 800;
  1231.   text-transform: uppercase;
  1232.   line-height: 45px;
  1233.   height: 45px;
  1234.   width: 45px;
  1235.   border-radius: 50%;
  1236.   position: absolute;
  1237.   left: 10px;
  1238.   top: 15px;
  1239.   -webkit-transition: all .3s;
  1240.   transition: all .3s;
  1241. }
  1242. .product-grid4 .product-discount-label {
  1243.   left: auto;
  1244.   right: 10px;
  1245.   background-color: #d7292a;
  1246. }
  1247. .product-grid4:hover .product-new-label {
  1248.   opacity: 0;
  1249. }
  1250. .product-grid4 .product-content {
  1251.   padding: 25px;
  1252. }
  1253. .product-grid4 .title {
  1254.   font-size: 15px;
  1255.   font-weight: 400;
  1256.   text-transform: capitalize;
  1257.   margin: 0 0 7px;
  1258.   -webkit-transition: all .3s ease 0s;
  1259.   transition: all .3s ease 0s;
  1260. }
  1261. .product-grid4 .title a {
  1262.   color: #222;
  1263. }
  1264. .product-grid4 .title a:hover {
  1265.   color: #16a085;
  1266. }
  1267. .product-grid4 .price {
  1268.   color: #16a085;
  1269.   font-size: 17px;
  1270.   font-weight: 700;
  1271.   margin: 0 2px 15px 0;
  1272.   display: block;
  1273. }
  1274. .product-grid4 .price span {
  1275.   color: #909090;
  1276.   font-size: 13px;
  1277.   font-weight: 400;
  1278.   letter-spacing: 0;
  1279.   text-decoration: line-through;
  1280.   text-align: left;
  1281.   vertical-align: middle;
  1282.   display: inline-block;
  1283. }
  1284. .product-grid4 .add-to-cart {
  1285.   border: 1px solid #e5e5e5;
  1286.   display: inline-block;
  1287.   padding: 10px 20px;
  1288.   color: #888;
  1289.   font-weight: 600;
  1290.   font-size: 14px;
  1291.   border-radius: 4px;
  1292.   -webkit-transition: all .3s;
  1293.   transition: all .3s;
  1294. }
  1295. .product-grid4:hover .add-to-cart {
  1296.   border: 1px solid transparent;
  1297.   background: #16a085;
  1298.   color: #fff;
  1299. }
  1300. .product-grid4 .add-to-cart:hover {
  1301.   background-color: #505050;
  1302.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  1303. }
  1305. @media only screen and (max-width: 990px) {
  1306.   .product-grid4 {
  1307.     margin-bottom: 30px;
  1308.   }
  1309. }
  1310. /********************* Shopping Demo-5 **********************/
  1311. .product-image5 .pic-1, .product-image5 .pic-2 {
  1312.   -webkit-backface-visibility: hidden;
  1313.           backface-visibility: hidden;
  1314.   -webkit-transition: all .5s ease 0s;
  1315.   transition: all .5s ease 0s;
  1316. }
  1318. .product-grid5 {
  1319.   font-family: Poppins,sans-serif;
  1320.   position: relative;
  1321. }
  1322. .product-grid5 .product-image5 {
  1323.   overflow: hidden;
  1324.   position: relative;
  1325. }
  1326. .product-grid5 .product-image5 a {
  1327.   display: block;
  1328. }
  1329. .product-grid5 .product-image5 img {
  1330.   width: 100%;
  1331.   height: auto;
  1332. }
  1334. .product-image5 .pic-1 {
  1335.   opacity: 1;
  1336. }
  1338. .product-grid5:hover .product-image5 .pic-1 {
  1339.   opacity: 0;
  1340. }
  1342. .product-image5 .pic-2 {
  1343.   width: 100%;
  1344.   height: 100%;
  1345.   opacity: 0;
  1346.   position: absolute;
  1347.   top: 0;
  1348.   left: 0;
  1349. }
  1351. .product-grid5:hover .product-image5 .pic-2 {
  1352.   opacity: 1;
  1353. }
  1354. .product-grid5 .social {
  1355.   padding: 0;
  1356.   margin: 0;
  1357.   position: absolute;
  1358.   top: 10px;
  1359.   right: 10px;
  1360. }
  1361. .product-grid5 .social li {
  1362.   display: block;
  1363.   margin: 0 0 10px;
  1364.   -webkit-transition: all .5s;
  1365.   transition: all .5s;
  1366. }
  1367. .product-grid5 .social li:nth-child(2) {
  1368.   opacity: 0;
  1369.   -webkit-transform: translateY(-50px);
  1370.           transform: translateY(-50px);
  1371. }
  1372. .product-grid5:hover .social li:nth-child(2) {
  1373.   opacity: 1;
  1374.   -webkit-transform: translateY(0);
  1375.           transform: translateY(0);
  1376. }
  1377. .product-grid5 .social li:nth-child(3) {
  1378.   opacity: 0;
  1379.   -webkit-transform: translateY(-50px);
  1380.           transform: translateY(-50px);
  1381. }
  1382. .product-grid5:hover .social li:nth-child(3) {
  1383.   opacity: 1;
  1384.   -webkit-transform: translateY(0);
  1385.           transform: translateY(0);
  1386.   -webkit-transition-delay: .2s;
  1387.           transition-delay: .2s;
  1388. }
  1389. .product-grid5 .social li a {
  1390.   color: #888;
  1391.   background: #fff;
  1392.   font-size: 14px;
  1393.   text-align: center;
  1394.   line-height: 40px;
  1395.   height: 40px;
  1396.   width: 40px;
  1397.   border-radius: 50%;
  1398.   display: block;
  1399.   -webkit-transition: .5s ease 0s;
  1400.   transition: .5s ease 0s;
  1401. }
  1402. .product-grid5 .social li a:hover {
  1403.   color: #fff;
  1404.   background: #1e3799;
  1405. }
  1406. .product-grid5 .select-options {
  1407.   color: #777;
  1408.   background-color: #fff;
  1409.   font-size: 13px;
  1410.   font-weight: 400;
  1411.   text-align: center;
  1412.   text-transform: uppercase;
  1413.   padding: 15px 5px;
  1414.   margin: 0 auto;
  1415.   opacity: 0;
  1416.   display: block;
  1417.   position: absolute;
  1418.   width: 92%;
  1419.   left: 0;
  1420.   bottom: -100px;
  1421.   right: 0;
  1422.   -webkit-transition: .5s ease 0s;
  1423.   transition: .5s ease 0s;
  1424. }
  1425. .product-grid5 .select-options:hover {
  1426.   color: #fff;
  1427.   background-color: #1e3799;
  1428.   text-decoration: none;
  1429. }
  1430. .product-grid5:hover .select-options {
  1431.   opacity: 1;
  1432.   bottom: 10px;
  1433. }
  1434. .product-grid5 .product-content {
  1435.   padding: 20px 10px;
  1436. }
  1437. .product-grid5 .title {
  1438.   font-size: 15px;
  1439.   font-weight: 600;
  1440.   text-transform: capitalize;
  1441.   margin: 0 0 10px;
  1442.   -webkit-transition: all .3s ease 0s;
  1443.   transition: all .3s ease 0s;
  1444. }
  1445. .product-grid5 .title a {
  1446.   color: #222;
  1447. }
  1448. .product-grid5 .title a:hover {
  1449.   color: #1e3799;
  1450. }
  1451. .product-grid5 .price {
  1452.   color: #222;
  1453.   font-size: 13px;
  1454.   font-weight: 500;
  1455.   letter-spacing: 1px;
  1456. }
  1458. @media only screen and (max-width: 990px) {
  1459.   .product-grid5 {
  1460.     margin-bottom: 30px;
  1461.   }
  1462. }
  1463. /********************* Shopping Demo-6 **********************/
  1464. .product-grid6 {
  1465.   overflow: hidden;
  1466.   font-family: 'Open Sans',sans-serif;
  1467.   text-align: center;
  1468.   position: relative;
  1469.   -webkit-transition: all .5s ease 0s;
  1470.   transition: all .5s ease 0s;
  1471. }
  1472. .product-grid6 .product-image6 {
  1473.   overflow: hidden;
  1474. }
  1475. .product-grid6:hover {
  1476.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  1477. }
  1478. .product-grid6 .product-image6 a {
  1479.   display: block;
  1480. }
  1481. .product-grid6 .product-image6 img {
  1482.   width: 100%;
  1483.   height: auto;
  1484.   -webkit-transition: all .5s ease 0s;
  1485.   transition: all .5s ease 0s;
  1486. }
  1487. .product-grid6:hover .product-image6 img {
  1488.   -webkit-transform: scale(1.1);
  1489.           transform: scale(1.1);
  1490. }
  1491. .product-grid6 .product-content {
  1492.   padding: 12px 12px 15px;
  1493.   -webkit-transition: all .5s ease 0s;
  1494.   transition: all .5s ease 0s;
  1495. }
  1496. .product-grid6:hover .product-content {
  1497.   opacity: 0;
  1498. }
  1499. .product-grid6 .title {
  1500.   font-size: 20px;
  1501.   font-weight: 600;
  1502.   text-transform: capitalize;
  1503.   margin: 0 0 10px;
  1504.   -webkit-transition: all .3s ease 0s;
  1505.   transition: all .3s ease 0s;
  1506. }
  1507. .product-grid6 .title a {
  1508.   color: #000;
  1509. }
  1510. .product-grid6 .title a:hover {
  1511.   color: #2e86de;
  1512. }
  1513. .product-grid6 .price {
  1514.   font-size: 18px;
  1515.   font-weight: 600;
  1516.   color: #2e86de;
  1517. }
  1518. .product-grid6 .price span {
  1519.   color: #999;
  1520.   font-size: 15px;
  1521.   font-weight: 400;
  1522.   text-decoration: line-through;
  1523.   margin-left: 7px;
  1524.   display: inline-block;
  1525. }
  1526. .product-grid6 .social {
  1527.   background-color: #fff;
  1528.   width: 100%;
  1529.   padding: 0;
  1530.   margin: 0;
  1531.   list-style: none;
  1532.   opacity: 0;
  1533.   -webkit-transform: translateX(-50%);
  1534.           transform: translateX(-50%);
  1535.   position: absolute;
  1536.   bottom: -50%;
  1537.   left: 50%;
  1538.   z-index: 1;
  1539.   -webkit-transition: all .5s ease 0s;
  1540.   transition: all .5s ease 0s;
  1541. }
  1542. .product-grid6:hover .social {
  1543.   opacity: 1;
  1544.   bottom: 20px;
  1545. }
  1546. .product-grid6 .social li {
  1547.   display: inline-block;
  1548. }
  1549. .product-grid6 .social li a {
  1550.   color: #909090;
  1551.   font-size: 16px;
  1552.   line-height: 45px;
  1553.   text-align: center;
  1554.   height: 45px;
  1555.   width: 45px;
  1556.   margin: 0 7px;
  1557.   border: 1px solid #909090;
  1558.   border-radius: 50px;
  1559.   display: block;
  1560.   position: relative;
  1561.   -webkit-transition: all .3s ease-in-out;
  1562.   transition: all .3s ease-in-out;
  1563. }
  1564. .product-grid6 .social li a:hover {
  1565.   color: #fff;
  1566.   background-color: #2e86de;
  1567.   width: 80px;
  1568. }
  1569. .product-grid6 .social li a:after, .product-grid6 .social li a:before {
  1570.   content: attr(data-tip);
  1571.   color: #fff;
  1572.   background-color: #2e86de;
  1573.   font-size: 12px;
  1574.   letter-spacing: 1px;
  1575.   line-height: 20px;
  1576.   padding: 1px 5px;
  1577.   border-radius: 5px;
  1578.   white-space: nowrap;
  1579.   opacity: 0;
  1580.   -webkit-transform: translateX(-50%);
  1581.           transform: translateX(-50%);
  1582.   position: absolute;
  1583.   left: 50%;
  1584.   top: -30px;
  1585. }
  1586. .product-grid6 .social li a:after {
  1587.   content: '';
  1588.   height: 15px;
  1589.   width: 15px;
  1590.   border-radius: 0;
  1591.   -webkit-transform: translateX(-50%) rotate(45deg);
  1592.           transform: translateX(-50%) rotate(45deg);
  1593.   top: -20px;
  1594.   z-index: -1;
  1595. }
  1596. .product-grid6 .social li a:hover:after, .product-grid6 .social li a:hover:before {
  1597.   opacity: 1;
  1598. }
  1600. @media only screen and (max-width: 990px) {
  1601.   .product-grid6 {
  1602.     margin-bottom: 30px;
  1603.   }
  1604. }
  1605. /********************* Shopping Demo-7 **********************/
  1606. .product-grid7 {
  1607.   font-family: 'Roboto Slab',serif;
  1608.   position: relative;
  1609.   z-index: 1;
  1610. }
  1611. .product-grid7 .product-image7 {
  1612.   border: 1px solid rgba(0, 0, 0, 0.1);
  1613.   overflow: hidden;
  1614.   -webkit-perspective: 1500px;
  1615.           perspective: 1500px;
  1616.   position: relative;
  1617.   -webkit-transition: all .3s ease 0s;
  1618.   transition: all .3s ease 0s;
  1619. }
  1620. .product-grid7 .product-image7 a {
  1621.   display: block;
  1622. }
  1623. .product-grid7 .product-image7 img {
  1624.   width: 100%;
  1625.   height: auto;
  1626. }
  1627. .product-grid7 .pic-1 {
  1628.   opacity: 1;
  1629.   -webkit-transition: all .5s ease-out 0s;
  1630.   transition: all .5s ease-out 0s;
  1631. }
  1632. .product-grid7 .pic-2 {
  1633.   opacity: 0;
  1634.   -webkit-transform: rotateY(-90deg);
  1635.           transform: rotateY(-90deg);
  1636.   position: absolute;
  1637.   top: 0;
  1638.   left: 0;
  1639.   -webkit-transition: all .5s ease-out 0s;
  1640.   transition: all .5s ease-out 0s;
  1641. }
  1642. .product-grid7:hover .pic-2 {
  1643.   opacity: 1;
  1644.   -webkit-transform: rotateY(0);
  1645.           transform: rotateY(0);
  1646. }
  1647. .product-grid7 .social {
  1648.   padding: 0;
  1649.   margin: 0;
  1650.   list-style: none;
  1651.   position: absolute;
  1652.   bottom: 3px;
  1653.   left: -20%;
  1654.   z-index: 1;
  1655.   -webkit-transition: all .5s ease 0s;
  1656.   transition: all .5s ease 0s;
  1657. }
  1658. .product-grid7:hover .social {
  1659.   left: 17px;
  1660. }
  1661. .product-grid7 .social li a {
  1662.   color: #fff;
  1663.   background-color: #333;
  1664.   font-size: 16px;
  1665.   line-height: 40px;
  1666.   text-align: center;
  1667.   height: 40px;
  1668.   width: 40px;
  1669.   margin: 15px 0;
  1670.   border-radius: 50%;
  1671.   display: block;
  1672.   -webkit-transition: all .5s ease-in-out;
  1673.   transition: all .5s ease-in-out;
  1674. }
  1675. .product-grid7 .social li a:hover {
  1676.   color: #fff;
  1677.   background-color: #78e08f;
  1678. }
  1679. .product-grid7 .product-new-label {
  1680.   color: #fff;
  1681.   background-color: #333;
  1682.   padding: 5px 10px;
  1683.   border-radius: 5px;
  1684.   display: block;
  1685.   position: absolute;
  1686.   top: 10px;
  1687.   left: 10px;
  1688. }
  1689. .product-grid7 .product-content {
  1690.   text-align: center;
  1691.   padding: 20px 0 0;
  1692. }
  1693. .product-grid7 .title {
  1694.   font-size: 15px;
  1695.   font-weight: 600;
  1696.   text-transform: capitalize;
  1697.   margin: 0 0 10px;
  1698.   -webkit-transition: all .3s ease 0s;
  1699.   transition: all .3s ease 0s;
  1700. }
  1701. .product-grid7 .title a {
  1702.   color: #333;
  1703. }
  1704. .product-grid7 .title a:hover {
  1705.   color: #78e08f;
  1706. }
  1707. .product-grid7 .rating {
  1708.   color: #78e08f;
  1709.   font-size: 12px;
  1710.   padding: 0;
  1711.   margin: 0 0 10px;
  1712.   list-style: none;
  1713. }
  1714. .product-grid7 .price {
  1715.   color: #333;
  1716.   font-size: 20px;
  1717.   font-family: Lora,serif;
  1718.   font-weight: 700;
  1719.   margin-bottom: 8px;
  1720.   text-align: center;
  1721.   -webkit-transition: all .3s;
  1722.   transition: all .3s;
  1723. }
  1724. .product-grid7 .price span {
  1725.   color: #999;
  1726.   font-size: 14px;
  1727.   font-weight: 700;
  1728.   text-decoration: line-through;
  1729.   margin-left: 7px;
  1730.   display: inline-block;
  1731. }
  1733. @media only screen and (max-width: 990px) {
  1734.   .product-grid7 {
  1735.     margin-bottom: 30px;
  1736.   }
  1737. }
  1738. /********************* Shopping Demo-8 **********************/
  1739. .product-grid8 {
  1740.   font-family: Poppins,sans-serif;
  1741.   position: relative;
  1742.   z-index: 1;
  1743. }
  1744. .product-grid8 .product-image8 {
  1745.   border: 1px solid #e4e9ef;
  1746.   position: relative;
  1747.   -webkit-transition: all .3s ease 0s;
  1748.   transition: all .3s ease 0s;
  1749. }
  1750. .product-grid8:hover .product-image8 {
  1751.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  1752. }
  1753. .product-grid8 .product-image8 a {
  1754.   display: block;
  1755. }
  1756. .product-grid8 .product-image8 img {
  1757.   width: 100%;
  1758.   height: auto;
  1759. }
  1760. .product-grid8 .pic-1 {
  1761.   opacity: 1;
  1762.   -webkit-transition: all .5s ease-out 0s;
  1763.   transition: all .5s ease-out 0s;
  1764. }
  1765. .product-grid8:hover .pic-1 {
  1766.   opacity: 0;
  1767. }
  1768. .product-grid8 .pic-2 {
  1769.   opacity: 0;
  1770.   position: absolute;
  1771.   top: 0;
  1772.   left: 0;
  1773.   -webkit-transition: all .5s ease-out 0s;
  1774.   transition: all .5s ease-out 0s;
  1775. }
  1776. .product-grid8:hover .pic-2 {
  1777.   opacity: 1;
  1778. }
  1779. .product-grid8 .social {
  1780.   padding: 0;
  1781.   margin: 0;
  1782.   list-style: none;
  1783.   position: absolute;
  1784.   bottom: 13px;
  1785.   right: 13px;
  1786.   z-index: 1;
  1787. }
  1788. .product-grid8 .social li {
  1789.   opacity: 0;
  1790.   -webkit-transform: translateY(3px);
  1791.           transform: translateY(3px);
  1792.   -webkit-transition: all .5s ease 0s;
  1793.   transition: all .5s ease 0s;
  1794. }
  1795. .product-grid8:hover .social li {
  1796.   margin: 0 0 10px;
  1797.   opacity: 1;
  1798.   -webkit-transform: translateY(0);
  1799.           transform: translateY(0);
  1800. }
  1801. .product-grid8:hover .social li:nth-child(1) {
  1802.   -webkit-transition-delay: .1s;
  1803.           transition-delay: .1s;
  1804. }
  1805. .product-grid8:hover .social li:nth-child(2) {
  1806.   -webkit-transition-delay: .2s;
  1807.           transition-delay: .2s;
  1808. }
  1809. .product-grid8:hover .social li:nth-child(3) {
  1810.   -webkit-transition-delay: .4s;
  1811.           transition-delay: .4s;
  1812. }
  1813. .product-grid8 .social li a {
  1814.   color: grey;
  1815.   font-size: 17px;
  1816.   line-height: 40px;
  1817.   text-align: center;
  1818.   height: 40px;
  1819.   width: 40px;
  1820.   border: 1px solid grey;
  1821.   display: block;
  1822.   -webkit-transition: all .5s ease-in-out;
  1823.   transition: all .5s ease-in-out;
  1824. }
  1825. .product-grid8 .social li a:hover {
  1826.   color: #000;
  1827.   border-color: #000;
  1828. }
  1829. .product-grid8 .product-discount-label {
  1830.   display: block;
  1831.   padding: 4px 15px 4px 30px;
  1832.   color: #fff;
  1833.   background-color: #0081c2;
  1834.   position: absolute;
  1835.   top: 10px;
  1836.   right: 0;
  1837.   -webkit-clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
  1838.   clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
  1839. }
  1840. .product-grid8 .product-content {
  1841.   padding: 20px 0 0;
  1842. }
  1843. .product-grid8 .price {
  1844.   color: #000;
  1845.   font-size: 19px;
  1846.   font-weight: 400;
  1847.   margin-bottom: 8px;
  1848.   text-align: left;
  1849.   -webkit-transition: all .3s;
  1850.   transition: all .3s;
  1851. }
  1852. .product-grid8 .price span {
  1853.   color: #999;
  1854.   font-size: 14px;
  1855.   font-weight: 500;
  1856.   text-decoration: line-through;
  1857.   margin-left: 7px;
  1858.   display: inline-block;
  1859. }
  1860. .product-grid8 .product-shipping {
  1861.   color: rgba(0, 0, 0, 0.5);
  1862.   font-size: 15px;
  1863.   padding-left: 35px;
  1864.   margin: 0 0 15px;
  1865.   display: block;
  1866.   position: relative;
  1867. }
  1868. .product-grid8 .product-shipping:before {
  1869.   content: '';
  1870.   height: 1px;
  1871.   width: 25px;
  1872.   background-color: rgba(0, 0, 0, 0.5);
  1873.   -webkit-transform: translateY(-50%);
  1874.           transform: translateY(-50%);
  1875.   position: absolute;
  1876.   top: 50%;
  1877.   left: 0;
  1878. }
  1879. .product-grid8 .title {
  1880.   font-size: 16px;
  1881.   font-weight: 400;
  1882.   text-transform: capitalize;
  1883.   margin: 0 0 30px;
  1884.   -webkit-transition: all .3s ease 0s;
  1885.   transition: all .3s ease 0s;
  1886. }
  1887. .product-grid8 .title a {
  1888.   color: #000;
  1889. }
  1890. .product-grid8 .title a:hover {
  1891.   color: #0081c2;
  1892. }
  1893. .product-grid8 .all-deals {
  1894.   display: block;
  1895.   color: #fff;
  1896.   background-color: #2e353b;
  1897.   font-size: 15px;
  1898.   letter-spacing: 1px;
  1899.   text-align: center;
  1900.   text-transform: uppercase;
  1901.   padding: 22px 5px;
  1902.   -webkit-transition: all .5s ease 0s;
  1903.   transition: all .5s ease 0s;
  1904. }
  1905. .product-grid8 .all-deals .icon {
  1906.   margin-left: 7px;
  1907. }
  1908. .product-grid8 .all-deals:hover {
  1909.   background-color: #0081c2;
  1910. }
  1912. @media only screen and (max-width: 990px) {
  1913.   .product-grid8 {
  1914.     margin-bottom: 30px;
  1915.   }
  1916. }
  1917. /********************* Shopping Demo-9 **********************/
  1918. .product-grid9 {
  1919.   position: relative;
  1920.   font-family: Poppins,sans-serif;
  1921.   z-index: 1;
  1922. }
  1923. .product-grid9 .product-image9 {
  1924.   position: relative;
  1925. }
  1926. .product-grid9 .product-image9 a {
  1927.   display: block;
  1928. }
  1929. .product-grid9 .product-image9 img {
  1930.   width: 100%;
  1931.   height: auto;
  1932. }
  1933. .product-grid9 .pic-1 {
  1934.   opacity: 1;
  1935.   -webkit-transition: all .5s ease-out 0s;
  1936.   transition: all .5s ease-out 0s;
  1937. }
  1938. .product-grid9:hover .pic-1 {
  1939.   opacity: 0;
  1940. }
  1941. .product-grid9 .pic-2 {
  1942.   position: absolute;
  1943.   top: 0;
  1944.   left: 0;
  1945.   opacity: 0;
  1946.   -webkit-transition: all .5s ease-out 0s;
  1947.   transition: all .5s ease-out 0s;
  1948. }
  1949. .product-grid9:hover .pic-2 {
  1950.   opacity: 1;
  1951. }
  1952. .product-grid9 .product-full-view {
  1953.   color: #505050;
  1954.   background-color: #fff;
  1955.   font-size: 16px;
  1956.   height: 45px;
  1957.   width: 45px;
  1958.   padding: 18px;
  1959.   border-radius: 100px 0 0;
  1960.   display: block;
  1961.   opacity: 0;
  1962.   position: absolute;
  1963.   right: 0;
  1964.   bottom: 0;
  1965.   -webkit-transition: all .3s ease 0s;
  1966.   transition: all .3s ease 0s;
  1967. }
  1968. .product-grid9 .product-full-view:hover {
  1969.   color: #c0392b;
  1970. }
  1971. .product-grid9:hover .product-full-view {
  1972.   opacity: 1;
  1973. }
  1974. .product-grid9 .product-content {
  1975.   padding: 12px 12px 0;
  1976.   overflow: hidden;
  1977.   position: relative;
  1978. }
  1980. .product-content .rating {
  1981.   padding: 0;
  1982.   margin: 0 0 7px;
  1983.   list-style: none;
  1984. }
  1986. .product-grid9 .rating li {
  1987.   font-size: 12px;
  1988.   color: #ffd200;
  1989.   -webkit-transition: all .3s ease 0s;
  1990.   transition: all .3s ease 0s;
  1991. }
  1992. .product-grid9 .rating li.disable {
  1993.   color: rgba(0, 0, 0, 0.2);
  1994. }
  1995. .product-grid9 .title {
  1996.   font-size: 16px;
  1997.   font-weight: 400;
  1998.   text-transform: capitalize;
  1999.   margin: 0 0 3px;
  2000.   -webkit-transition: all .3s ease 0s;
  2001.   transition: all .3s ease 0s;
  2002. }
  2003. .product-grid9 .title a {
  2004.   color: rgba(0, 0, 0, 0.5);
  2005. }
  2006. .product-grid9 .title a:hover {
  2007.   color: #c0392b;
  2008. }
  2009. .product-grid9 .price {
  2010.   color: #000;
  2011.   font-size: 17px;
  2012.   margin: 0;
  2013.   display: block;
  2014.   -webkit-transition: all .5s ease 0s;
  2015.   transition: all .5s ease 0s;
  2016. }
  2017. .product-grid9:hover .price {
  2018.   opacity: 0;
  2019. }
  2020. .product-grid9 .add-to-cart {
  2021.   display: block;
  2022.   color: #c0392b;
  2023.   font-weight: 600;
  2024.   font-size: 14px;
  2025.   opacity: 0;
  2026.   position: absolute;
  2027.   left: 10px;
  2028.   bottom: -20px;
  2029.   -webkit-transition: all .5s ease 0s;
  2030.   transition: all .5s ease 0s;
  2031. }
  2032. .product-grid9:hover .add-to-cart {
  2033.   opacity: 1;
  2034.   bottom: 0;
  2035. }
  2037. @media only screen and (max-width: 990px) {
  2038.   .product-grid9 {
  2039.     margin-bottom: 30px;
  2040.   }
  2041. }
  2044. .dropdown-btn {
  2045.   position: relative;
  2046.   display: inline-block;
  2047.   z-index: 10;
  2048.   width: 100%; height: 100%; cursor: pointer;
  2049.   color: #333;
  2050.   padding-top: 3px;
  2051. }
  2053. .dropdown__menu {
  2054.   display: none;
  2055.   position: absolute;
  2056.   top: 100%;
  2057.   right: 0;
  2058.   min-width: 200px;
  2059.   background: #fff;
  2060.   margin-top: 10px;
  2061.   border: 1px solid #F4F5F7;
  2062.   border-radius: 4px;
  2063.   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  2064.   text-align: left!important;
  2065. }
  2066. .dropdown__menu--active {
  2067.   display: block;
  2068. }
  2069. .dropdown__option {
  2070.   display: block;
  2071.   padding: 10px 15px;
  2072.   text-decoration: none;
  2073.   color: #000;
  2074.   transition: all .2s ease-in-out;
  2075.   line-height: 13px;
  2076.   text-transform: capitalize;
  2077. }
  2078. .dropdown__option:hover {
  2079.   background: #F4F5F7;
  2080.   padding-left: 20px !important;
  2081. }
  2082. .dropdown__option:not(:last-child) {
  2083.   border-bottom: 1px solid #F4F5F7;
  2084. }
  2085. .product-discount-label{
  2086.   background: #f5f5f5!important; color: #333; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  2087.   transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  2088. }
  2091. .flex-container {
  2092.   display: flex;
  2093.   justify-content: center;
  2094.   flex-direction: column;
  2095.   align-items: center;
  2096. }
  2098. .flex-container > div {
  2099. padding-top:10px;
  2100. }
  2101. .paginate-ctn{
  2102.     display: flex;
  2103. }
  2104. .round-effect{
  2105.   color:#DD4124;
  2106.   cursor:pointer;
  2107.     /*   border:1px solid red; */
  2109.   font-size:16px;
  2110.   text-align:center;
  2111.   padding-left:10px;
  2112.   padding-right:10px;
  2113.   padding-top:9px;
  2114.   border-radius: 50%;
  2115.   height: 40px;
  2116.   width: 40px;
  2117.   margin:5px;
  2118.   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  2119.    text-decoration: none;
  2120. }
  2122. .round-effect:hover{
  2123.   text-decoration: none;
  2124.   background:#DD4124;
  2125.   color:#FFF;
  2126. }
  2127. .round-effect:hover a {
  2128.   text-decoration: none;
  2129.   color:#FFF;
  2130. }
  2132. .activepage{
  2133.   background:#DD4124;
  2134.   color:#FFF!important;
  2135. }
  2137. .header-wave {
  2138.   position: relative;
  2139.   min-height: 200px;
  2140.   background: transparent;
  2141.   background-image: linear-gradient(155deg, #f4f4f4 0%, #f4f4f4 50%, #f4f4f4 100%);
  2142. }
  2144. .header-wave h1 {
  2145.   color: white;
  2146. }
  2148. .svg-wave {
  2149.   position: absolute;
  2150.   bottom: 0;
  2151.   width: 100%;
  2152.   height: auto;
  2153. }
  2155. .section-wave{
  2156.     position: relative;
  2157.     margin: 0;
  2158.     padding: 0;
  2159.     background: white;
  2160.     width: 100%;
  2161.     height: 200px;
  2162. }
  2164. #worf{
  2165.     position: absolute;
  2166.     bottom: 0;
  2167.     width: 100%;
  2168.     z-index: 1;
  2169. }
  2171. #worf path{
  2172.   fill: url(#grad1)
  2173. }
  2175. section.section-2{
  2176.     width: 100%;
  2177.     height: 200px;
  2178.     background: linear-gradient(to right, #dffdgg 0%,#f2f2f2 100%);
  2179. }
  2183. #client-logos .item {
  2184.     margin: 1px;
  2185. }
  2186. .cover-wrapper {
  2187.     padding: 5px 0px;
  2188. }
  2189. .client-inners img {
  2190.     height: 100%;
  2191.     object-fit: contain;
  2192. }
  2193. .client-inners{
  2194.     border: 1px solid #ccc;
  2195.     height: 90px;
  2196.     text-align: center;
  2197.     padding: 0px;
  2198. }
  2199. .owl-nav img {
  2200.     width: 34px;
  2201. }
  2202. .owl-prev img {
  2203.     position: absolute;
  2204.     left: -38px;
  2205.     top: 40px;
  2206. }
  2207. .owl-next img {
  2208.     position: absolute;
  2209.     right: -38px;
  2210.     top: 40px;
  2211. }
  2212. .item-inner:hover{
  2213.     background: #f8f8f8;
  2214.     box-shadow: 0px 0px 3px 1px #333;
  2215. }
  2216. .theme-bg-light{
  2217. border: 1px  #CCC solid;
  2219. box-shadow:
  2220. inset 0px 11px 8px -10px #CCC,
  2221. inset 0px -11px 8px -10px #CCC;
  2222. }
  2224. .logo-partner .owl-stage-outer{
  2225.     max-height: 150px!important;
  2226. }
  2227. .item{
  2228.     border: none;
  2229.     min-height: 100px;
  2230. }
  2231. #client-logos .item{
  2232.     /*box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)!important;*/
  2233. }
  2234. .item:hover{
  2235.     background: #f7f7f7;
  2236. }
  2237. .owl-dots{
  2238.     display: none;
  2239. }
  2241. .info-popop-home{
  2242.     background: #d7d7d7; width: 25px; padding-top: 6px; color: #fff; height: 25px; border-radius: 50%;display: inline-block;
  2243. }
  2245. .go-corner {
  2246.   display: -webkit-box;
  2247.   display: flex;
  2248.   -webkit-box-align: center;
  2249.           align-items: center;
  2250.   -webkit-box-pack: center;
  2251.           justify-content: center;
  2252.   position: absolute;
  2253.   width: 32px;
  2254.   height: 32px;
  2255.   overflow: hidden;
  2256.   top: 0;
  2257.   right: 0;
  2258.   background-color: #00838d;
  2259.   border-radius: 0 4px 0 32px;
  2260. }
  2262. .go-arrow {
  2263.   margin-top: -4px;
  2264.   margin-right: -4px;
  2265.   color: white;
  2266.   font-family: courier, sans;
  2267. }
  2268. .card4 {
  2269.   display: block;
  2270.   top: 0px;
  2271.   position: relative;
  2272.   width: 100%!important;
  2273.   min-height: 200px;PPM
  2274.   background-color: #ffffff;
  2275.   border-radius: 4px;
  2276.   padding: 32px 24px;
  2277.   margin: 15px 0px 0px 0px;
  2278.   text-decoration: none;
  2279.   overflow: hidden;
  2280.   border: 1px solid #cccccc;
  2281.   box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075) !important;
  2282. }
  2283. .card4 .go-corner {
  2284.   background-color: #00838d;
  2285.   height: 100%;
  2286.   width: 16px;
  2287.   padding-right: 9px;
  2288.   border-radius: 0;
  2289.   -webkit-transform: skew(6deg);
  2290.           transform: skew(6deg);
  2291.   margin-right: -36px;
  2292.   -webkit-box-align: start;
  2293.           align-items: start;
  2294.   background-image: linear-gradient(-45deg, #8F479A 1%, #DC2A74 100%);
  2295. }
  2296. .card4 .go-arrow {
  2297.   -webkit-transform: skew(-6deg);
  2298.           transform: skew(-6deg);
  2299.   margin-left: -2px;
  2300.   margin-top: 9px;
  2301.   opacity: 0;
  2302. }
  2303. .card4:hover {
  2304.   border: 1px solid #CD3D73;
  2305. }
  2306. .card4 h3 {
  2307.   margin-top: 8px;
  2308. }
  2310. .card4:hover .go-corner {
  2311.   margin-right: -12px;
  2312. }
  2313. .card4:hover .go-arrow {
  2314.   opacity: 1;
  2315. }
  2316. .divider{
  2317.     border-top: 2px dashed #999;
  2318. }
  2320. .basis-member.staff {
  2322. }
  2324. .basis-member.staff .member-box {
  2325.     position: relative;
  2326.     border-radius: 5px;
  2327.     overflow: hidden;
  2328.     margin-bottom: 30px;
  2329. }
  2331. .basis-member.staff .member-box .card-body {
  2332.     position: relative;
  2333.     height: 150px
  2334. }
  2336. .shadow-lg:hover{
  2337.     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  2338.   transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  2339. }
  2341. .basis-member.staff .member-box .shape {
  2342.     width: 200px;
  2343.     height: 200px;
  2344.     background: var(--primary);
  2345.     opacity: 0.2;
  2346.     position: absolute;
  2347.     top: 0;
  2348.     right: -100px;
  2349.     transform: rotate(45deg);
  2350. }
  2352. .basis-member.staff .member-box .card-img-top {
  2353.     position: relative;
  2354.     width: 150px;
  2355.     height: 150px;
  2356.     border-radius: 50%;
  2357.     border-top-left-radius: 0;
  2358.     border-bottom: 5px solid var(--primary);
  2359. }
  2361. .basis-member.staff .member-box .member-title {
  2362.     font-size: 20px;
  2363.     font-weight: 600;
  2364.     letter-spacing: -0.025em;
  2365. }
  2367. .header.shop .list-main span {
  2368.     display: inline-block;
  2369.     color: #333;
  2370.     font-size: 13px;
  2371.     font-weight: 500;
  2372.     border-right: 1px solid #f0f0f0;
  2373.     padding: 0px 13px;
  2374. }
  2375. .header.shop .list-main span i {
  2376.     display: inline-block;
  2377.     margin-right: 4px;
  2378.     font-size: 15px;
  2379.     color: #F7941D;
  2380.     position: relative;
  2381.     top: 1px;
  2382. }
  2383. .header.shop .list-main span:last-child{
  2384.     padding-right:0;
  2385.     border:none;
  2386. }
  2387. .header.shop .list-main span a{
  2388.     color:#333;
  2389. }
  2390. .header.shop .list-main span a:hover{
  2391.     color:#F7941D;
  2392. }
  2394. .feature_box_col_one{
  2395.     display: inline-block;
  2396.     text-decoration: none;
  2397.     color: inherit;
  2398. }
  2400. .cardop-item {
  2401.     background: #fff;
  2402.     text-align: center;
  2403.     padding: 30px 25px;
  2404.     -webkit-box-shadow:0 0px 25px rgba(0, 0, 0, 0.07);
  2405.     box-shadow:0 0px 25px rgba(0, 0, 0, 0.07);
  2406.     border-radius: 0px;
  2407.     margin-bottom: 30px;
  2408.     -webkit-transition: all .5s ease 0;
  2409.     transition: all .5s ease 0;
  2410.     transition: all 0.5s ease 0s;
  2411.     display: block;
  2412. }
  2413. .cardop-item:hover{
  2414.     background:#fff;
  2415.     box-shadow:0 8px 20px 0px rgba(0, 0, 0, 0.2);
  2416.     -webkit-transition: all .5s ease 0;
  2417.     transition: all .5s ease 0;
  2418.     transition: all 0.5s ease 0s;
  2419.     cursor: pointer;
  2420.     display: block;
  2421. }
  2422. .cardop-item:hover .cardop-item, .cardop-item:hover span.icon{
  2423.     background: #f4f4f4;
  2424.     border-radius:10px;
  2425.     -webkit-transition: all .5s ease 0;
  2426.     transition: all .5s ease 0;
  2427.     transition: all 0.5s ease 0s;
  2428. }
  2429. .cardop-item:hover h6, .cardop-item:hover p{
  2430.     color:#333;
  2431.     -webkit-transition: all .5s ease 0;
  2432.     transition: all .5s ease 0;
  2433.     transition: all 0.5s ease 0s;
  2434. }
  2435. .logo:hover span.icon{
  2436.     background: green;
  2437.     border-radius:10px;
  2438.     -webkit-transition: all .5s ease 0;
  2439.     transition: all .5s ease 0;
  2440.     transition: all 0.5s ease 0s;
  2441.     color: #fff;
  2442. }
  2443. .logo .icon{
  2444.     font-size: 40px;
  2445.     color: #f91942;
  2446.     width: 70px;
  2447.     height: 70px;
  2448.     padding-top: 15px;
  2449.     border-radius: 50%;
  2450.     background: #f4f4f4;
  2451. }
  2453. .cardop-item .icon{
  2454.     font-size: 40px;
  2455.     margin-bottom:25px;
  2456.     color: #f91942;
  2457.     width: 90px;
  2458.     height: 90px;
  2459.     line-height: 96px;
  2460.     border-radius: 50px;
  2461. }
  2463. .cardop-item .feature_box_col_one{
  2464.     background:rgba(247, 198, 5, 0.20);
  2465.     color: #3565ae;
  2466. }
  2467. .cardop-item h6{
  2468.     font-weight: bold;
  2469.     margin-bottom: 7px;
  2470. }
  2472. .menucell {
  2473.     width: 100%;
  2474. }
  2475. .menu-container {
  2476.   margin: 0 auto;
  2477.   background: #3565ae;
  2478. }
  2479. .menucell a.logo {
  2480.     display: inline-block;
  2481.     padding: 1.5em 3em;
  2482.     width: 19%;
  2483.     float: left;
  2484. }
  2485. .menucell img {
  2486.     max-width: 100%;
  2487. }
  2488. .menu-mobile {
  2489.   display: none;
  2490.   padding: 20px;
  2491. }
  2492. .menu-mobile:after {
  2493.   content: "\f394";
  2494.   font-family: "Ionicons";
  2495.   font-size: 2.5rem;
  2496.   padding: 0;
  2497.   float: right;
  2498.   position: relative;
  2499.   top: 50%;
  2500.   -webkit-transform: translateY(-25%);
  2501.           transform: translateY(-25%);
  2502. }
  2503. .menu-dropdown-icon:before {
  2504.   content: "\f489";
  2505.   font-family: "Ionicons";
  2506.   display: none;
  2507.   cursor: pointer;
  2508.   float: right;
  2509.   padding: 1.5em 2em;
  2510.   background: #fff;
  2511.   color: #333;
  2512. }
  2513. .menucell > ul {
  2514.   margin: 0 auto;
  2515.   width: 100%;
  2516.   list-style: none;
  2517.   padding: 0;
  2518.   position: relative;
  2519.   /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
  2521. }
  2522. .menucell > ul:before,
  2523. .menucell > ul:after {
  2524.   content: "";
  2525.   display: table;
  2526. }
  2527. .menucell > ul:after {
  2528.   clear: both;
  2529. }
  2530. .menucell > ul > li {
  2531.   border-right: 1px solid #fff;
  2532.   background: #fff;
  2533.   padding: 0;
  2534.   margin: 0;
  2535. }
  2536. .menucell > ul > li a {
  2537.   text-decoration: none;
  2538.   display: block;
  2539.   padding: 7px 2px;
  2540. }
  2541. .menucell > ul > li:hover {
  2542.   background: #fff;
  2543.   text-align: left;
  2544.   border-right: 1px solid #ddd;
  2545. }
  2546. .menucell > ul > li > ul {
  2547.   display: none;
  2548.   width: 100%;
  2549.   background: #fff;
  2550.   padding: 20px;
  2551.   position: absolute;
  2552.   z-index: 99;
  2553.   right: 0;
  2554.   margin: 0;
  2555.   list-style: none;
  2556.   box-sizing: border-box;
  2557.   box-shadow: 0 4px 4px rgba(0,0,0,0.4);
  2558. }
  2559. .menucell > ul > li > ul:before,
  2560. .menucell > ul > li > ul:after {
  2561.   content: "";
  2562.   display: table;
  2563. }
  2564. .menucell > ul > li > ul:after {
  2565.   clear: both;
  2566. }
  2567. .menucell > ul > li > ul > li {
  2568.   margin: 0;
  2569.   padding-bottom: 0;
  2570.   list-style: none;
  2571.   width: 25%;
  2572.   background: none;
  2573.   float: left;
  2574. }
  2575. .menucell > ul > li > ul > li a {
  2576.   color: #777;
  2577.   padding: .2em 0;
  2578.   width: 95%;
  2579.   display: block;
  2580.   border-bottom: 1px solid #ccc;
  2581. }
  2582. .menucell > ul > li > ul > li a:hover{
  2583.     color:#03a9f4;
  2584. }
  2585. .menucell > ul > li > ul > li > ul {
  2586.   display: block;
  2587.   padding: 0;
  2588.   margin: 10px 0 0;
  2589.   list-style: none;
  2590.   box-sizing: border-box;
  2591. }
  2592. .menucell > ul > li > ul > li > ul:before,
  2593. .menucell > ul > li > ul > li > ul:after {
  2594.   content: "";
  2595.   display: table;
  2596. }
  2597. .menucell > ul > li > ul > li > ul:after {
  2598.   clear: both;
  2599. }
  2600. .menucell > ul > li > ul > li > ul > li {
  2601.   float: left;
  2602.   width: 100%;
  2603.   padding: 10px 0;
  2604.   margin: 0;
  2605.   font-size: .8em;
  2606. }
  2607. .menucell > ul > li > ul > li > ul > li a {
  2608.   border: 0;
  2609.   font-size: 14px;
  2610. }
  2611. .menucell > ul > li > ul.normal-sub {
  2612.   width: 300px;
  2613.   left: auto;
  2614.   padding: 10px 20px;
  2615. }
  2616. .menucell > ul > li > ul.normal-sub > li {
  2617.   width: 100%;
  2618. }
  2619. .menucell > ul > li > ul.normal-sub > li a {
  2620.   border: 0;
  2621.   padding: 1em 0;
  2622. }
  2624. .menucell > ul > li a{
  2625.     color: #333;
  2626. }
  2627. .menucell > ul > li a:hover{
  2628.     color: #777;
  2629. }
  2631. .menucell ul li{
  2632. margin-top: 0px!important;
  2633. }
  2636. #demo {
  2637.   margin: 20px auto;
  2638.   max-width: 960px;
  2639. }
  2640. #demo h1 {
  2641.   font-size: 2.4rem;
  2642.   line-height: 3.2rem;
  2643.   letter-spacing: 0;
  2644.   font-weight: 300;
  2645.   color: #212121;
  2646.   text-transform: inherit;
  2647.   margin-bottom: 1rem;
  2648.   text-align: center;
  2649. }
  2650. #demo h2 {
  2651.   font-size: 1.5rem;
  2652.   line-height: 2.8rem;
  2653.   letter-spacing: 0.01rem;
  2654.   font-weight: 400;
  2655.   color: #212121;
  2656.   text-align: center;
  2657. }
  2658. .shadow-z-1 {
  2659.   -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
  2660.   -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
  2661.   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  2662. }
  2663. /* -- Material Design Table style -------------- */
  2664. .table {
  2665.   width: 100%;
  2666.   max-width: 100%;
  2667.   margin-bottom: 2rem;
  2668.   background-color: #fff;
  2669. }
  2670. .table > thead > tr,
  2671. .table > tbody > tr,
  2672. .table > tfoot > tr {
  2673.   -webkit-transition: all 0.3s ease;
  2674.   -o-transition: all 0.3s ease;
  2675.   transition: all 0.3s ease;
  2676. }
  2677. .table > thead > tr > th,
  2678. .table > tbody > tr > th,
  2679. .table > tfoot > tr > th,
  2680. .table > thead > tr > td,
  2681. .table > tbody > tr > td,
  2682. .table > tfoot > tr > td {
  2683.   text-align: left;
  2684.   padding: 1.6rem;
  2685.   vertical-align: top;
  2686.   border-top: 0;
  2687.   -webkit-transition: all 0.3s ease;
  2688.   -o-transition: all 0.3s ease;
  2689.   transition: all 0.3s ease;
  2690. }
  2691. .table > thead > tr > th {
  2692.   font-weight: 400;
  2693.   color: #757575;
  2694.   vertical-align: bottom;
  2695.   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  2696. }
  2697. .table > caption + thead > tr:first-child > th,
  2698. .table > colgroup + thead > tr:first-child > th,
  2699. .table > thead:first-child > tr:first-child > th,
  2700. .table > caption + thead > tr:first-child > td,
  2701. .table > colgroup + thead > tr:first-child > td,
  2702. .table > thead:first-child > tr:first-child > td {
  2703.   border-top: 0;
  2704. }
  2705. .table > tbody + tbody {
  2706.   border-top: 1px solid rgba(0, 0, 0, 0.12);
  2707. }
  2708. .table .table {
  2709.   background-color: #fff;
  2710. }
  2711. .table .no-border {
  2712.   border: 0;
  2713. }
  2714. .table-condensed > thead > tr > th,
  2715. .table-condensed > tbody > tr > th,
  2716. .table-condensed > tfoot > tr > th,
  2717. .table-condensed > thead > tr > td,
  2718. .table-condensed > tbody > tr > td,
  2719. .table-condensed > tfoot > tr > td {
  2720.   padding: 0.8rem;
  2721. }
  2722. .table-bordered {
  2723.   border: 0;
  2724. }
  2725. .table-bordered > thead > tr > th,
  2726. .table-bordered > tbody > tr > th,
  2727. .table-bordered > tfoot > tr > th,
  2728. .table-bordered > thead > tr > td,
  2729. .table-bordered > tbody > tr > td,
  2730. .table-bordered > tfoot > tr > td {
  2731.   border: 0;
  2732.   border-bottom: 1px solid #e0e0e0;
  2733. }
  2734. .table-bordered > thead > tr > th,
  2735. .table-bordered > thead > tr > td {
  2736.   border-bottom-width: 2px;
  2737. }
  2738. .table-striped > tbody > tr:nth-child(odd) > td,
  2739. .table-striped > tbody > tr:nth-child(odd) > th {
  2740.   background-color: #f5f5f5;
  2741. }
  2742. .table-hover > tbody > tr:hover > td,
  2743. .table-hover > tbody > tr:hover > th {
  2744.   background-color: rgba(0, 0, 0, 0.12);
  2745. }
  2746. @media screen and (max-width: 768px) {
  2747.   .table-responsive-vertical > .table {
  2748.     margin-bottom: 0;
  2749.     background-color: transparent;
  2750.   }
  2751.   .table-responsive-vertical > .table > thead,
  2752.   .table-responsive-vertical > .table > tfoot {
  2753.     display: none;
  2754.   }
  2755.   .table-responsive-vertical > .table > tbody {
  2756.     display: block;
  2757.   }
  2758.   .table-responsive-vertical > .table > tbody > tr {
  2759.     display: block;
  2760.     border: 1px solid #e0e0e0;
  2761.     border-radius: 2px;
  2762.     margin-bottom: 1.6rem;
  2763.   }
  2764.   .table-responsive-vertical > .table > tbody > tr > td {
  2765.     background-color: #fff;
  2766.     display: block;
  2767.     vertical-align: middle;
  2768.     text-align: right;
  2769.   }
  2770.   .table-responsive-vertical > .table > tbody > tr > td[data-title]:before {
  2771.     content: attr(data-title);
  2772.     float: left;
  2773.     font-size: inherit;
  2774.     font-weight: 400;
  2775.     color: #757575;
  2776.   }
  2777.   .table-responsive-vertical.shadow-z-1 {
  2778.     -webkit-box-shadow: none;
  2779.     -moz-box-shadow: none;
  2780.     box-shadow: none;
  2781.   }
  2782.   .table-responsive-vertical.shadow-z-1 > .table > tbody > tr {
  2783.     border: none;
  2784.     -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  2785.     -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  2786.     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  2787.   }
  2788.   .table-responsive-vertical > .table-bordered {
  2789.     border: 0;
  2790.   }
  2791.   .table-responsive-vertical > .table-bordered > tbody > tr > td {
  2792.     border: 0;
  2793.     border-bottom: 1px solid #e0e0e0;
  2794.   }
  2795.   .table-responsive-vertical > .table-bordered > tbody > tr > td:last-child {
  2796.     border-bottom: 0;
  2797.   }
  2798.   .table-responsive-vertical > .table-striped > tbody > tr > td,
  2799.   .table-responsive-vertical > .table-striped > tbody > tr:nth-child(odd) {
  2800.     background-color: #fff;
  2801.   }
  2802.   .table-responsive-vertical > .table-striped > tbody > tr > td:nth-child(odd) {
  2803.     background-color: #f5f5f5;
  2804.   }
  2805.   .table-responsive-vertical > .table-hover > tbody > tr:hover > td,
  2806.   .table-responsive-vertical > .table-hover > tbody > tr:hover {
  2807.     background-color: #fff;
  2808.   }
  2809.   .table-responsive-vertical > .table-hover > tbody > tr > td:hover {
  2810.     background-color: rgba(0, 0, 0, 0.12);
  2811.   }
  2812. }
  2813. .table-striped.table-mc-red > tbody > tr:nth-child(odd) > td,
  2814. .table-striped.table-mc-red > tbody > tr:nth-child(odd) > th {
  2815.   background-color: #fde0dc;
  2816. }
  2817. .table-hover.table-mc-red > tbody > tr:hover > td,
  2818. .table-hover.table-mc-red > tbody > tr:hover > th {
  2819.   background-color: #f9bdbb;
  2820. }
  2821. @media screen and (max-width: 767px) {
  2822.   .table-responsive-vertical .table-striped.table-mc-red > tbody > tr > td,
  2823.   .table-responsive-vertical .table-striped.table-mc-red > tbody > tr:nth-child(odd) {
  2824.     background-color: #fff;
  2825.   }
  2826.   .table-responsive-vertical .table-striped.table-mc-red > tbody > tr > td:nth-child(odd) {
  2827.     background-color: #fde0dc;
  2828.   }
  2829.   .table-responsive-vertical .table-hover.table-mc-red > tbody > tr:hover > td,
  2830.   .table-responsive-vertical .table-hover.table-mc-red > tbody > tr:hover {
  2831.     background-color: #fff;
  2832.   }
  2833.   .table-responsive-vertical .table-hover.table-mc-red > tbody > tr > td:hover {
  2834.     background-color: #f9bdbb;
  2835.   }
  2836. }
  2837. .table-striped.table-mc-pink > tbody > tr:nth-child(odd) > td,
  2838. .table-striped.table-mc-pink > tbody > tr:nth-child(odd) > th {
  2839.   background-color: #fce4ec;
  2840. }
  2841. .table-hover.table-mc-pink > tbody > tr:hover > td,
  2842. .table-hover.table-mc-pink > tbody > tr:hover > th {
  2843.   background-color: #f8bbd0;
  2844. }
  2845. @media screen and (max-width: 767px) {
  2846.   .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr > td,
  2847.   .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr:nth-child(odd) {
  2848.     background-color: #fff;
  2849.   }
  2850.   .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr > td:nth-child(odd) {
  2851.     background-color: #fce4ec;
  2852.   }
  2853.   .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr:hover > td,
  2854.   .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr:hover {
  2855.     background-color: #fff;
  2856.   }
  2857.   .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr > td:hover {
  2858.     background-color: #f8bbd0;
  2859.   }
  2860. }
  2861. .table-striped.table-mc-purple > tbody > tr:nth-child(odd) > td,
  2862. .table-striped.table-mc-purple > tbody > tr:nth-child(odd) > th {
  2863.   background-color: #f3e5f5;
  2864. }
  2865. .table-hover.table-mc-purple > tbody > tr:hover > td,
  2866. .table-hover.table-mc-purple > tbody > tr:hover > th {
  2867.   background-color: #e1bee7;
  2868. }
  2869. @media screen and (max-width: 767px) {
  2870.   .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr > td,
  2871.   .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr:nth-child(odd) {
  2872.     background-color: #fff;
  2873.   }
  2874.   .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr > td:nth-child(odd) {
  2875.     background-color: #f3e5f5;
  2876.   }
  2877.   .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr:hover > td,
  2878.   .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr:hover {
  2879.     background-color: #fff;
  2880.   }
  2881.   .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr > td:hover {
  2882.     background-color: #e1bee7;
  2883.   }
  2884. }
  2885. .table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) > td,
  2886. .table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) > th {
  2887.   background-color: #ede7f6;
  2888. }
  2889. .table-hover.table-mc-deep-purple > tbody > tr:hover > td,
  2890. .table-hover.table-mc-deep-purple > tbody > tr:hover > th {
  2891.   background-color: #d1c4e9;
  2892. }
  2893. @media screen and (max-width: 767px) {
  2894.   .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr > td,
  2895.   .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) {
  2896.     background-color: #fff;
  2897.   }
  2898.   .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr > td:nth-child(odd) {
  2899.     background-color: #ede7f6;
  2900.   }
  2901.   .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr:hover > td,
  2902.   .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr:hover {
  2903.     background-color: #fff;
  2904.   }
  2905.   .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr > td:hover {
  2906.     background-color: #d1c4e9;
  2907.   }
  2908. }
  2909. .table-striped.table-mc-indigo > tbody > tr:nth-child(odd) > td,
  2910. .table-striped.table-mc-indigo > tbody > tr:nth-child(odd) > th {
  2911.   background-color: #e8eaf6;
  2912. }
  2913. .table-hover.table-mc-indigo > tbody > tr:hover > td,
  2914. .table-hover.table-mc-indigo > tbody > tr:hover > th {
  2915.   background-color: #c5cae9;
  2916. }
  2917. @media screen and (max-width: 767px) {
  2918.   .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr > td,
  2919.   .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr:nth-child(odd) {
  2920.     background-color: #fff;
  2921.   }
  2922.   .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr > td:nth-child(odd) {
  2923.     background-color: #e8eaf6;
  2924.   }
  2925.   .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr:hover > td,
  2926.   .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr:hover {
  2927.     background-color: #fff;
  2928.   }
  2929.   .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr > td:hover {
  2930.     background-color: #c5cae9;
  2931.   }
  2932. }
  2933. .table-striped.table-mc-blue > tbody > tr:nth-child(odd) > td,
  2934. .table-striped.table-mc-blue > tbody > tr:nth-child(odd) > th {
  2935.   background-color: #e7e9fd;
  2936. }
  2937. .table-hover.table-mc-blue > tbody > tr:hover > td,
  2938. .table-hover.table-mc-blue > tbody > tr:hover > th {
  2939.   background-color: #d0d9ff;
  2940. }
  2941. @media screen and (max-width: 767px) {
  2942.   .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr > td,
  2943.   .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr:nth-child(odd) {
  2944.     background-color: #fff;
  2945.   }
  2946.   .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr > td:nth-child(odd) {
  2947.     background-color: #e7e9fd;
  2948.   }
  2949.   .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr:hover > td,
  2950.   .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr:hover {
  2951.     background-color: #fff;
  2952.   }
  2953.   .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr > td:hover {
  2954.     background-color: #d0d9ff;
  2955.   }
  2956. }
  2957. .table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) > td,
  2958. .table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) > th {
  2959.   background-color: #e1f5fe;
  2960. }
  2961. .table-hover.table-mc-light-blue > tbody > tr:hover > td,
  2962. .table-hover.table-mc-light-blue > tbody > tr:hover > th {
  2963.   background-color: #b3e5fc;
  2964. }
  2965. @media screen and (max-width: 767px) {
  2966.   .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr > td,
  2967.   .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) {
  2968.     background-color: #fff;
  2969.   }
  2970.   .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr > td:nth-child(odd) {
  2971.     background-color: #e1f5fe;
  2972.   }
  2973.   .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr:hover > td,
  2974.   .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr:hover {
  2975.     background-color: #fff;
  2976.   }
  2977.   .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr > td:hover {
  2978.     background-color: #b3e5fc;
  2979.   }
  2980. }
  2981. .table-striped.table-mc-cyan > tbody > tr:nth-child(odd) > td,
  2982. .table-striped.table-mc-cyan > tbody > tr:nth-child(odd) > th {
  2983.   background-color: #e0f7fa;
  2984. }
  2985. .table-hover.table-mc-cyan > tbody > tr:hover > td,
  2986. .table-hover.table-mc-cyan > tbody > tr:hover > th {
  2987.   background-color: #b2ebf2;
  2988. }
  2989. @media screen and (max-width: 767px) {
  2990.   .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr > td,
  2991.   .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr:nth-child(odd) {
  2992.     background-color: #fff;
  2993.   }
  2994.   .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr > td:nth-child(odd) {
  2995.     background-color: #e0f7fa;
  2996.   }
  2997.   .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr:hover > td,
  2998.   .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr:hover {
  2999.     background-color: #fff;
  3000.   }
  3001.   .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr > td:hover {
  3002.     background-color: #b2ebf2;
  3003.   }
  3004. }
  3005. .table-striped.table-mc-teal > tbody > tr:nth-child(odd) > td,
  3006. .table-striped.table-mc-teal > tbody > tr:nth-child(odd) > th {
  3007.   background-color: #e0f2f1;
  3008. }
  3009. .table-hover.table-mc-teal > tbody > tr:hover > td,
  3010. .table-hover.table-mc-teal > tbody > tr:hover > th {
  3011.   background-color: #b2dfdb;
  3012. }
  3013. @media screen and (max-width: 767px) {
  3014.   .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr > td,
  3015.   .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr:nth-child(odd) {
  3016.     background-color: #fff;
  3017.   }
  3018.   .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr > td:nth-child(odd) {
  3019.     background-color: #e0f2f1;
  3020.   }
  3021.   .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr:hover > td,
  3022.   .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr:hover {
  3023.     background-color: #fff;
  3024.   }
  3025.   .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr > td:hover {
  3026.     background-color: #b2dfdb;
  3027.   }
  3028. }
  3029. .table-striped.table-mc-green > tbody > tr:nth-child(odd) > td,
  3030. .table-striped.table-mc-green > tbody > tr:nth-child(odd) > th {
  3031.   background-color: #d0f8ce;
  3032. }
  3033. .table-hover.table-mc-green > tbody > tr:hover > td,
  3034. .table-hover.table-mc-green > tbody > tr:hover > th {
  3035.   background-color: #a3e9a4;
  3036. }
  3037. @media screen and (max-width: 767px) {
  3038.   .table-responsive-vertical .table-striped.table-mc-green > tbody > tr > td,
  3039.   .table-responsive-vertical .table-striped.table-mc-green > tbody > tr:nth-child(odd) {
  3040.     background-color: #fff;
  3041.   }
  3042.   .table-responsive-vertical .table-striped.table-mc-green > tbody > tr > td:nth-child(odd) {
  3043.     background-color: #d0f8ce;
  3044.   }
  3045.   .table-responsive-vertical .table-hover.table-mc-green > tbody > tr:hover > td,
  3046.   .table-responsive-vertical .table-hover.table-mc-green > tbody > tr:hover {
  3047.     background-color: #fff;
  3048.   }
  3049.   .table-responsive-vertical .table-hover.table-mc-green > tbody > tr > td:hover {
  3050.     background-color: #a3e9a4;
  3051.   }
  3052. }
  3053. .table-striped.table-mc-light-green > tbody > tr:nth-child(odd) > td,
  3054. .table-striped.table-mc-light-green > tbody > tr:nth-child(odd) > th {
  3055.   background-color: #f1f8e9;
  3056. }
  3057. .table-hover.table-mc-light-green > tbody > tr:hover > td,
  3058. .table-hover.table-mc-light-green > tbody > tr:hover > th {
  3059.   background-color: #dcedc8;
  3060. }
  3061. @media screen and (max-width: 767px) {
  3062.   .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr > td,
  3063.   .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr:nth-child(odd) {
  3064.     background-color: #fff;
  3065.   }
  3066.   .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr > td:nth-child(odd) {
  3067.     background-color: #f1f8e9;
  3068.   }
  3069.   .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr:hover > td,
  3070.   .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr:hover {
  3071.     background-color: #fff;
  3072.   }
  3073.   .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr > td:hover {
  3074.     background-color: #dcedc8;
  3075.   }
  3076. }
  3077. .table-striped.table-mc-lime > tbody > tr:nth-child(odd) > td,
  3078. .table-striped.table-mc-lime > tbody > tr:nth-child(odd) > th {
  3079.   background-color: #f9fbe7;
  3080. }
  3081. .table-hover.table-mc-lime > tbody > tr:hover > td,
  3082. .table-hover.table-mc-lime > tbody > tr:hover > th {
  3083.   background-color: #f0f4c3;
  3084. }
  3085. @media screen and (max-width: 767px) {
  3086.   .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr > td,
  3087.   .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr:nth-child(odd) {
  3088.     background-color: #fff;
  3089.   }
  3090.   .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr > td:nth-child(odd) {
  3091.     background-color: #f9fbe7;
  3092.   }
  3093.   .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr:hover > td,
  3094.   .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr:hover {
  3095.     background-color: #fff;
  3096.   }
  3097.   .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr > td:hover {
  3098.     background-color: #f0f4c3;
  3099.   }
  3100. }
  3101. .table-striped.table-mc-yellow > tbody > tr:nth-child(odd) > td,
  3102. .table-striped.table-mc-yellow > tbody > tr:nth-child(odd) > th {
  3103.   background-color: #fffde7;
  3104. }
  3105. .table-hover.table-mc-yellow > tbody > tr:hover > td,
  3106. .table-hover.table-mc-yellow > tbody > tr:hover > th {
  3107.   background-color: #fff9c4;
  3108. }
  3109. @media screen and (max-width: 767px) {
  3110.   .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr > td,
  3111.   .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr:nth-child(odd) {
  3112.     background-color: #fff;
  3113.   }
  3114.   .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr > td:nth-child(odd) {
  3115.     background-color: #fffde7;
  3116.   }
  3117.   .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr:hover > td,
  3118.   .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr:hover {
  3119.     background-color: #fff;
  3120.   }
  3121.   .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr > td:hover {
  3122.     background-color: #fff9c4;
  3123.   }
  3124. }
  3125. .table-striped.table-mc-amber > tbody > tr:nth-child(odd) > td,
  3126. .table-striped.table-mc-amber > tbody > tr:nth-child(odd) > th {
  3127.   background-color: #fff8e1;
  3128. }
  3129. .table-hover.table-mc-amber > tbody > tr:hover > td,
  3130. .table-hover.table-mc-amber > tbody > tr:hover > th {
  3131.   background-color: #ffecb3;
  3132. }
  3133. @media screen and (max-width: 767px) {
  3134.   .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr > td,
  3135.   .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr:nth-child(odd) {
  3136.     background-color: #fff;
  3137.   }
  3138.   .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr > td:nth-child(odd) {
  3139.     background-color: #fff8e1;
  3140.   }
  3141.   .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr:hover > td,
  3142.   .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr:hover {
  3143.     background-color: #fff;
  3144.   }
  3145.   .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr > td:hover {
  3146.     background-color: #ffecb3;
  3147.   }
  3148. }
  3149. .table-striped.table-mc-orange > tbody > tr:nth-child(odd) > td,
  3150. .table-striped.table-mc-orange > tbody > tr:nth-child(odd) > th {
  3151.   background-color: #fff3e0;
  3152. }
  3153. .table-hover.table-mc-orange > tbody > tr:hover > td,
  3154. .table-hover.table-mc-orange > tbody > tr:hover > th {
  3155.   background-color: #ffe0b2;
  3156. }
  3157. @media screen and (max-width: 767px) {
  3158.   .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr > td,
  3159.   .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr:nth-child(odd) {
  3160.     background-color: #fff;
  3161.   }
  3162.   .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr > td:nth-child(odd) {
  3163.     background-color: #fff3e0;
  3164.   }
  3165.   .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr:hover > td,
  3166.   .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr:hover {
  3167.     background-color: #fff;
  3168.   }
  3169.   .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr > td:hover {
  3170.     background-color: #ffe0b2;
  3171.   }
  3172. }
  3173. .table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) > td,
  3174. .table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) > th {
  3175.   background-color: #fbe9e7;
  3176. }
  3177. .table-hover.table-mc-deep-orange > tbody > tr:hover > td,
  3178. .table-hover.table-mc-deep-orange > tbody > tr:hover > th {
  3179.   background-color: #ffccbc;
  3180. }
  3181. @media screen and (max-width: 767px) {
  3182.   .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr > td,
  3183.   .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) {
  3184.     background-color: #fff;
  3185.   }
  3186.   .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr > td:nth-child(odd) {
  3187.     background-color: #fbe9e7;
  3188.   }
  3189.   .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr:hover > td,
  3190.   .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr:hover {
  3191.     background-color: #fff;
  3192.   }
  3193.   .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr > td:hover {
  3194.     background-color: #ffccbc;
  3195.   }
  3196. }
  3198. .flat-busness, .button-flat {
  3199.     padding: 10px;
  3200.     outline: none;
  3201.     text-decoration: none;
  3202.     text-align: center;
  3203.     border-radius: 40px;
  3204.     background: #fff;
  3205.     border: 2px solid #1e499b;
  3206.     color: #1e499b;
  3207.     letter-spacing: 1px;
  3208.     text-shadow: 0;
  3209.     font-size: 12px;
  3210.     font-weight: bold;
  3211.     cursor: pointer;
  3212.     transition: all 0.25s ease;
  3213.     margin-top: 3px;
  3214. }
  3215. .flat-busness:hover, .button-flat:hover{
  3216.     background: #f7941d;
  3217.     color: #fff;
  3218. }
  3220. @media only screen and (min-width: 1100px){
  3221.     .header.shop .search-bar {
  3222.         width: 660px!important;
  3223.     }
  3224.     .header.shop .search-bar input {
  3225.         width: 450px!important;
  3226.         margin-left: -60px;
  3227.     }
  3228. }
  3229. .nice-select .list {
  3230.     z-index: 1000!important;
  3231. }
  3233. .button--anchor {
  3234.   background: none;
  3235.   border: none;
  3236.   padding: 0;
  3237.   margin: 0;
  3238. }
  3239. .button--anchor:hover {
  3240.   text-decoration: underline;
  3241. }
  3243. .button--primary {
  3244.   box-sizing: border-box;
  3245.   border: 1px solid #c49530;
  3246.   border-radius: 3px;
  3247.   box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.2);
  3248.   background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #fee045), to(#fecb2a));
  3249.   background: linear-gradient(to bottom, #fee045 5%, #fecb2a 100%);
  3250.   height: 37px;
  3251.   font-weight: bold;
  3252.   font-size: 13px;
  3253.   text-align: center;
  3254.   padding: 7px;
  3255. }
  3257. .button--blue {
  3258.   color: #1471da;
  3259. }
  3261. .hr-line {
  3262.   display: flex;
  3263. }
  3265. .hr-line:before,
  3266. .hr-line:after {
  3267.   content: '';
  3268.   flex: 1;
  3269.   border-bottom: 1px solid;
  3270.   margin: auto 0.25em;
  3271. }
  3272. .btn-nav-search {
  3273.     font-size: 12px;
  3274.     border: 3px solid #ddd;
  3275.     margin-right: -2px;
  3276.     font-family: 'Montserrat', sans-serif!important;
  3277.     text-align: center;
  3278.     color: #030303;
  3279.     background: linear-gradient(#FFFFFF,#E6E6E6);
  3280.     border: 1px solid #CDCDCD;
  3281.     border-radius: 3px;
  3282.     display: inline-block;
  3283.     padding: 5px 10px;
  3284.     font-weight: bold;
  3285. }
  3287. input[type="checkbox"] {
  3288.   -webkit-appearance: none;
  3289.      -moz-appearance: none;
  3290.           appearance: none;
  3291.   background-color: white;
  3292.   border: 0.125rem #808080 solid;
  3293.   border-radius: 4px;
  3294.   cursor: pointer;
  3295.   display: inline-block;
  3296.   height: 1.25rem;
  3297.   margin-right: 0.25rem;
  3298.   position: relative;
  3299.   -webkit-transition: all 0.25s;
  3300.   transition: all 0.25s;
  3301.   vertical-align: middle;
  3302.   width: 1.25rem;
  3303. }
  3304. input[type="checkbox"]::after {
  3305.   background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2264px%22%20height%3D%2264px%22%20viewBox%3D%220%200%2064%2064%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cpolygon%20id%3D%22Combined-Shape%22%20fill%3D%22white%22%20points%3D%2223%2056%2021%2054%200%2033%207%2026%2023%2042%2057%208%2064%2015%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E");
  3306.   background-position: center center;
  3307.   background-repeat: no-repeat;
  3308.   background-size: 0.75rem 0.75rem;
  3309.   content: "";
  3310.   height: 1rem;
  3311.   left: 0;
  3312.   opacity: 0;
  3313.   position: absolute;
  3314.   top: 0;
  3315.   -webkit-transition: opacity 0.25s;
  3316.   transition: opacity 0.25s;
  3317.   width: 1rem;
  3318. }
  3319. input[type="checkbox"]:hover {
  3320.   background-color: #bfdde1;
  3321.   border: 0.125rem #007788 solid;
  3322.   -webkit-transform: scale(1.1);
  3323.           transform: scale(1.1);
  3324. }
  3325. input[type="checkbox"]:focus {
  3326.   outline: none;
  3327.   box-shadow: 0px 0px 8px rgba(0, 119, 136, 0.75);
  3328. }
  3329. input[type="checkbox"]:checked {
  3330.   background-color: #007788;
  3331.   border: 0.125rem #007788 solid;
  3332. }
  3333. input[type="checkbox"]:checked::after {
  3334.   opacity: 1;
  3335. }
  3336. label {
  3337.   display: inline-block;
  3338.   vertical-align: middle;
  3339. }
  3341. .mbill-border{
  3342.     background: #fff; border: 1px solid #ddd; margin-top: 15px; padding: 4px; border-radius: 5px;
  3343. }
  3344. .modal-dialog .modal-content .modal-body {
  3345.     padding: 0px;
  3346.     overflow-y: auto;
  3347.     max-height: 510px;
  3348.     height: auto;
  3349. }
  3352. /** Début style Offres spéciales **/
  3354. .kapsayici{
  3355.     width:100%;
  3356.     height:auto;
  3357.     position:relative;
  3358.     margin-left:auto;
  3359.     margin-right:auto;
  3360.     display:block;
  3361. }
  3362. .kapsayici a{
  3363.     color:#fff;
  3364.     text-decoration:none;
  3365.     background-color:#000;
  3366.     font-family: 'Roboto', sans-serif;
  3367. }
  3368. .kapsayici a:hover{
  3369.     color:#fff;
  3370.     text-decoration:none;
  3371. }
  3373. .slid3{
  3374.     width:100%;
  3375.     height:250px;
  3376.     background-color:#ccc;
  3377.     display:block;
  3378.     position:relative;
  3379.     z-index:1;
  3380. }
  3382. .resim3{
  3383.     width:100%;
  3384.     height:100%;
  3385.     display:block;
  3386.     position:absolute;
  3387.     transition:0.5s;
  3388.     vertical-align: middle;
  3389.     z-index:2;
  3390. }
  3391. .resim3:after{
  3392.     position: absolute;
  3393.     content:"";
  3394.     height:100%;
  3395.     width:100%;
  3396.     top:0;
  3397.     left:0;
  3398.     opacity:0.9;
  3399.     background: linear-gradient(to bottom, transparent 40%,#000 90%);
  3400. }
  3401. .resim3 img{
  3402.     width:100%;
  3403.     height:100%;
  3404.     object-fit: cover;
  3405.     object-position: 50% 15%;
  3406. }
  3407. .resim3 h2{
  3408.     position:absolute;
  3409.     bottom:0px;
  3410.     padding:10px;
  3411.     word-wrap: break-word;
  3412.     text-shadow: 6px 4px 12px #000;
  3413.     font-weight:900;
  3414.     font-size:24px;
  3415.     z-index:222;
  3416.     transition:0.4s;
  3417. }
  3418. .resim3 p{
  3419.     position:absolute;
  3420.     bottom:2px;
  3421.     visibility:hidden;
  3422.     padding:10px;
  3423.     z-index:11;
  3424.     word-wrap: break-word;
  3425.     text-shadow: 6px 4px 12px #000;
  3426.     font-size:16px;
  3427.     color:#fff;
  3428.     width: 90%;
  3429.     transition:0.2s;
  3430.     overflow: hidden;
  3431.     white-space: nowrap;
  3432.     text-overflow: ellipsis;
  3433. }
  3434. .emoji{
  3435.     top:-10px;
  3436.     left:-20px;
  3437.     position:absolute;
  3438.     z-index:222;
  3439. }
  3440. .emoji img{
  3441.     width:55px;
  3442.     height:55px;
  3443.     padding:4px;
  3444. }
  3445. .slid3  span.yazar3 img{
  3446.     display:inline;
  3447.     border-radius:100%;
  3448.     width:30px;
  3449.     height:30px;
  3450.     vertical-align:middle;
  3451.     padding-right:5px;
  3452.     z-index:999;
  3453. }
  3454. .slid3 a:hover  .resim3 h2{ bottom:30px; transition:0.4s;}
  3455. .slid3 a:hover .resim3 p{visibility: visible; z-index:222; transition:0.6s;}
  3456. .slid3 a:hover .resim3:after{ opacity:1;background: linear-gradient(to bottom, transparent 0%,#000 100%);}
  3458. .panel-offer{
  3459.     border: 1px solid #ddd; padding-top: 15px; padding-bottom: 15px;
  3460. }
  3461. .panel-offer:hover{
  3462.     background: #f4f4f4;
  3463. }
  3465. /** Début File Input */
  3467. .file-input {
  3468.   display: inline-block;
  3469.   text-align: left;
  3470.   background: #fff;
  3471.   padding: 16px;
  3472.   width: 450px;
  3473.   position: relative;
  3474.   border-radius: 3px;
  3475. }
  3477. .file-input > [type='file'] {
  3478.   position: absolute;
  3479.   top: 0;
  3480.   left: 0;
  3481.   width: 100%;
  3482.   height: 100%;
  3483.   opacity: 0;
  3484.   z-index: 10;
  3485.   cursor: pointer;
  3486. }
  3488. .file-input > .button {
  3489.   display: inline-block;
  3490.   cursor: pointer;
  3491.   background: #eee;
  3492.   padding: 8px 16px;
  3493.   border-radius: 2px;
  3494.   margin-right: 8px;
  3495. }
  3497. .file-input:hover > .button {
  3498.   background: dodgerblue;
  3499.   color: white;
  3500. }
  3502. .file-input > .label {
  3503.   color: #333;
  3504.   white-space: nowrap;
  3505.   opacity: .3;
  3506. }
  3508. .file-input.-chosen > .label {
  3509.   opacity: 1;
  3510. }
  3513. /* responsive Search, Pagine & Filter Table */
  3515. .dataTables_filter {
  3516.   float: right;
  3517. }
  3519. .table-hover > tbody > tr:hover {
  3520.   background-color: #ccffff;
  3521. }
  3523. @media only screen and (min-width: 768px) {
  3524.   .tablefilter {
  3525.     width: 100% !important;
  3526.     margin: 15px 0px;
  3527.   }
  3528. }
  3530. thead {
  3531.   background: #f4f4f4;
  3532.   border-radius: 10px 10px 0px 0px!important;
  3533. }
  3534. tfoot {
  3535.   background: #f4f4f4;
  3536.   border-radius: 0px 10px!important;
  3537. }
  3538. tr{
  3539.     border: 1px solid rgba(0,0,0,0.1)!important;
  3540. }
  3541. .table td:nth-child(2) {
  3542.   overflow: hidden;
  3543.   text-overflow: ellipsis;
  3544. }
  3546. .highlight {
  3547.   background: #ffff99;
  3548. }
  3550. @media only screen and (max-width: 767px) {
  3551.   /* Force table to not be like tables anymore */
  3552.   .tablefilter,
  3553.   .tablefilter thead,
  3554.   .tablefilter tbody,
  3555.   .tablefilter th,
  3556.   .tablefilter td,
  3557.   .tablefilter tr {
  3558.     display: block;
  3559.   }
  3561.   /* Hide table headers (but not display: none;, for accessibility) */
  3562.   .tablefilter thead tr,
  3563.   .tablefilter tfoot tr {
  3564.     position: absolute;
  3565.     top: -9999px;
  3566.     left: -9999px;
  3567.   }
  3569.   .tablefilter td {
  3570.     /* Behave  like a "row" */
  3571.     border: none;
  3572.     border-bottom: 1px solid #eee;
  3573.     position: relative;
  3574.     padding-left: 50% !important;
  3575.   }
  3577.   .tablefilter td:before {
  3578.     /* Now like a table header */
  3579.     position: absolute;
  3580.     /* Top/left values mimic padding */
  3581.     top: 6px;
  3582.     left: 6px;
  3583.     width: 45%;
  3584.     padding-right: 10px;
  3585.     white-space: nowrap;
  3586.   }
  3588.   .tablefilter td:nth-child(1) {
  3589.     background: #ccc;
  3590.     height: 100%;
  3591.     top: 0;
  3592.     left: 0;
  3593.     font-weight: bold;
  3594.   }
  3595. }
  3597. .dt-bootstrap .row{
  3598.     width: 100%!important;
  3599.     margin-top: 5px;
  3600.     margin-bottom: 5px;
  3601. }
  3602. .dataTables_paginate ul li{
  3603.     display: inline!important;
  3604. }
  3605. .pagination{display:inline-block;padding-left:0;margin:20px 0;border-radius:4px}.pagination>li{display:inline}.pagination>li>a,.pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#337ab7;text-decoration:none;background-color:#fff;border:1px solid #ddd}.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover{z-index:2;color:#23527c;background-color:#eee;border-color:#ddd}.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{z-index:3;color:#fff;cursor:default;background-color:#337ab7;border-color:#337ab7}.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover{color:#777;cursor:not-allowed;background-color:#fff;border-color:#ddd}.pagination-lg>li>a,.pagination-lg>li>span{padding:10px 16px;font-size:18px;line-height:1.3333333}.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{border-top-left-radius:6px;border-bottom-left-radius:6px}.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px}.pagination-sm>li>a,.pagination-sm>li>span{padding:5px 10px;font-size:12px;line-height:1.5}.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{border-top-left-radius:3px;border-bottom-left-radius:3px}.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{border-top-right-radius:3px;border-bottom-right-radius:3px}
  3606. table.dataTable thead .sorting:after{
  3607.     opacity: 0.5;
  3608.     content: "\f0dc"!important;
  3609.     font-family: "FontAwesome"!important;
  3610. }
  3611. table.dataTable thead .sorting_asc:after{
  3612.     opacity: 0.5;
  3613.     content: "\f0dc"!important;
  3614.     font-family: "FontAwesome"!important;
  3615. }
  3616. table.dataTable thead .sorting_desc:after{
  3617.     opacity: 0.5;
  3618.     content: "\f0dc"!important;
  3619.     font-family: "FontAwesome"!important;
  3620. }
  3621. .tablefilter > thead > tr > th, .tablefilter > tbody > tr > th, .tablefilter > tfoot > tr > th, .tablefilter > thead > tr > td, .tablefilter > tbody > tr > td, .tablefilter > tfoot > tr > td {
  3622.    padding: 7px 3px;
  3623. }
  3624. .tablefilter > tbody > tr > td {
  3625.     border-bottom: 1px solid #ddd!important;
  3626.     text-weight: normal!important;
  3627.     border-bottom-width: 1!important;
  3628. }
  3630. .star-ratings-css {
  3631.   unicode-bidi: bidi-override;
  3632.   color: #c5c5c5;
  3633.   font-size: 25px;
  3634.   height: 25px;
  3635.   width: 100px;
  3636.   margin: 0 auto;
  3637.   position: relative;
  3638.   padding: 0;
  3639.   text-shadow: 0px 1px 0 #a2a2a2;
  3640. }
  3641. .star-ratings-css-top {
  3642.   color: #e7711b;
  3643.   padding: 0;
  3644.   position: absolute;
  3645.   z-index: 0;
  3646.   display: block;
  3647.   top: 0;
  3648.   left: 0;
  3649.   overflow: hidden;
  3650. }
  3651. .star-ratings-css-bottom {
  3652.   padding: -1;
  3653.   display: block;
  3654.   z-index: 0;
  3655. }
  3656. .star-ratings-sprite {
  3657.   background: url("{{ asset('template/images/star-rating-sprite.png') }}") repeat-x;
  3658.   font-size: 0;
  3659.   height: 21px;
  3660.   line-height: 0;
  3661.   overflow: hidden;
  3662.   text-indent: -999em;
  3663.   width: 110px;
  3664.   margin: 0 auto;
  3665. }
  3666. .star-ratings-sprite-rating {
  3667.   background: url("{{ asset('template/images/star-rating-sprite.png') }}") repeat-x;
  3668.   background-position: 0 100%;
  3669.   float: left;
  3670.   height: 21px;
  3671.   display: block;
  3672. }
  3673. em {
  3674.   font-style: italic;
  3675. }
  3677. .topic{
  3678.   padding:20px;
  3679.   padding-top:0px;
  3680.   padding-bottom:0px;
  3681.   border-bottom:solid 1px #ebebeb;
  3682.   width: 100%;
  3683. }
  3684. .topic .open{
  3685.   cursor:pointer;
  3686.   display:block;
  3687.   padding:0px;
  3688. }
  3689. .topic .open:hover{
  3690.   opacity:0.7;
  3691. }
  3692. .expanded{
  3693.   background-color:#f5f5f5;
  3694.   transition: all .3s ease-in-out;
  3695. }
  3696. .question{
  3697.   padding-top:30px;
  3698.   padding-right: 40px;
  3699.   padding-bottom:20px;
  3700.   font-size: 18px;
  3701.   font-weight:500;
  3702.   color: #526ee4;
  3703. }
  3704. .answer{
  3705.   font-size:16px;
  3706.   line-height:26px;
  3707.   display:none;
  3708.   margin-bottom:30px;
  3709.   text-align:justify;
  3710.   padding-left:20px;
  3711.   padding-right:20px;
  3712. }
  3713. .faq-t{
  3714.   -moz-transform: rotate(-45deg);
  3715.   -ms-transform: rotate(-45deg);
  3716.   -webkit-transform: rotate(-45deg);
  3717.   transform: rotate(-45deg);
  3718.   display: inline-block;
  3719.   float:right;
  3720.   position:relative;
  3721.   top:-55px;
  3722.   right:10px;
  3723.   width: 10px;
  3724.   height: 10px;
  3725.   background: transparent;
  3726.   border-left: 2px solid #ccc;
  3727.   border-bottom: 2px solid #ccc;
  3728.   transition: all .3s ease-in-out;
  3729. }
  3730. .faq-o{
  3731.   top:-50px;
  3732.    -moz-transform: rotate(-224deg);
  3733.   -ms-transform: rotate(-224deg);
  3734.   -webkit-transform: rotate(-224deg);
  3735.   transform: rotate(-224deg);
  3736. }
  3737. @media only screen and (max-width: 480px) {
  3738.   .faq-t{display:none;}
  3739.   .question{
  3740.   padding-right: 0px;
  3741. }
  3742.   main{
  3743.   padding:10px;
  3744. }
  3745.   .answer{
  3746.   margin-bottom:30px;
  3747.   padding-left:0px;
  3748.   padding-right:0px;
  3749. }
  3750. }
  3752. .theme-bg-light{
  3753.     border: 1px  #CCC solid;
  3754.     box-shadow: inset 0px 11px 8px -10px #CCC, inset 0px -11px 8px -10px #CCC;
  3755. }
  3757. .flat-btn {
  3758.     display: inline-block;
  3759.     padding: 15px 20px;
  3760.     font-size: 13px;
  3761.     font-weight: 600;
  3762.     text-align: center;
  3763.     text-decoration: none;
  3764.     border-radius: 50px;
  3765.     border: 1px solid #E5DFEF;
  3766.     color: #231A3B;
  3767.     transition: background .2s ease-in-out;
  3768.     margin-top: 15px;
  3769. }
  3771. .flat-btn:hover {
  3772.     background: #E5DFEF;
  3773.     cursor: pointer;
  3774. }
  3776. @media (min-width:576px) {
  3777.     .modal-dialog {
  3778.         max-width: 500px!important;
  3779.         margin: 30px auto
  3780.     }
  3781.     .modal-sm {
  3782.         max-width: 300px!important;
  3783.     }
  3784. }
  3786. @media (min-width:992px) {
  3787.     .modal-lg {
  3788.         max-width: 800px!important;
  3789.     }
  3790. }
  3792. .white-text-shadow{
  3793.     color: #666;
  3794.     /*text-shadow: 1px 1px 2px #000000;*/
  3795.     margin-bottom: 10px;
  3796.     text-align: center;
  3797.     display: inline-block;
  3798. }
  3799. .white-text-shadow:hover{
  3800.     text-decoration: underline;
  3801. }
  3804. @media only screen and (max-width: 767px){
  3805. .slicknav_btn {
  3806.     background: transparent;
  3807.     padding: 0;
  3808.     margin: 5px 15px 0px 0px;
  3809.     position: absolute;
  3810.     right: 0px;
  3811.     top: 0px;
  3812. }
  3814. .m-text-center{
  3815.     text-align: center!important;
  3816. }
  3817. .logo-small a img{
  3818.     height: 50px;
  3819.     margin-top: -10px;
  3820. }
  3821. .open-menu{
  3822.     position: absolute;
  3823.     left: -15px!important; top: -7px!important;
  3824. }
  3826. .hero-slider .single-slider {
  3827.     height: auto!important;
  3828.     min-height: 510px!important;
  3829. }
  3830. .hero-slider{
  3831.     height: auto!important;
  3832. }
  3833. }
  3835. @media only screen and (min-width: 767px){
  3836. .m-text-center{
  3837.     text-align: left;
  3838. }
  3839. .open-menu{
  3840.     display: none!important;
  3841. }
  3842. .logo-small a img{
  3843.     height: 80px;
  3844.     margin-top: -10px;
  3845. }
  3846. .hero-slider .single-slider {
  3847.     height: 510px!important;
  3848. }
  3849. .hero-slider{
  3850.     height: auto!important;
  3851. }
  3852. }
  3854. .menu-mob{
  3855.     height: 100%!important;
  3856.     width: 300px;
  3857.     position: fixed;
  3858.     left: -350px;
  3859.     top: 0px;
  3860.     z-index: 1001;
  3861.     background: #fff;
  3862.     overflow: hidden;
  3863.     text-align: left;
  3864.   -webkit-transition: -webkit-transform 250ms ease-in-out;
  3865.   transition: transform 250ms ease-in-out;
  3866. }
  3868. .activebtn {
  3869.     -webkit-transform: translateX(350px);
  3870.     -moz-transform: translateX(350px);
  3871.     -o-transform: translateX(350px);
  3872.     -ms-transform: translateX(350px);
  3873.     transform: translateX(350px);
  3874.     box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  3875.     -moz-box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  3876.     -webkit-box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  3877. }
  3879. .open-menu{
  3880.     display: inline-block;
  3881. }
  3883. .open-menu button{
  3884.     display: inline;
  3885.     z-index: 0;
  3886.     background: transparent;
  3887.     border: none;
  3888.     margin-top: 10px;
  3889.     margin-left: 25px;
  3890.     padding: 0px;
  3891.     cursor: pointer;
  3892. }
  3894. .open-menu img{
  3895.     width: 30px;
  3896.     height: 30px;
  3897. }
  3899. .header-menu{
  3900.     height: 60px;
  3901.     background: #f4f4f4;
  3902.     margin-bottom: 7px;
  3903.     padding: 7px 10px;
  3904. }
  3906. .header-menu button {
  3907.     position: absolute;
  3908.     background: transparent;
  3909.     border: none;
  3910.     padding: 0px;
  3911.     cursor: pointer;
  3912.     float: right;
  3913.     top: 7px;
  3914.     right: 7px;
  3915. }
  3917. .header-menu img {
  3918.     width: 40px;
  3919.     height: 40px;
  3920. }
  3922. .top-menu {
  3923.     margin-top: 35px;
  3924. }
  3926. .top-menu a {
  3927.     text-decoration: none;
  3928.     color: black;
  3929.     font-weight: 500;
  3930.     font-size: 16rem;
  3931.     display: block;
  3932.     line-height: 40px;
  3933.     padding-left: 35px;
  3934.      transition: .2s;
  3935. }
  3937. /* Dropdown Button */
  3938. .dropbtn-prfl {
  3939. background-color: #4CAF50;
  3940. color: white;
  3941. padding: 16px;
  3942. font-size: 16px;
  3943. border: none;
  3944. }
  3946. /* The container <div> - needed to position the dropdown content */
  3947. .dropdown-prfl {
  3948. position: relative;
  3949. display: inline-block;
  3950. }
  3952. /* Dropdown Content (Hidden by Default) */
  3953. .dropdown-content-prfl {
  3954. display: none;
  3955. position: absolute;
  3956. background-color: #fff;
  3957. min-width: 160px;
  3958. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  3959. z-index: 1;
  3960. border-radius: 10px;
  3961. }
  3963. /* Links inside the dropdown */
  3964. .dropdown-content-prfl a {
  3965. color: black;
  3966. padding: 12px 16px;
  3967. text-decoration: none;
  3968. display: block;
  3969. }
  3971. /* Change color of dropdown links on hover */
  3972. .dropdown-content-prfl a:hover {background-color: #ddd;}
  3974. /* Show the dropdown menu on hover */
  3975. .dropdown-prfl:hover .dropdown-content-prfl {display: block;}
  3977. /* Change the background color of the dropdown button when the dropdown content is shown */
  3978. .dropdown-prfl:hover .dropbtn-prfl {background-color: #3e8e41;}
  3980. .menu-mob .dropdown-toggle::after {
  3981.     display: inline-block;
  3982.     width: 0;
  3983.     height: 0;
  3984.     float: right;
  3985.     position: absolute;
  3986.     top: 15px;
  3987.     right: 7px;
  3988.     content: "";
  3989.     border-top: .3em solid;
  3990.     border-right: .3em solid transparent;
  3991.     border-bottom: 0;
  3992.     border-left: .3em solid transparent;
  3993. }
  3995. aside{
  3996.   position: fixed;
  3997.   width: 100%;
  3998.   top: 0;
  3999.   left: 0;
  4000.   background: #f4f4f4;
  4001.   opacity: 0;
  4002.   visibility: hidden;
  4003.   transition: all .5s ease;
  4004.   z-index: 90000!important;
  4005. }
  4006. .open {
  4007.   opacity: 1;
  4008.   visibility: visible;
  4009. }
  4012. .close-nav {
  4013.   position: fixed;
  4014.   top: 20px;
  4015.   left: 15px;
  4016.   color: white;
  4017.   z-index: 3;
  4018.   cursor: pointer;
  4019.   font-family: sans-serif;
  4020.   box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
  4021. }
  4022. .close-nav:hover{
  4023.     background: red!important;
  4024.     color: #fff!important;
  4025. }
  4026. .hiden-scroll-bar-body{
  4027.     height: 400px;
  4028.     overflow-y: hidden;
  4029. }
  4030. .close-nav span,
  4031. .close-nav span:before,
  4032. .close-nav span:after {
  4033.   border-radius: 4px;
  4034.   height: 5px;
  4035.   width: 35px;
  4036.   background: white;
  4037.   position: absolute;
  4038.   display: block;
  4039.   content: '';
  4040. }
  4041. .close-nav span {
  4042.   background: transparent;
  4043. }
  4044. .close-nav span:before {
  4045.   -webkit-transform: rotate(45deg);
  4046.           transform: rotate(45deg);
  4047. }
  4048. .close-nav span:after {
  4049.   -webkit-transform: rotate(-45deg);
  4050.           transform: rotate(-45deg);
  4051. }
  4053. .outer-close {
  4054.   position: absolute;
  4055.   right: 0;
  4056.   top: 0;
  4057.   width: 85px;
  4058.   height: 85px;
  4059.   cursor: pointer;
  4060. }
  4063. .position-current-user, .position-current-user p{
  4064.     background: #3565ae!important;
  4065.     color: #fff!important;
  4066. }
  4067. .bg-struct{
  4068.     background: #3565ae!important;
  4069.     color: #fff!important;
  4070. }
  4074. .silly_scrollbar {
  4075.     height:700px;
  4076.     -webkit-box-shadow:0 0 3px #333;
  4077.     -webkit-box-sizing: border-box;
  4078.     padding:0 14px;
  4079.     overflow:auto;
  4080. }
  4082. .silly_scrollbar::-webkit-scrollbar {
  4083.     width: 12px;
  4084. }
  4086. .silly_scrollbar::-webkit-scrollbar-track {
  4087.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  4088.     border-radius: 10px;
  4089. }
  4091. .silly_scrollbar::-webkit-scrollbar-thumb {
  4092.     border-radius: 10px;
  4093.     -webkit-box-shadow: inset 0 0 6px red;
  4094. }
  4096. .silly_scrollbar::-webkit-scrollbar-thumb:hover {
  4097.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
  4098. }
  4100. /* The container  - needed to position the dropdown content */
  4101. .dropdown-prfl {
  4102. position: relative;
  4103. display: inline-block;
  4104. }
  4106. /* Dropdown Content (Hidden by Default) */
  4107. .dropdown-content-prfl {
  4108. display: none;
  4109. position: absolute;
  4110. background-color: #fff;
  4111. min-width: 160px;
  4112. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  4113. margin-top: -5px; z-index: 50000;
  4114. }
  4116. /* Links inside the dropdown */
  4117. .dropdown-content-prfl a {
  4118. color: black;
  4119. padding: 12px 16px;
  4120. text-decoration: none;
  4121. display: block;
  4122. }
  4124. /* Change color of dropdown links on hover */
  4125. .dropdown-content-prfl a:hover {background-color: #ddd;}
  4127. /* Show the dropdown menu on hover */
  4128. .dropdown-prfl:hover .dropdown-content-prfl {display: block;}
  4130. /* Change the background color of the dropdown button when the dropdown content is shown */
  4131. .dropdown-prfl:hover .dropbtn-prfl {background-color: #3e8e41;}
  4133. .button-hover, .button-hover:hover, .button-hover:active, .button-hover:visited, .button-hover:focus {
  4134.   outline: 0;
  4135. }
  4137. .button-hover:not(.btn-lang-footer):not(.btn-send-footer):not(.homepage-seecourses):not(.module-btn):not(.btn-download):not(.dropbtn12) {
  4138.   height: 45px;
  4139.   width: auto;
  4140.   padding: 0 35px;
  4141.   border-radius: 4px;
  4142.   color: #6c6c6c;
  4143.   border: 1px solid #c6c6c6;
  4144.   text-transform: uppercase;
  4145.   font-family: 'Montserrat';
  4146.   font-size: 14px;
  4147.   font-weight: bold;
  4148.   line-height: 22px;
  4149.   text-align: center;
  4150.   transition: 0.3s cubic-bezier(0.25, 0.8, 0.95, 1);
  4151.   transition: padding 0s;
  4152.   background: transparent;
  4153. }
  4154. .button-hover:not(.btn-lang-footer):not(.btn-send-footer):not(.homepage-seecourses):not(.module-btn):not(.btn-download):hover {
  4155.   background: linear-gradient(216.73deg, #7B00B9 0%, #7323DC 100%);
  4156.   color: #fff;
  4157.   border: 1px solid #7B00B9;
  4158. }
  4159. @media (min-width: 320px) and (max-width: 768px) {
  4160.   .button-hover:not(.btn-lang-footer):not(.btn-send-footer):not(.homepage-seecourses):not(.module-btn):not(.btn-download):hover {
  4161.     background: transparent;
  4162.     color: #6c6c6c;
  4163.     border: 1px solid #c6c6c6;
  4164.   }
  4165. }
  4168. /*
  4169.     ---------------------------------------------
  4170.     Start Modal SPP
  4171.     -------------------------------------------------
  4172.     */
  4173.     html.sppmodal-active, body.sppmodal-active {
  4174.     overflow: hidden;
  4175.     }
  4176.     .sppmodal-container {
  4177.     position: fixed;  /*Mettre à fixed si la classe sppmodal-active est appliqué à l'élément body*/
  4178.     display: table;
  4179.     height:100%;
  4180.     width: 100%;
  4181.     top: 0;
  4182.     left: 0;
  4183.     transform: scale(0);
  4184.     z-index: 1000;
  4185.     }
  4186.     .sppmodal-container.one {
  4187.     transform: scaleY(0.01) scaleX(0);
  4188.     animation: unfoldIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  4189.     }
  4190.     .sppmodal-container.one .sppmodal-background .sppmodal {
  4191.     transform: scale(0);
  4192.     animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  4193.     }
  4194.     .sppmodal-container.one.out {
  4195.     transform: scale(1);
  4196.     animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  4197.     }
  4198.     .sppmodal-container.one.out .sppmodal-background .sppmodal {
  4199.     animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  4200.     }
  4202.     .sppmodal-container .sppmodal-background {
  4203.     display: table-cell;
  4204.     background: rgba(247, 248, 251,0.8)!important;
  4205.     text-align: center;
  4206.     vertical-align: middle;
  4207.     }
  4208.     .sppmodal-container .sppmodal-background .sppmodal {
  4209.     padding: 10px;
  4210.     display: inline-block;
  4211.     position: relative;
  4212.         width: 600px;
  4213.     height: auto;
  4214.     max-width: 100%!important;
  4215.     height: 750px;
  4216.     overflow-y: auto;
  4217.     overflow-x: hidden;
  4218.     padding-bottom: 40px;
  4221.         font-family: Arial;
  4222.         font-size: 13px;
  4223.         font-weight: 400;
  4224.         text-align: center;
  4225.         line-height: 18px;
  4226.         color:  #FFFFFF;
  4227.         background-color: #FFFFFF;
  4228.         background-repeat: repeat;
  4229.         background-position: left top;
  4230.         border: 1px solid  #F1F3F9;
  4231.         border-radius: 4px;
  4232.         box-shadow: 0px 2px 5px 1px  #999999;
  4233.     }
  4235.     .sppmodal-container .sppmodal-background .sppmodal h2 {
  4236.     font-size: 25px;
  4237.     line-height: 25px;
  4238.     margin-bottom: 15px;
  4239.     }
  4240.     .sppmodal-container .sppmodal-background .sppmodal p {
  4241.     font-size: 18px;
  4242.     line-height: 22px;
  4243.     }
  4244.     .sppmodal-container .sppmodal-background .sppmodal .sppmodal-svg {
  4245.     position: absolute;
  4246.     top: 0;
  4247.     left: 0;
  4248.     height: 100%;
  4249.     width: 100%;
  4250.     border-radius: 3px;
  4251.     }
  4252.     .sppmodal-container .sppmodal-background .sppmodal .sppmodal-svg rect {
  4253.     stroke: #fff;
  4254.     stroke-width: 2px;
  4255.     stroke-dasharray: 778;
  4256.     stroke-dashoffset: 778;
  4257.     }
  4260.     @keyframes unfoldIn {
  4261.     0% {
  4262.         transform: scaleY(0.005) scaleX(0);
  4263.     }
  4264.     50% {
  4265.         transform: scaleY(0.005) scaleX(1);
  4266.     }
  4267.     100% {
  4268.         transform: scaleY(1) scaleX(1);
  4269.     }
  4270.     }
  4271.     @keyframes unfoldOut {
  4272.     0% {
  4273.         transform: scaleY(1) scaleX(1);
  4274.     }
  4275.     50% {
  4276.         transform: scaleY(0.005) scaleX(1);
  4277.     }
  4278.     100% {
  4279.         transform: scaleY(0.005) scaleX(0);
  4280.     }
  4281.     }
  4282.     @keyframes zoomIn {
  4283.     0% {
  4284.         transform: scale(0);
  4285.     }
  4286.     100% {
  4287.         transform: scale(1);
  4288.     }
  4289.     }
  4290.     @keyframes zoomOut {
  4291.     0% {
  4292.         transform: scale(1);
  4293.     }
  4294.     100% {
  4295.         transform: scale(0);
  4296.     }
  4297.     }
  4298.   .form-alert-top{
  4299.     z-index: 2; position: absolute; background: #caf3f7; border-top: 1px solid #ddd; bottom: 0px; width: 100%; left: 0px; height: 70px;
  4300.   }
  4301.   @media (max-width: 720px){
  4302.     .sppmodal-container .sppmodal-background .sppmodal{
  4303.       width: 100%!important;
  4304.       height: calc(100vh)!important;
  4305.     }
  4306.     .form-alert-top{
  4307.       display: none;
  4308.     }
  4309.   }
  4310.     /*
  4311.     --------------------------------------
  4312.     End Modal SPP
  4313.     --------------------------------------
  4314.     */
  4316.   .btn-home {
  4317.   font-family: "Barlow", sans-serif;
  4318.   font-weight: 700;
  4319.   font-size: 18px;
  4320.   padding: 15px 40px;
  4321.   background: #fff;
  4322.   border: none;
  4323.   cursor: pointer;
  4324.   transition: 0.4s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
  4325.   position: relative;
  4326.   z-index: 2;
  4327.   border-radius: 50px;
  4328.   overflow: hidden;
  4329. }
  4330. .btn-home:after {
  4331.   content: "";
  4332.   position: absolute;
  4333.   transition: 0.4s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
  4334. }
  4336. .btn-4 {
  4337.   color: #252D4A;
  4338.   border: 2px solid currentColor;
  4339. }
  4340. .btn-4:after {
  4341.   border: solid #5568AA;
  4342.   border-width: 0 2px 2px 0;
  4343.   display: inline-block;
  4344.   padding: 4px;
  4345.   transform: rotate(-45deg) translateY(-48%);
  4346.   top: 48%;
  4347.   right: 27%;
  4348.   opacity: 0;
  4349.   visibility: hidden;
  4350.   z-index: -1;
  4351. }
  4352. .btn-4:hover, .btn-4:focus {
  4353.   color: #5568AA;
  4354.   border: 2px solid transparent;
  4355.   padding: 15px 70px;
  4356. }
  4357. .btn-4:hover:after, .btn-4:focus:after {
  4358.   opacity: 1;
  4359.   visibility: visible;
  4360.   right: 18%;
  4361. }
  4362. .btn-4:focus {
  4363.   border-color: currentColor;
  4364. }
  4365. .btn-4:hover{
  4366.   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  4367. }
  4368. form.formmodal_inscription_newletter .nice-select {
  4369.     width: 100%!important;
  4370. }
  4371. .nice-select .list {
  4372.     max-height: 250px!important;
  4373.     overflow: auto!important;
  4374. }
  4375. .white-text-shadow{
  4376.   color: white;
  4377.   text-shadow: 2px 2px 4px #000000;
  4378. }
  4382. /* toggle-switch-1 */
  4383. .toggle-switch-1{
  4384.   --width: 70px;
  4385.   --height: 25px;
  4386.   position: relative;
  4387.   width: var(--width);
  4388.   height: var(--height);
  4389.   cursor: pointer;
  4390. }
  4391. .toggle-switch-1 input[type=checkbox]{
  4392.   opacity: 0!important;
  4393. }
  4394. .toggle-switch-1 input{
  4395.   position: relative;
  4396.   z-index: 1;
  4397.   appearance: none;
  4398. }
  4399. .toggle-switch-1 span{
  4400.   position: absolute;
  4401.   top: 0;
  4402.   left: 0;
  4403.   width: 100%;
  4404.   height: 100%;
  4405.   background: #313237;
  4406.   border-radius: var(--height);
  4407.   transition: 0.5;
  4408.   box-shadow: 0 1px 1px #313237;
  4409. }
  4410. .toggle-switch-1 input:checked ~ span{
  4411.   background: #0a58ca;
  4412.   box-shadow: 0 1px 1px #05be0566;
  4413. }
  4414. .toggle-switch-1 span i {
  4415.   position: absolute;
  4416.   width: 30px;
  4417.     height: 18px;
  4418.   aspect-ratio: 1;
  4419.   background: #fff;
  4420.   border-radius: 10px;
  4421.   left: 4px;
  4422.   top: 3px;
  4423. }
  4424. .toggle-switch-1 span i:before {
  4425.   content: "Non";
  4426.   position: absolute;
  4427.   top: 50%;
  4428.   left: 50%;
  4429.   transform: translate(-50%, -50%);
  4430.   color: #333;
  4431.   text-transform: uppercase;
  4432.   font-weight: 900;
  4433.   font-style: normal;
  4434.   font-size: 8px;
  4435.   transition: 0.5s;
  4436. }
  4437. .toggle-switch-1 input:checked ~ span i{
  4438.   left: 36px;
  4439. }
  4440. .toggle-switch-1 input:checked ~ span i:before{
  4441.   content: "Oui";
  4442.   color: #007FFF;
  4443. }
  4444. /*-----------End checkbox----------------*/
  4446. /*------------------ Begin Stepper Souscriptio ---------------------*/
  4448. .stepper {
  4449.   clear: left;
  4450.   float: left;
  4451.   margin: 20px;
  4452. }
  4454. .stepper .step {
  4455.   float: left;
  4456.   font-size: 15px;
  4457.   margin: 0 12px;
  4458. }
  4460. .stepper .divider1 {
  4461.   border-bottom: 1px solid #cfcfcf;
  4462.   float: left;
  4463.   height: 12px;
  4464.   margin: 0 12px;
  4465.   width: 45px;
  4466. }
  4468. .stepper .circle {
  4469.   background: #cfcfcf;
  4470.   border-radius: 50%;
  4471.   color: #ffffff;
  4472.   float: left;
  4473.   font-size: 13px;
  4474.   height: 24px;
  4475.   line-height: 24px;
  4476.   text-align: center;
  4477.   width: 24px;
  4478. }
  4480. .stepper .label {
  4481.   color: #cfcfcf;
  4482.   float: left;
  4483.   line-height: 24px;
  4484.   margin-left: 8px;
  4485. }
  4487. .stepper .active .circle {
  4488.   background: #ef7521;
  4489. }
  4491. .stepper .active .label {
  4492.   color: #5b5b5b;
  4493.   font-weight: 400;
  4494. }
  4496. .stepper .complete .circle {
  4497.   background: #ef7521;
  4498. }
  4500. .stepper .complete .icon {
  4501.   font-size: 30px;
  4502.   position: relative;
  4503.   top: -3px;
  4504. }
  4506. .stepper .complete .label {
  4507.   color: #5b5b5b;
  4508.   font-weight: 400;
  4509. }
  4510. /*-----------------End stepper souscription ------------------*/
  4512. .animate__animated.animate__fadeIn {
  4513.   --animate-duration: 0.3s;
  4514. }
  4517. .main_card {
  4518.   transform: scale(0.9);
  4519.   border-radius: 10px;
  4520.   background: #fff;
  4521. }
  4522. .main_card h3 {
  4523.   font-family: Mulish;
  4524.   font-style: normal;
  4525.   font-weight: bold;
  4526.   font-size: 22px;
  4527.   line-height: 28px;
  4528.   /* identical to box height */
  4529.   color: #1A1B38;
  4530. }
  4531. .main_card .select-cards {
  4532.   height: auto;
  4533. }
  4534. .main_card .select-cards .select {
  4535.   width: 100%;
  4536.   height: 95px;
  4537.   background: #FFFFFF;
  4538.   border: 1px solid #EAEAEA;
  4539.   border-radius: 5px;
  4540.   margin-bottom: 10px;
  4541.   display: flex;
  4542.   align-items: center;
  4543.   cursor: pointer;
  4544.   transition: 0.3s;
  4545. }
  4546. .main_card .select-cards .select .titles {
  4547.   margin-left: 15px;
  4548. }
  4549. .main_card .select-cards .select .titles h4 {
  4550.   font-family: Mulish;
  4551.   font-style: normal;
  4552.   font-weight: bold;
  4553.   font-size: 16px;
  4554.   line-height: 20px;
  4555.   /* identical to box height */
  4556.   color: #1A1B38;
  4557. }
  4558. .main_card .select-cards .select .titles h5 {
  4559.   font-family: Mulish;
  4560.   font-style: normal;
  4561.   font-weight: normal;
  4562.   font-size: 16px;
  4563.   line-height: 20px;
  4564.   /* identical to box height */
  4565.   color: #1A1B38;
  4566.   margin-top: 1px;
  4567. }
  4568. .main_card .select-cards .select .check-box {
  4569.   width: 33px;
  4570.   height: 33px;
  4571.   background: #FFFFFF;
  4572.   border: 2px solid #BCBCBC;
  4573.   border-radius: 50%;
  4574.   margin-left: 25px;
  4575.   display: flex;
  4576.   align-items: center;
  4577.   justify-content: center;
  4578.   transition: 0.3s;
  4579. }
  4580. .main_card .select-cards .select .check-box .check-dot {
  4581.   width: 15px;
  4582.   height: 15px;
  4583.   background: #fff;
  4584.   border-radius: 50%;
  4585.   transition: 0.3s;
  4586.   transform: scale(0);
  4587. }
  4588. .main_card .select-cards .select[data-selected=true] {
  4589.   border-color: #000000;
  4590. }
  4591. .main_card .select-cards .select[data-selected=true] .check-box {
  4592.   background: #000000;
  4593.   border-color: #000;
  4594.   background: #1d3cc6;
  4595.   border-color: #1d3cc6;
  4596. }
  4597. .main_card .select-cards .select[data-selected=true] .check-box .check-dot {
  4598.   width: 15px;
  4599.   height: 15px;
  4600.   transform: scale(1);
  4601. }
  4602. .main_card .select-btn {
  4603.   height: 95px;
  4604.   background: #1d3cc6;
  4605.   border-radius: 5px;
  4606.   font-family: Mulish;
  4607.   font-style: normal;
  4608.   font-weight: bold;
  4609.   font-size: 18px;
  4610.   line-height: 23px;
  4611.   cursor: pointer;
  4612.   /* identical to box height */
  4613.   text-align: center;
  4614.   color: #FFFFFF;
  4615.   display: flex;
  4616.   align-items: center;
  4617.   justify-content: center;
  4618. }
  4619. .stepper-item-1{
  4620.   display: block;
  4621. }
  4622. .stepper-item-2{
  4623.   display: none;
  4624. }
  4626. </style>
  4627. {% endblock %}
  4629. </head>
  4630. <body class="js">
  4632.   <!-- Preloader -->
  4633.     <div class="preloader">
  4634.         <div class="preloader-inner">
  4635.             <div class="preloader-icon">
  4636.                 <span></span>
  4637.                 <span></span>
  4638.             </div>
  4639.         </div>
  4640.     </div>
  4642.   {{ render(controller("App\\Controller\\General\\Template\\MenuController:menubare", {'position': 'accueil', 'menudisplay': menudisplay|default(1) })) }}
  4644.   {% block body %}
  4646.   {% endblock %}
  4648.   
  4649. <div id="sppmodal-container-newsletter" class="sppmodal-container">
  4650.     <div class="sppmodal-background">
  4651.         <div class="sppmodal">
  4652.             <div class="row">
  4653.                 <div class="col-md-12">
  4654.                     <a href="#!" class="pull-right close-sppmodal-newsletter" data-original-title="" title="">
  4655.                         <img src="{{ asset('template/images/close.svg') }}" class="img-size-15" style="height: 15px;">
  4656.                     </a>
  4657.                     <h3 class="text-left" style="font-family: OpenSans-Bold; color: #333; padding: 0px;margin: 0px;">Services {{ site }}</h3>
  4658.                 </div>
  4659.                 <div class="col-md-12">
  4660.                     <hr style="margin-bottom: 0px;">
  4661.                 </div>
  4663.         <div class="col-md-12">
  4664.           <div class="stepper">
  4665.             <div class="step complete">
  4666.               <div class="circle"> 
  4667.                 <div class="bi bi-check2"></div>
  4668.               </div>
  4669.               <div class="label">Etape 1</div>
  4670.             </div>
  4671.             <div class="divider1"></div>
  4672.             <div class="step active" id="stepper-indicator-1">
  4673.               <div class="circle">2</div>
  4674.               <div class="label">Etape 2</div>
  4675.             </div>
  4676.             <div class="divider1"></div>
  4677.             <div class="step" id="stepper-indicator-2">
  4678.               <div class="circle">3</div>
  4679.               <div class="label">Etape 3</div>
  4680.             </div>
  4681.           </div>
  4682.         </div>
  4684.                 <div class="col-md-12">
  4685.           <div class="stepper-item-1">
  4686.                     <div class="row text-left">
  4687.                         <div class="col-sm-12 offset-md-1 col-md-10">
  4689.                 <div class="main_card">
  4690.   
  4691.                   <h3> Chosissez un service</h3>
  4692.                   
  4693.                   <div class="select-cards">
  4694.                     
  4695.                       <div class="select" id="item-discovery-online" value="discovery">
  4696.                         <div class="check-box"><div class="check-dot"></div></div>
  4697.                         <div class="titles">
  4698.                           <h4>Souscription <strong>DISCOVERY Online</strong></h4>
  4699.                           <h5>3000 {{ devise }}/mois</h5>
  4700.                         </div>
  4701.                       </div>
  4702.   
  4703.                       <div class="select" id="item-professional-desktop" data-selected="true" value="professional">
  4704.                         <div class="check-box"><div class="check-dot"></div></div>
  4705.                         <div class="titles">
  4706.                           <h4>Souscription <strong>PROFESSIONAL Desktop</strong></h4>
  4707.                         <h5>12 500 {{ devise }}/mois</h5>
  4708.                         </div>
  4709.                       </div>
  4710.                       
  4711.                       <div class="select" id="item-premium-desktop" value="premium">
  4712.                         <div class="check-box"><div class="check-dot"></div></div>
  4713.                         <div class="titles">
  4714.                           
  4715.                         <h4>Souscription <strong>PREMIUM Desktop</strong></h4>
  4716.                         <h5>22 500 {{ devise }}/mois</h5>
  4717.                         </div>
  4718.                       </div>
  4719.   
  4720.                       <!-- div class="select" id="item-contact" value="contact">
  4721.                         <div class="check-box"><div class="check-dot"></div></div>
  4722.                         <div class="titles">
  4723.                           
  4724.                         <h4>Contacter le service client</h4>
  4725.                         <h5>Appel, Email & Whatsapp</h5>
  4726.                         </div>
  4727.                       </div -->
  4728.   
  4729.                   </div>
  4730.                   
  4731.                 </div>
  4732.               </div>
  4733.             </div>
  4735.             <div class="row" style="margin-top: 120px;">
  4736.               <div class="col-md-6 col-6 text-left">
  4737.                 <button type="button" class="button-hover" name="button" disabled=""><span class="fa fa-arrow-left"></span> Précédent </button>
  4738.               </div>
  4739.               <div class="col-md-6 col-6 text-right">
  4740.                 <button type="button" class="button-hover" id="submit-service-choice" name="button"> Enregistrer <span class="fa fa-arrow-right"></span></button>
  4741.               </div>
  4742.             </div>
  4743.           </div>
  4746.               <div class="stepper-item-2">
  4747.                 <div class="row text-left">
  4748.                 
  4749.                 <div class="col-sm-12 offset-md-1 col-md-10">
  4750.                             <form method="post" action="#!" class="formmodal_inscription_newletter" style="color: #333;">
  4751.                   <div id="sommaire_commande">
  4752.                     <h2>Souscription Offre Premium - 22 500 XAF/mois</h2>
  4753.                     <input type="hidden" name="offreClient" id=""/>
  4754.                   </div>
  4755.                 <div class="row" style="margin: 0px -15px;">
  4756.                     <div class="col-md-6">
  4757.                       <div class="form-group">
  4758.                         <input type="text" class="form-control" name="usernom" id="prenom_client" placeholder="Nom" required="">
  4759.                       </div>
  4760.                     </div>
  4761.                     <div  class="col-md-6">
  4762.                       <div class="form-group">
  4763.                         <input type="text" class="form-control" name="userprenom" id="prenom_client" placeholder="Prenom" required="">
  4764.                       </div>
  4765.                     </div>
  4766.                 </div>
  4768.                 <div class="form-group">
  4769.                   <input type="email" class="form-control" name="email" id="email_client" placeholder="Votre E-mail" required="">
  4770.                 </div>
  4772.                 <div class="form-group">
  4773.                   <label for="number_client">Téléphone avec code indicatif: ex: +237 658 45 52 41</label>
  4774.                   <input type="text" class="form-control" name="number" id="number_client" placeholder="Numéro de Téléphone" required="">
  4775.                 </div>
  4777.                 <div class="form-group">
  4778.                   <label for="typecontact_client">Comment souhaitez-vous être contacter</label>
  4779.                   <select class="form-control" name="typeContact"  id="typecontact_client" style="width: 100%;">
  4780.                     <option value="appelonly">Appel Uniquement</option>
  4781.                     <option value="emailonly">Email Uniquement</option>
  4782.                   </select>
  4783.                 </div>
  4785.                 <div class="form-group">
  4786.                   <label for="calldate_client">Quand souhaitez vous être contactez ?</label>
  4787.                   <div class="row" style="margin: 0px -15px;">
  4788.                     <div class="col-md-6">
  4789.                       <input type="date" class="form-control" name="calldate" id="calldate_client" required="">
  4790.                     </div>
  4791.                     <div class="col-md-6">
  4792.                       <input type="time" class="form-control" name="calltime" id="calldate_client" required="">
  4793.                     </div>
  4794.                   </div>
  4795.                 </div>
  4797.                 <div class="form-group mb-3">
  4798.                   <textarea class="form-control" name="website" rows="3" placeholder="Que pouvons nous faire pour vous ?"></textarea>
  4799.                 </div>
  4801.                 <!--div class="form-group text-center">
  4802.                   <button class="btn-home btn-4 btn-mulberry">
  4803.                     C'est parti
  4804.                   </button>
  4805.                 </div -->
  4807.                 <div class="row">
  4808.                   <div class="col-md-6 col-6 text-left" style="padding: 0px;">
  4809.                     <button type="button" class="button-hover" name="button" onclick="backOffertList()"><span class="fa fa-arrow-left"></span> Précédent </button>
  4810.                   </div>
  4811.                   <div class="col-md-6 col-6 text-right" style="padding: 0px;">
  4812.                     <button type="submit" class="button-hover" id="submit-service-choice" name="button"> Suivant <span class="fa fa-arrow-right"></span></button>
  4813.                   </div>
  4814.                 </div>
  4815.                         
  4816.                         </form>
  4818.                         </div>
  4819.                         <div class="clearfix"></div>
  4820.                     </div>
  4822.                 </div>
  4823.       </div>
  4825.                 <div style="col-md-12">
  4826.                     <div class="text-center form-alert-top" style="">
  4827.                         <img src="{{ asset('template/images/images-newsletter.jpg') }}" alt="" style="height: 60px;">
  4829.                     </div>
  4830.                 </div>
  4831.             </div>
  4832.         </div>
  4833.     </div>
  4834. </div>
  4837.     <div class="content-alert-action-market-user" value="0" name="0" style="display: none;"></div>
  4839.     <div class="panel-result-action-market-user" style="display: none; position: fixed; z-index: 90000; width: 100%; text-align: center; top: 40%;">
  4840.         <span style="display: inline-block; width: 80px; height: 80px; background: transparent; text-align: center; padding-top: 25px;">
  4841.             <div data-w-id="bdd6bb74-6a76-cc2b-93ad-7ae71601b802" data-animation-type="lottie" data-src="{{ asset('template/js/dataloader.json') }}" data-loop="1" data-direction="1" data-autoplay="1" data-is-ix2-target="0" data-renderer="svg" data-default-duration="26.2" data-duration="0" style="height: 100px;"></div>
  4842.         </span>
  4843.     </div>
  4845.     {{ render(controller("App\\Controller\\General\\Template\\MenuController:cardmenu")) }}
  4847.   <div class="modal fade" data-backdrop="true" id="modal-souscription-offert">
  4848.     <div class="modal-dialog modal-lg" style="border-radius: 10px;">
  4849.     <div class="modal-content" style="border-radius: 10px; margin: 0px;">
  4850.     
  4851.   {{ render(controller("App\\Controller\\General\\Template\\MenuController:headermodal", {'title': ''})) }}
  4852.         
  4853.         <div class="modal-body" style="background: #f5f7f8!important; padding: 15px 0px;">
  4854.             <div class="row">
  4855.               <div class="col-md-12">
  4856.                 <div class="wait-chargement-content-module" style="text-align: center; padding-top: 30px;">
  4857.                 <h5>
  4858.                     Patientez un moment pendant le chargement des données</br>
  4859.                     <img src="{{ asset('template/images/loader1.gif') }}" alt="image" style="height: 60px; width: 60px;">
  4860.         </h5>
  4861.                 </div>
  4863.                 <div class="content-module-loading" style="display: none;">
  4865.                 </div>
  4866.               </div>
  4867.             </div>
  4868.         </div>
  4869.         <div class="modal-footer color-top" style="text-align: right; border-top: 4px solid #37c0fb; display: block;">
  4870.             {% include "Theme/General/Template/Menu/social.html.twig" %}
  4871.         </div>
  4872.     </div>
  4873.     </div>
  4874.     </div>
  4876. <aside>
  4877.   <div class="outer-close toggle-overlay">
  4878.     <a class="close-nav text-center open-scroll-bar-body" style="background: #fff; color: #333; display: inline-block; height: 40px; width: 40px; border-radius: 20px; padding-top: 7px;"><i class="fa fa-arrow-left"></i></a>
  4881.   <div style="position: fixed; z-index: 3; bottom: 0px; width: 100%; left: 0px; background: #fff; padding: 7px 10px;">
  4882.     <div style="font-size: 12px;">© 2014 - {{ "now"|date('Y') }} - {{ site }}</div>
  4883.   </div>
  4884.   </div>
  4886.   <div class="row content-article-tech">
  4888.   </div>
  4889. </aside>
  4891. {{ render(controller("App\\Controller\\General\\Template\\MenuController:footer", {'position': 'accueil'})) }}
  4894. <!-- Jquery -->
  4895. <script src="{{ asset('template/js/jquery-migrate-3.0.0.js') }}"></script>
  4897. <script src="{{ asset('template/js/jquery-ui.min.js') }}"></script>
  4898. <!-- Popper JS -->
  4899. <script src="{{ asset('template/js/popper.min.js') }}"></script>
  4900. <!-- Bootstrap JS -->
  4901. <script src="{{ asset('template/js/bootstrap.min.js') }}"></script>
  4903. <!-- Slicknav JS -->
  4904. <script src="{{ asset('template/js/slicknav.min.js') }}"></script>
  4906. <!-- Magnific Popup JS -->
  4907. <script src="{{ asset('template/js/magnific-popup.js') }}"></script>
  4908. <!-- Waypoints JS -->
  4909. <script src="{{ asset('template/js/waypoints.min.js') }}"></script>
  4910. <!-- Countdown JS -->
  4911. <script src="{{ asset('template/js/finalcountdown.min.js') }}"></script>
  4912. <!-- Nice Select JS -->
  4913. <script src="{{ asset('template/js/nicesellect.js') }}"></script>
  4914. <!-- Flex Slider JS -->
  4915. <script src="{{ asset('template/js/flex-slider.js') }}"></script>
  4916. <!-- ScrollUp JS -->
  4917. <script src="{{ asset('template/js/scrollup.js') }}"></script>
  4918. <!-- Onepage Nav JS -->
  4919. <script src="{{ asset('template/js/onepage-nav.min.js') }}"></script>
  4920. <!-- Easing JS -->
  4921. <script src="{{ asset('template/js/easing.js') }}"></script>
  4922. <!-- Active JS -->
  4923. <script src="{{ asset('template/js/active.js') }}"></script>
  4924. <script src="{{ asset('autocomplete/js/jquery.auto-complete.js') }}" type="text/javascript"></script>
  4925. {% block srcjavascript %}
  4927. {% endblock %}
  4929. <script type="text/javascript">
  4931. function modalSusccriptionSetting(itemsetting)
  4932. {
  4933.   $('.select-cards .select').attr('data-selected', false);
  4934.   //alert(itemsetting)
  4936.   if(itemsetting == "discovery")
  4937.   {
  4938.     $('#item-discovery-online').attr('data-selected', true);
  4939.     $('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting("'+itemsetting+'")');
  4941.     $("#sommaire_commande h2").html("Souscription Offre Discovery Online - 3000 {{ devise }}/mois");
  4942.     $("#sommaire_commande input").attr("value","discovery");
  4943.   }else if(itemsetting == "professional")
  4944.   {
  4945.     $('#item-professional-desktop').attr('data-selected', true);
  4946.     $('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting("'+itemsetting+'")');
  4948.     $("#sommaire_commande h2").html("Souscription Offre Professional Desktop - 12 500 {{ devise }}/mois");
  4949.     $("#sommaire_commande input").attr("value","professional");
  4951.   }else if(itemsetting == "premium")
  4952.   {
  4953.     $('#item-premium-desktop').attr('data-selected', true);
  4954.     $('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting("'+itemsetting+'")');
  4956.     $("#sommaire_commande h2").html("Souscription Offre Premium Desktop - 12 500 {{ devise }}/mois");
  4957.     $("#sommaire_commande input").attr("value","premium");
  4959.   }else{
  4960.     //$('#item-contact').attr('data-selected', true);
  4961.     //$('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting("'+itemsetting+'")');
  4963.     //$("#sommaire_commande h2").html("Contactez le service client");
  4964.     //$("#sommaire_commande input").attr("value","contact");
  4966.     $('#item-professional-desktop').attr('data-selected', true);
  4967.     $('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting("professional")');
  4969.     $("#sommaire_commande h2").html("Souscription Offre Professional Desktop - 12 500 {{ devise }}/mois");
  4970.     $("#sommaire_commande input").attr("value","professional");
  4971.   }
  4972.   if(itemsetting != "contact")
  4973.   {
  4974.     $(".stepper-item-1").hide();
  4975.     $(".stepper-item-2").show();
  4976.     $("#stepper-indicator-1").removeClass("active");
  4977.     $("#stepper-indicator-2").addClass("active");
  4978.     $("#stepper-indicator-1").addClass("complete");
  4979.   }
  4980. }
  4982. var select_card = document.querySelectorAll(".select");
  4984. var title = document.getElementById("title");
  4985. var price = document.getElementById("price");
  4987. var selected=2;
  4988. var reset = ()=>{
  4989. select_card.forEach((k)=>{
  4990.  k.setAttribute("data-selected", "false");
  4991. })
  4992. }
  4994. select_card.forEach((a,i)=>{
  4995.   a.addEventListener("click",(e)=>{
  4996.      reset();
  4997.    a.setAttribute("data-selected", "true")
  4998.    var itemsetting = a.getAttribute('value');
  4999.    
  5000.    if(itemsetting == "discovery")
  5001.     {
  5002.       $('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting("'+itemsetting+'")');
  5003.     }else if(itemsetting == "professional")
  5004.     {
  5005.       $('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting("'+itemsetting+'")');
  5006.     }else if(itemsetting == "premium")
  5007.     {
  5008.       $('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting("'+itemsetting+'")');
  5009.     }
  5010.     selected=i+1;
  5011.   })
  5012. })
  5014. function backOffertList(){
  5015.   $(".stepper-item-1").show();
  5016.   $(".stepper-item-2").hide();
  5018.   $("#stepper-indicator-1").addClass("active");
  5019.   $("#stepper-indicator-2").removeClass("active");
  5020.   $("#stepper-indicator-1").removeClass("complete");
  5022. };
  5025.     {% block javascript %}
  5027.     {% endblock %}
  5029.     $(function(){
  5030.         $(".dropdown-btn").click(function(){
  5031.            var menu = $(this).find('.dropdown__menu');
  5032.           if (menu) {
  5033.             menu.toggleClass("dropdown__menu--active");
  5034.           }
  5035.         });
  5036.         
  5037.         $("form.update-method-paiement").submit(function(){
  5038.             var email = $(this).find('input').val();
  5039.             if({{ regexmail }}.test(email))
  5040.             {
  5041.                 var height = ($(window).height() + $(window).scrollTop());
  5042.                 var width = $(window).width() + 100;
  5043.                 var scrolltop = $(window).scrollTop();
  5044.                 $('.panel-result-action-market-user').show();
  5045.                 $('.content-alert-action-market-user').show();
  5046.                 $('.content-alert-action-market-user').html('<div style="position: fixed; top: 0px; margin-bottom: '+scrolltop+'px; left: 0px; z-index: 9000; width: '+width+'px; height: '+height+'px; background: rgba(0,0,0,0.5);"></div>');
  5049.                 $.post('{{ path('users_user_update_newsletter_list') }}', { email: email }, function(data){
  5050.                   if(data == 0)
  5051.                   {
  5052.             resetNotif();
  5053.             alertify.alert('<div style="margin-bottom: 20px;"><span class="fa fa-frown-o"></span> Echec, Les données envoyées n\'ont pas été reçu</div>');
  5054.                   }else if(data == 2){
  5055.                       resetNotif();
  5056.                       alertify.alert('<div style="margin-bottom: 20px;"><span class="fa fa-frown-o"></span> Echec, Cette adresse existe déjà !</div>');
  5057.                   }else if(data == 3){
  5058.                       resetNotif();
  5059.                       alertify.alert('<div style="margin-bottom: 20px;"><span class="fa fa-frown-o"></span> Echec, L\'adresse Email entrée est incorete !</div>');
  5060.                   }else{
  5061.             resetNotif();
  5062.             alertify.alert('<div style="margin-bottom: 20px;"><span class="fa fa-check"></span> Opération effectuée avec succès !</div><div>'+data+'</div>');
  5063.                   }
  5064.                   $('.panel-result-action-market-user').hide();
  5065.                   $('.content-alert-action-market-user').hide();
  5066.                 });
  5067.                 
  5068.             }else{
  5069.                 resetNotif();
  5070.                 alertify.alert('<div style="margin-bottom: 50px; text-decoration: underline;"><span class="fa fa-frown-o"></span> Echec, L\'adresse Email entrée est incorete.</div>');
  5071.             }
  5072.             
  5073.             return false;
  5074.         });
  5077.     $("form.formmodal_inscription_newletter").submit(function(){
  5078.             var usernom = $(this).find('input[name="usernom"]').val();
  5079.       var userprenom = $(this).find('input[name="userprenom"]').val();
  5080.       var email = $(this).find('input[name="email"]').val();
  5081.       var website = $(this).find('textarea[name="website"]').val();
  5082.       var number = $(this).find('input[name="number"]').val();
  5083.       var offreClient = $(this).find('input[name="offreClient"]').val();
  5084.       var calldate = $(this).find('input[name="calldate"]').val();
  5085.       var calltime = $(this).find('input[name="calltime"]').val();
  5086.       var typeContact = $(this).find('select[name="typeContact"]').val();
  5088.             if({{ regexmail }}.test(email))
  5089.             {
  5090.                 var height = ($(window).height() + $(window).scrollTop());
  5091.                 var width = $(window).width() + 100;
  5092.                 var scrolltop = $(window).scrollTop();
  5093.                 $('.panel-result-action-market-user').show();
  5094.                 $('.content-alert-action-market-user').show();
  5095.                 $('.content-alert-action-market-user').html('<div style="position: fixed; top: 0px; margin-bottom: '+scrolltop+'px; left: 0px; z-index: 9000; width: '+width+'px; height: '+height+'px; background: rgba(0,0,0,0.5);"></div>');
  5097.                 $.post('{{ path('users_user_update_newsletter_list', {'type': 2}) }}', { usernom: usernom, userprenom: userprenom, email: email, website: website, number: number, offreClient: offreClient, calldate: calldate, calltime: calltime, typeContact: typeContact }, function(data){
  5098.                   if(data == 0)
  5099.                   {
  5100.                     resetNotif();
  5101.                     alertify.alert('<div style="margin-bottom: 20px;"><span class="fa fa-frown-o"></span> Echec, Les données envoyées n\'ont pas été reçu</div>');
  5102.                   }else{
  5103.             resetNotif();
  5104.             alertify.alert('<div style="margin-bottom: 20px;"><span class="fa fa-check"></span> Opération effectuée avec succès !</div>');
  5105.             $('#sppmodal-container-newsletter').addClass('out');
  5106.                   $('body').removeClass('sppmodal-active');
  5107.                   }
  5108.                   $('.panel-result-action-market-user').hide();
  5109.                   $('.content-alert-action-market-user').hide();
  5110.                 });
  5111.                 
  5112.             }else{
  5113.                 resetNotif();
  5114.                 alertify.alert('<div style="margin-bottom: 50px; text-decoration: underline;"><span class="fa fa-frown-o"></span> Echec, L\'adresse Email entrée est incorete.</div>');
  5115.             }
  5116.             
  5117.             return false;
  5118.         });
  5120.         var box = $('.menu-mob');
  5121.         var button = $('.open-menu, .header-menu');
  5122.         button.on('click', function(){
  5123.             box.toggleClass('activebtn');
  5124.         });
  5126.         $("[data-toggle=popover]").popover();
  5129.         var jsonresult =  {{ render(controller("App\\Controller\\Produit\\Produit\\ProduitController:autorechercheproduit", { taille: 10})) }};
  5130.     
  5131.         var j = 0;
  5132.         var searchchoices = [];
  5133.         for(var n in jsonresult){
  5134.             nom = jsonresult[n].nom;
  5135.             drapeau = jsonresult[n].drapeau;
  5136.             slogan = jsonresult[n].slogan;
  5137.             relation = jsonresult[n].relation;
  5138.             link = jsonresult[n].link;
  5139.             num = nom+":"+drapeau;
  5140.             courantelem = [nom,drapeau,slogan,relation,link];
  5141.             searchchoices[j] = courantelem;
  5142.             j++;
  5143.         }
  5145.         $('.recherche-plateforme').autoComplete({
  5146.             minChars: 0,
  5147.             source: function(term, suggest){
  5148.                 term = term.toLowerCase();
  5149.                 var suggestions = [];
  5150.                 for (i=0;i< searchchoices.length;i++)
  5151.                     if (~(searchchoices[i][0]+' '+searchchoices[i][1]).toLowerCase().indexOf(term)) suggestions.push(searchchoices[i]);
  5152.                 suggest(suggestions);
  5153.             },
  5154.             renderItem: function (item, search){
  5155.                 search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
  5156.                 var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
  5157.                 return '<div class="autocomplete-suggestion" data-langname="'+item[0]+'" data-lang="'+item[1]+'" data-link="'+item[4]+'" data-val="'+search+'" style="border-bottom: 1px solid #CCC; cursor: pointer;"><a href="#!" style="margin: 1px 3px; color: #CCC;"><img src="{{ asset('') }}'+item[1]+'" style="width: 40px; height: 40px; margin-right: 4px; margin-top: 4px;" class="pull-left" > <strong style="color: #333">'+item[0].replace(re, "<b>$1</b>")+'</strong></br><span>'+item[2]+' <span class="pull-right">'+item[3]+'</span></span></a></div>';
  5158.             },
  5159.             onSelect: function(e, term, item){
  5160.                 $('.recherche-plateforme').val(item.data('langname'));
  5161.                 document.location.href= item.data('link');
  5162.             },
  5163.             cache: false
  5164.         });
  5167.         var bloquerfunction = false;
  5168.         function rechercheprojetanduser()
  5169.         {
  5170.         if( bloquerfunction == false && $('.recherche-plateforme').val().length >= 1 )// on vérifier si l'utilisateur a entré plus de 5 caractères
  5171.         {
  5172.           var libre = $('.recherche-plateforme').attr('etat'); // on initialise la variable libre
  5173.           var donnee = $('.recherche-plateforme').val();  //on récupère la donnée
  5174.           if (libre == 0 && donnee != $('.recherche-plateforme').attr('lastresult')){ // on vérifier si la requête précedente est rétournée et que la recherche ne corespnd pas à la dernière effectuée
  5175.           $('.recherche-plateforme').attr('etat',1); // on bloque d'autres recherches
  5176.           $('.recherche-plateforme').attr('lastresult',donnee); // on enregistre la recherche effectuer.
  5177.             secondTimestamp = new Date().getTime();
  5178.             $.ajax({
  5179.                 url : '{{ path('produit_produit_auto_recherche_produits_andprojet_plateforme', {'taille': 300}) }}',
  5180.                 type : 'POST',
  5181.                 data : 'donnee='+ donnee +'&timestamp='+secondTimestamp+'',
  5182.                 dataType : 'json',
  5183.                 success : function(data, statut){
  5184.                       $('.recherche-plateforme').attr('etat',0); // on libère d'autre recherches
  5185.                       jsonresult = data;
  5186.                         j = 0;
  5187.                         searchchoices = [];
  5188.                         for(var n in jsonresult){
  5189.                             nom = jsonresult[n].nom;
  5190.                             drapeau = jsonresult[n].drapeau;
  5191.                             slogan = jsonresult[n].slogan;
  5192.                             relation = jsonresult[n].relation;
  5193.                             link = jsonresult[n].link;
  5194.                             num = nom+":"+drapeau;
  5195.                             courantelem = [nom,drapeau,slogan,relation,link];
  5196.                             searchchoices[j] = courantelem;
  5197.                             j++;
  5198.                         }
  5199.                       setTimeout(function() { rechercheprojetanduser(); }, 100);  // on relance la fonction après 200 ms.
  5200.                 }
  5201.             });
  5203.           }else{
  5204.           setTimeout(function() { rechercheprojetanduser(); }, 100);
  5205.           }
  5206.         }else{
  5207.             setTimeout(function() { rechercheprojetanduser(); }, 100);
  5208.         }
  5209.         }
  5211.         $('.recherche-plateforme').focus(function(){
  5212.             bloquerfunction = false;
  5213.             rechercheprojetanduser();
  5214.         });
  5216.         $('.open-scroll-bar-body').click(function(){
  5217.             $('aside').toggleClass('open');
  5218.             $('.content-article-tech').html('');
  5219.         });
  5221.         $('.overlay-article-market').click(function(){
  5222.           var id = $(this).attr('value');
  5224.           var height = ($(window).height() + $(window).scrollTop());
  5225.           var width = $(window).width() + 100;
  5226.           var scrolltop = $(window).scrollTop();
  5227.           $('.panel-result-action-market-user').show();
  5228.           $('.content-alert-action-market-user').show();
  5229.           $('.content-alert-action-market-user').html('<div style="position: fixed; top: 0px; margin-bottom: '+scrolltop+'px; left: 0px; z-index: 1000; width: '+width+'px; height: '+height+'px; background: rgba(0,0,0,0.5);"></div>');
  5231.           $.post('{{ path('produit_service_detail_article_support') }}',{ id: id }, function(data){
  5232.               if(data != 0)
  5233.               {
  5234.                   $('.panel-result-action-market-user').hide();
  5235.                   $('.content-alert-action-market-user').hide();
  5237.                   $('.content-article-tech').html(data);
  5238.                   $('aside').toggleClass('open');
  5239.               }else{
  5240.                   resetNotif();
  5241.                   alertify.alert("Echec, Une erreur a été rencontrée lors de l\'enregistrement de la commande.");
  5242.                   $('.panel-result-action-market-user').hide();
  5243.                   $('.content-alert-action-market-user').hide();
  5244.               }
  5245.           });
  5246.         });
  5248.     });
  5249. </script>
  5252. <!-- Go to www.addthis.com/dashboard to customize your tools -->
  5253. <!--script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-595f8e9fdd98b073"></script-->
  5254. <!--Start of Tawk.to Script-->
  5255. <script type="text/javascript">
  5256.     var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
  5257.     (function(){
  5258.     var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
  5259.     s1.async=true;
  5260.     s1.src='https://embed.tawk.to/5f037606760b2b560e6fd915/default';
  5261.     s1.charset='UTF-8';
  5262.     s1.setAttribute('crossorigin','*');
  5263.     s0.parentNode.insertBefore(s1,s0);
  5264.     })();
  5265. </script>
  5266. <!--End of Tawk.to Script-->
  5267. </body>
  5268. </html>