var/cache/dev/twig/bd/bd7b7c52b36c385c5fac70e04e42c535dc8ef3e3e1ad0adb1b0b6461dfc98041.php line 578

Open in your IDE?
  1. <?php
  3. use Twig\Environment;
  4. use Twig\Error\LoaderError;
  5. use Twig\Error\RuntimeError;
  6. use Twig\Extension\SandboxExtension;
  7. use Twig\Markup;
  8. use Twig\Sandbox\SecurityError;
  9. use Twig\Sandbox\SecurityNotAllowedTagError;
  10. use Twig\Sandbox\SecurityNotAllowedFilterError;
  11. use Twig\Sandbox\SecurityNotAllowedFunctionError;
  12. use Twig\Source;
  13. use Twig\Template;
  15. /* Theme/layoutbase.html.twig */
  16. class __TwigTemplate_acdf32280fb65624570c2053442cb82f143b13a217231594398d160b544c95f8 extends Template
  17. {
  18.     private $source;
  19.     private $macros = [];
  21.     public function __construct(Environment $env)
  22.     {
  23.         parent::__construct($env);
  25.         $this->source = $this->getSourceContext();
  27.         $this->parent = false;
  29.         $this->blocks = [
  30.             'meta' => [$this, 'block_meta'],
  31.             'title' => [$this, 'block_title'],
  32.             'stylesheets' => [$this, 'block_stylesheets'],
  33.             'body' => [$this, 'block_body'],
  34.             'srcjavascript' => [$this, 'block_srcjavascript'],
  35.             'javascript' => [$this, 'block_javascript'],
  36.         ];
  37.     }
  39.     protected function doDisplay(array $context, array $blocks = [])
  40.     {
  41.         $macros = $this->macros;
  42.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  43.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Theme/layoutbase.html.twig"));
  45.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  46.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "Theme/layoutbase.html.twig"));
  48.         // line 1
  49.         echo "<!DOCTYPE HTML>
  50. <html>
  51. <head>
  52.   <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"/>
  53.   <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no\"/>
  54.   <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"/>
  55.   <meta name=\"msapplication-tap-highlight\" content=\"no\"/>
  56.   ";
  57.         // line 8
  58.         echo $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment(Symfony\Bridge\Twig\Extension\HttpKernelExtension::controller("App\\Controller\\General\\Template\\MenuController:relicon"));
  59.         echo "
  60.   ";
  61.         // line 9
  62.         $this->displayBlock('meta', $context, $blocks);
  63.         // line 10
  64.         echo "
  65.   <title>
  66.     ";
  67.         // line 12
  68.         $this->displayBlock('title', $context, $blocks);
  69.         // line 15
  70.         echo "  </title>
  72.   ";
  73.         // line 17
  74.         $this->displayBlock('stylesheets', $context, $blocks);
  75.         // line 4628
  76.         echo "
  77. </head>
  78. <body class=\"js\">
  80.   <!-- Preloader -->
  81. \t<div class=\"preloader\">
  82. \t\t<div class=\"preloader-inner\">
  83. \t\t\t<div class=\"preloader-icon\">
  84. \t\t\t\t<span></span>
  85. \t\t\t\t<span></span>
  86. \t\t\t</div>
  87. \t\t</div>
  88. \t</div>
  90.   ";
  91.         // line 4642
  92.         echo $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment(Symfony\Bridge\Twig\Extension\HttpKernelExtension::controller("App\\Controller\\General\\Template\\MenuController:menubare", ["position" => "accueil", "menudisplay" => ((array_key_exists("menudisplay", $context)) ? (_twig_default_filter((isset($context["menudisplay"]) || array_key_exists("menudisplay", $context) ? $context["menudisplay"] : (function () { throw new RuntimeError('Variable "menudisplay" does not exist.', 4642, $this->source); })()), 1)) : (1))]));
  93.         echo "
  95.   ";
  96.         // line 4644
  97.         $this->displayBlock('body', $context, $blocks);
  98.         // line 4647
  99.         echo "
  100.   
  101. <div id=\"sppmodal-container-newsletter\" class=\"sppmodal-container\">
  102. \t<div class=\"sppmodal-background\">
  103. \t\t<div class=\"sppmodal\">
  104. \t\t\t<div class=\"row\">
  105. \t\t\t\t<div class=\"col-md-12\">
  106. \t\t\t\t\t<a href=\"#!\" class=\"pull-right close-sppmodal-newsletter\" data-original-title=\"\" title=\"\">
  107. \t\t\t\t\t\t<img src=\"";
  108.         // line 4655
  109.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/images/close.svg"), "html", null, true);
  110.         echo "\" class=\"img-size-15\" style=\"height: 15px;\">
  111. \t\t\t\t\t</a>
  112. \t\t\t\t\t<h3 class=\"text-left\" style=\"font-family: OpenSans-Bold; color: #333; padding: 0px;margin: 0px;\">Services ";
  113.         // line 4657
  114.         echo twig_escape_filter($this->env, (isset($context["site"]) || array_key_exists("site", $context) ? $context["site"] : (function () { throw new RuntimeError('Variable "site" does not exist.', 4657, $this->source); })()), "html", null, true);
  115.         echo "</h3>
  116. \t\t\t\t</div>
  117. \t\t\t\t<div class=\"col-md-12\">
  118. \t\t\t\t\t<hr style=\"margin-bottom: 0px;\">
  119. \t\t\t\t</div>
  121.         <div class=\"col-md-12\">
  122.           <div class=\"stepper\">
  123.             <div class=\"step complete\">
  124.               <div class=\"circle\"> 
  125.                 <div class=\"bi bi-check2\"></div>
  126.               </div>
  127.               <div class=\"label\">Etape 1</div>
  128.             </div>
  129.             <div class=\"divider1\"></div>
  130.             <div class=\"step active\" id=\"stepper-indicator-1\">
  131.               <div class=\"circle\">2</div>
  132.               <div class=\"label\">Etape 2</div>
  133.             </div>
  134.             <div class=\"divider1\"></div>
  135.             <div class=\"step\" id=\"stepper-indicator-2\">
  136.               <div class=\"circle\">3</div>
  137.               <div class=\"label\">Etape 3</div>
  138.             </div>
  139.           </div>
  140.         </div>
  142. \t\t\t\t<div class=\"col-md-12\">
  143.           <div class=\"stepper-item-1\">
  144. \t\t\t\t\t<div class=\"row text-left\">
  145. \t\t\t\t\t\t<div class=\"col-sm-12 offset-md-1 col-md-10\">
  147.                 <div class=\"main_card\">
  148.   
  149.                   <h3> Chosissez un service</h3>
  150.                   
  151.                   <div class=\"select-cards\">
  152.                     
  153.                       <div class=\"select\" id=\"item-discovery-online\" value=\"discovery\">
  154.                         <div class=\"check-box\"><div class=\"check-dot\"></div></div>
  155.                         <div class=\"titles\">
  156.                           <h4>Souscription <strong>DISCOVERY Online</strong></h4>
  157.                           <h5>3000 ";
  158.         // line 4699
  159.         echo twig_escape_filter($this->env, (isset($context["devise"]) || array_key_exists("devise", $context) ? $context["devise"] : (function () { throw new RuntimeError('Variable "devise" does not exist.', 4699, $this->source); })()), "html", null, true);
  160.         echo "/mois</h5>
  161.                         </div>
  162.                       </div>
  163.   
  164.                       <div class=\"select\" id=\"item-professional-desktop\" data-selected=\"true\" value=\"professional\">
  165.                         <div class=\"check-box\"><div class=\"check-dot\"></div></div>
  166.                         <div class=\"titles\">
  167.                           <h4>Souscription <strong>PROFESSIONAL Desktop</strong></h4>
  168.                         <h5>12 500 ";
  169.         // line 4707
  170.         echo twig_escape_filter($this->env, (isset($context["devise"]) || array_key_exists("devise", $context) ? $context["devise"] : (function () { throw new RuntimeError('Variable "devise" does not exist.', 4707, $this->source); })()), "html", null, true);
  171.         echo "/mois</h5>
  172.                         </div>
  173.                       </div>
  174.                       
  175.                       <div class=\"select\" id=\"item-premium-desktop\" value=\"premium\">
  176.                         <div class=\"check-box\"><div class=\"check-dot\"></div></div>
  177.                         <div class=\"titles\">
  178.                           
  179.                         <h4>Souscription <strong>PREMIUM Desktop</strong></h4>
  180.                         <h5>22 500 ";
  181.         // line 4716
  182.         echo twig_escape_filter($this->env, (isset($context["devise"]) || array_key_exists("devise", $context) ? $context["devise"] : (function () { throw new RuntimeError('Variable "devise" does not exist.', 4716, $this->source); })()), "html", null, true);
  183.         echo "/mois</h5>
  184.                         </div>
  185.                       </div>
  186.   
  187.                       <!-- div class=\"select\" id=\"item-contact\" value=\"contact\">
  188.                         <div class=\"check-box\"><div class=\"check-dot\"></div></div>
  189.                         <div class=\"titles\">
  190.                           
  191.                         <h4>Contacter le service client</h4>
  192.                         <h5>Appel, Email & Whatsapp</h5>
  193.                         </div>
  194.                       </div -->
  195.   
  196.                   </div>
  197.                   
  198.                 </div>
  199.               </div>
  200.             </div>
  202.             <div class=\"row\" style=\"margin-top: 120px;\">
  203.               <div class=\"col-md-6 col-6 text-left\">
  204.                 <button type=\"button\" class=\"button-hover\" name=\"button\" disabled=\"\"><span class=\"fa fa-arrow-left\"></span> Précédent </button>
  205.               </div>
  206.               <div class=\"col-md-6 col-6 text-right\">
  207.                 <button type=\"button\" class=\"button-hover\" id=\"submit-service-choice\" name=\"button\"> Enregistrer <span class=\"fa fa-arrow-right\"></span></button>
  208.               </div>
  209.             </div>
  210.           </div>
  213.               <div class=\"stepper-item-2\">
  214.                 <div class=\"row text-left\">
  215.                 
  216.                 <div class=\"col-sm-12 offset-md-1 col-md-10\">
  217. \t\t\t\t\t\t    <form method=\"post\" action=\"#!\" class=\"formmodal_inscription_newletter\" style=\"color: #333;\">
  218.                   <div id=\"sommaire_commande\">
  219.                     <h2>Souscription Offre Premium - 22 500 XAF/mois</h2>
  220.                     <input type=\"hidden\" name=\"offreClient\" id=\"\"/>
  221.                   </div>
  222.                 <div class=\"row\" style=\"margin: 0px -15px;\">
  223.                     <div class=\"col-md-6\">
  224.                       <div class=\"form-group\">
  225.                         <input type=\"text\" class=\"form-control\" name=\"usernom\" id=\"prenom_client\" placeholder=\"Nom\" required=\"\">
  226.                       </div>
  227.                     </div>
  228.                     <div  class=\"col-md-6\">
  229.                       <div class=\"form-group\">
  230.                         <input type=\"text\" class=\"form-control\" name=\"userprenom\" id=\"prenom_client\" placeholder=\"Prenom\" required=\"\">
  231.                       </div>
  232.                     </div>
  233.                 </div>
  235.                 <div class=\"form-group\">
  236.                   <input type=\"email\" class=\"form-control\" name=\"email\" id=\"email_client\" placeholder=\"Votre E-mail\" required=\"\">
  237.                 </div>
  239.                 <div class=\"form-group\">
  240.                   <label for=\"number_client\">Téléphone avec code indicatif: ex: +237 658 45 52 41</label>
  241.                   <input type=\"text\" class=\"form-control\" name=\"number\" id=\"number_client\" placeholder=\"Numéro de Téléphone\" required=\"\">
  242.                 </div>
  244.                 <div class=\"form-group\">
  245.                   <label for=\"typecontact_client\">Comment souhaitez-vous être contacter</label>
  246.                   <select class=\"form-control\" name=\"typeContact\"  id=\"typecontact_client\" style=\"width: 100%;\">
  247.                     <option value=\"appelonly\">Appel Uniquement</option>
  248.                     <option value=\"emailonly\">Email Uniquement</option>
  249.                   </select>
  250.                 </div>
  252.                 <div class=\"form-group\">
  253.                   <label for=\"calldate_client\">Quand souhaitez vous être contactez ?</label>
  254.                   <div class=\"row\" style=\"margin: 0px -15px;\">
  255.                     <div class=\"col-md-6\">
  256.                       <input type=\"date\" class=\"form-control\" name=\"calldate\" id=\"calldate_client\" required=\"\">
  257.                     </div>
  258.                     <div class=\"col-md-6\">
  259.                       <input type=\"time\" class=\"form-control\" name=\"calltime\" id=\"calldate_client\" required=\"\">
  260.                     </div>
  261.                   </div>
  262.                 </div>
  264.                 <div class=\"form-group mb-3\">
  265.                   <textarea class=\"form-control\" name=\"website\" rows=\"3\" placeholder=\"Que pouvons nous faire pour vous ?\"></textarea>
  266.                 </div>
  268.                 <!--div class=\"form-group text-center\">
  269.                   <button class=\"btn-home btn-4 btn-mulberry\">
  270.                     C'est parti
  271.                   </button>
  272.                 </div -->
  274.                 <div class=\"row\">
  275.                   <div class=\"col-md-6 col-6 text-left\" style=\"padding: 0px;\">
  276.                     <button type=\"button\" class=\"button-hover\" name=\"button\" onclick=\"backOffertList()\"><span class=\"fa fa-arrow-left\"></span> Précédent </button>
  277.                   </div>
  278.                   <div class=\"col-md-6 col-6 text-right\" style=\"padding: 0px;\">
  279.                     <button type=\"submit\" class=\"button-hover\" id=\"submit-service-choice\" name=\"button\"> Suivant <span class=\"fa fa-arrow-right\"></span></button>
  280.                   </div>
  281.                 </div>
  282. \t\t\t\t\t\t
  283. \t\t\t\t\t\t</form>
  285. \t\t\t\t\t\t</div>
  286. \t\t\t\t\t\t<div class=\"clearfix\"></div>
  287. \t\t\t\t\t</div>
  289. \t\t\t\t</div>
  290.       </div>
  292. \t\t\t\t<div style=\"col-md-12\">
  293. \t\t\t\t\t<div class=\"text-center form-alert-top\" style=\"\">
  294. \t\t\t\t\t\t<img src=\"";
  295.         // line 4827
  296.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/images/images-newsletter.jpg"), "html", null, true);
  297.         echo "\" alt=\"\" style=\"height: 60px;\">
  299. \t\t\t\t\t</div>
  300. \t\t\t\t</div>
  301. \t\t\t</div>
  302. \t\t</div>
  303. \t</div>
  304. </div>
  307. \t<div class=\"content-alert-action-market-user\" value=\"0\" name=\"0\" style=\"display: none;\"></div>
  309. \t<div class=\"panel-result-action-market-user\" style=\"display: none; position: fixed; z-index: 90000; width: 100%; text-align: center; top: 40%;\">
  310. \t\t<span style=\"display: inline-block; width: 80px; height: 80px; background: transparent; text-align: center; padding-top: 25px;\">
  311. \t\t\t<div data-w-id=\"bdd6bb74-6a76-cc2b-93ad-7ae71601b802\" data-animation-type=\"lottie\" data-src=\"";
  312.         // line 4841
  313.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/js/dataloader.json"), "html", null, true);
  314.         echo "\" 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>
  315. \t\t</span>
  316. \t</div>
  318.     ";
  319.         // line 4845
  320.         echo $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment(Symfony\Bridge\Twig\Extension\HttpKernelExtension::controller("App\\Controller\\General\\Template\\MenuController:cardmenu"));
  321.         echo "
  323.   <div class=\"modal fade\" data-backdrop=\"true\" id=\"modal-souscription-offert\">
  324. \t<div class=\"modal-dialog modal-lg\" style=\"border-radius: 10px;\">
  325. \t<div class=\"modal-content\" style=\"border-radius: 10px; margin: 0px;\">
  326. \t
  327.   ";
  328.         // line 4851
  329.         echo $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment(Symfony\Bridge\Twig\Extension\HttpKernelExtension::controller("App\\Controller\\General\\Template\\MenuController:headermodal", ["title" => ""]));
  330.         echo "
  331. \t\t
  332. \t\t<div class=\"modal-body\" style=\"background: #f5f7f8!important; padding: 15px 0px;\">
  333. \t\t\t<div class=\"row\">
  334. \t\t\t  <div class=\"col-md-12\">
  335. \t\t\t\t<div class=\"wait-chargement-content-module\" style=\"text-align: center; padding-top: 30px;\">
  336. \t\t\t\t<h5>
  337. \t\t\t\t\tPatientez un moment pendant le chargement des données</br>
  338. \t\t\t\t\t<img src=\"";
  339.         // line 4859
  340.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/images/loader1.gif"), "html", null, true);
  341.         echo "\" alt=\"image\" style=\"height: 60px; width: 60px;\">
  342.         </h5>
  343. \t\t\t\t</div>
  345. \t\t\t\t<div class=\"content-module-loading\" style=\"display: none;\">
  347. \t\t\t\t</div>
  348. \t\t\t  </div>
  349. \t\t\t</div>
  350. \t\t</div>
  351. \t\t<div class=\"modal-footer color-top\" style=\"text-align: right; border-top: 4px solid #37c0fb; display: block;\">
  352. \t\t\t";
  353.         // line 4870
  354.         $this->loadTemplate("Theme/General/Template/Menu/social.html.twig", "Theme/layoutbase.html.twig", 4870)->display($context);
  355.         // line 4871
  356.         echo "\t\t</div>
  357. \t</div>
  358. \t</div>
  359. \t</div>
  361. <aside>
  362.   <div class=\"outer-close toggle-overlay\">
  363. \t<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>
  366.   <div style=\"position: fixed; z-index: 3; bottom: 0px; width: 100%; left: 0px; background: #fff; padding: 7px 10px;\">
  367. \t<div style=\"font-size: 12px;\">© 2014 - ";
  368.         // line 4882
  369.         echo twig_escape_filter($this->env, twig_date_format_filter($this->env, "now", "Y"), "html", null, true);
  370.         echo " - ";
  371.         echo twig_escape_filter($this->env, (isset($context["site"]) || array_key_exists("site", $context) ? $context["site"] : (function () { throw new RuntimeError('Variable "site" does not exist.', 4882, $this->source); })()), "html", null, true);
  372.         echo "</div>
  373.   </div>
  374.   </div>
  376.   <div class=\"row content-article-tech\">
  378.   </div>
  379. </aside>
  381. ";
  382.         // line 4891
  383.         echo $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment(Symfony\Bridge\Twig\Extension\HttpKernelExtension::controller("App\\Controller\\General\\Template\\MenuController:footer", ["position" => "accueil"]));
  384.         echo "
  387. <!-- Jquery -->
  388. <script src=\"";
  389.         // line 4895
  390.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/js/jquery-migrate-3.0.0.js"), "html", null, true);
  391.         echo "\"></script>
  393. <script src=\"";
  394.         // line 4897
  395.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/js/jquery-ui.min.js"), "html", null, true);
  396.         echo "\"></script>
  397. <!-- Popper JS -->
  398. <script src=\"";
  399.         // line 4899
  400.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/js/popper.min.js"), "html", null, true);
  401.         echo "\"></script>
  402. <!-- Bootstrap JS -->
  403. <script src=\"";
  404.         // line 4901
  405.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/js/bootstrap.min.js"), "html", null, true);
  406.         echo "\"></script>
  408. <!-- Slicknav JS -->
  409. <script src=\"";
  410.         // line 4904
  411.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/js/slicknav.min.js"), "html", null, true);
  412.         echo "\"></script>
  414. <!-- Magnific Popup JS -->
  415. <script src=\"";
  416.         // line 4907
  417.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/js/magnific-popup.js"), "html", null, true);
  418.         echo "\"></script>
  419. <!-- Waypoints JS -->
  420. <script src=\"";
  421.         // line 4909
  422.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/js/waypoints.min.js"), "html", null, true);
  423.         echo "\"></script>
  424. <!-- Countdown JS -->
  425. <script src=\"";
  426.         // line 4911
  427.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/js/finalcountdown.min.js"), "html", null, true);
  428.         echo "\"></script>
  429. <!-- Nice Select JS -->
  430. <script src=\"";
  431.         // line 4913
  432.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/js/nicesellect.js"), "html", null, true);
  433.         echo "\"></script>
  434. <!-- Flex Slider JS -->
  435. <script src=\"";
  436.         // line 4915
  437.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/js/flex-slider.js"), "html", null, true);
  438.         echo "\"></script>
  439. <!-- ScrollUp JS -->
  440. <script src=\"";
  441.         // line 4917
  442.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/js/scrollup.js"), "html", null, true);
  443.         echo "\"></script>
  444. <!-- Onepage Nav JS -->
  445. <script src=\"";
  446.         // line 4919
  447.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/js/onepage-nav.min.js"), "html", null, true);
  448.         echo "\"></script>
  449. <!-- Easing JS -->
  450. <script src=\"";
  451.         // line 4921
  452.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/js/easing.js"), "html", null, true);
  453.         echo "\"></script>
  454. <!-- Active JS -->
  455. <script src=\"";
  456.         // line 4923
  457.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/js/active.js"), "html", null, true);
  458.         echo "\"></script>
  459. <script src=\"";
  460.         // line 4924
  461.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("autocomplete/js/jquery.auto-complete.js"), "html", null, true);
  462.         echo "\" type=\"text/javascript\"></script>
  463. ";
  464.         // line 4925
  465.         $this->displayBlock('srcjavascript', $context, $blocks);
  466.         // line 4928
  467.         echo "
  468. <script type=\"text/javascript\">
  470. function modalSusccriptionSetting(itemsetting)
  471. {
  472.   \$('.select-cards .select').attr('data-selected', false);
  473.   //alert(itemsetting)
  475.   if(itemsetting == \"discovery\")
  476.   {
  477.     \$('#item-discovery-online').attr('data-selected', true);
  478.     \$('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting(\"'+itemsetting+'\")');
  480.     \$(\"#sommaire_commande h2\").html(\"Souscription Offre Discovery Online - 3000 ";
  481.         // line 4941
  482.         echo twig_escape_filter($this->env, (isset($context["devise"]) || array_key_exists("devise", $context) ? $context["devise"] : (function () { throw new RuntimeError('Variable "devise" does not exist.', 4941, $this->source); })()), "html", null, true);
  483.         echo "/mois\");
  484.     \$(\"#sommaire_commande input\").attr(\"value\",\"discovery\");
  485.   }else if(itemsetting == \"professional\")
  486.   {
  487.     \$('#item-professional-desktop').attr('data-selected', true);
  488.     \$('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting(\"'+itemsetting+'\")');
  490.     \$(\"#sommaire_commande h2\").html(\"Souscription Offre Professional Desktop - 12 500 ";
  491.         // line 4948
  492.         echo twig_escape_filter($this->env, (isset($context["devise"]) || array_key_exists("devise", $context) ? $context["devise"] : (function () { throw new RuntimeError('Variable "devise" does not exist.', 4948, $this->source); })()), "html", null, true);
  493.         echo "/mois\");
  494.     \$(\"#sommaire_commande input\").attr(\"value\",\"professional\");
  496.   }else if(itemsetting == \"premium\")
  497.   {
  498.     \$('#item-premium-desktop').attr('data-selected', true);
  499.     \$('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting(\"'+itemsetting+'\")');
  501.     \$(\"#sommaire_commande h2\").html(\"Souscription Offre Premium Desktop - 12 500 ";
  502.         // line 4956
  503.         echo twig_escape_filter($this->env, (isset($context["devise"]) || array_key_exists("devise", $context) ? $context["devise"] : (function () { throw new RuntimeError('Variable "devise" does not exist.', 4956, $this->source); })()), "html", null, true);
  504.         echo "/mois\");
  505.     \$(\"#sommaire_commande input\").attr(\"value\",\"premium\");
  507.   }else{
  508.     //\$('#item-contact').attr('data-selected', true);
  509.     //\$('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting(\"'+itemsetting+'\")');
  511.     //\$(\"#sommaire_commande h2\").html(\"Contactez le service client\");
  512.     //\$(\"#sommaire_commande input\").attr(\"value\",\"contact\");
  514.     \$('#item-professional-desktop').attr('data-selected', true);
  515.     \$('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting(\"professional\")');
  517.     \$(\"#sommaire_commande h2\").html(\"Souscription Offre Professional Desktop - 12 500 ";
  518.         // line 4969
  519.         echo twig_escape_filter($this->env, (isset($context["devise"]) || array_key_exists("devise", $context) ? $context["devise"] : (function () { throw new RuntimeError('Variable "devise" does not exist.', 4969, $this->source); })()), "html", null, true);
  520.         echo "/mois\");
  521.     \$(\"#sommaire_commande input\").attr(\"value\",\"professional\");
  522.   }
  523.   if(itemsetting != \"contact\")
  524.   {
  525.     \$(\".stepper-item-1\").hide();
  526.     \$(\".stepper-item-2\").show();
  527.     \$(\"#stepper-indicator-1\").removeClass(\"active\");
  528.     \$(\"#stepper-indicator-2\").addClass(\"active\");
  529.     \$(\"#stepper-indicator-1\").addClass(\"complete\");
  530.   }
  531. }
  533. var select_card = document.querySelectorAll(\".select\");
  535. var title = document.getElementById(\"title\");
  536. var price = document.getElementById(\"price\");
  538. var selected=2;
  539. var reset = ()=>{
  540. select_card.forEach((k)=>{
  541.  k.setAttribute(\"data-selected\", \"false\");
  542. })
  543. }
  545. select_card.forEach((a,i)=>{
  546.   a.addEventListener(\"click\",(e)=>{
  547.      reset();
  548.    a.setAttribute(\"data-selected\", \"true\")
  549.    var itemsetting = a.getAttribute('value');
  550.    
  551.    if(itemsetting == \"discovery\")
  552.     {
  553.       \$('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting(\"'+itemsetting+'\")');
  554.     }else if(itemsetting == \"professional\")
  555.     {
  556.       \$('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting(\"'+itemsetting+'\")');
  557.     }else if(itemsetting == \"premium\")
  558.     {
  559.       \$('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting(\"'+itemsetting+'\")');
  560.     }
  561.     selected=i+1;
  562.   })
  563. })
  565. function backOffertList(){
  566.   \$(\".stepper-item-1\").show();
  567.   \$(\".stepper-item-2\").hide();
  569.   \$(\"#stepper-indicator-1\").addClass(\"active\");
  570.   \$(\"#stepper-indicator-2\").removeClass(\"active\");
  571.   \$(\"#stepper-indicator-1\").removeClass(\"complete\");
  573. };
  576. \t";
  577.         // line 5025
  578.         $this->displayBlock('javascript', $context, $blocks);
  579.         // line 5028
  580.         echo "
  581. \t\$(function(){
  582. \t\t\$(\".dropdown-btn\").click(function(){
  583. \t\t   var menu = \$(this).find('.dropdown__menu');
  584. \t\t  if (menu) {
  585. \t\t\tmenu.toggleClass(\"dropdown__menu--active\");
  586. \t\t  }
  587. \t\t});
  588. \t\t
  589. \t\t\$(\"form.update-method-paiement\").submit(function(){
  590. \t\t\tvar email = \$(this).find('input').val();
  591. \t\t\tif(";
  592.         // line 5039
  593.         echo twig_escape_filter($this->env, (isset($context["regexmail"]) || array_key_exists("regexmail", $context) ? $context["regexmail"] : (function () { throw new RuntimeError('Variable "regexmail" does not exist.', 5039, $this->source); })()), "html", null, true);
  594.         echo ".test(email))
  595. \t\t\t{
  596. \t\t\t\tvar height = (\$(window).height() + \$(window).scrollTop());
  597. \t\t\t\tvar width = \$(window).width() + 100;
  598. \t\t\t\tvar scrolltop = \$(window).scrollTop();
  599. \t\t\t\t\$('.panel-result-action-market-user').show();
  600. \t\t\t\t\$('.content-alert-action-market-user').show();
  601. \t\t\t\t\$('.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>');
  604. \t\t\t\t\$.post('";
  605.         // line 5049
  606.         echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("users_user_update_newsletter_list");
  607.         echo "', { email: email }, function(data){
  608. \t\t\t\t  if(data == 0)
  609. \t\t\t\t  {
  610.             resetNotif();
  611.             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>');
  612. \t\t\t\t  }else if(data == 2){
  613. \t\t\t\t\t  resetNotif();
  614. \t\t\t\t\t  alertify.alert('<div style=\"margin-bottom: 20px;\"><span class=\"fa fa-frown-o\"></span> Echec, Cette adresse existe déjà !</div>');
  615. \t\t\t\t  }else if(data == 3){
  616. \t\t\t\t\t  resetNotif();
  617. \t\t\t\t\t  alertify.alert('<div style=\"margin-bottom: 20px;\"><span class=\"fa fa-frown-o\"></span> Echec, L\\'adresse Email entrée est incorete !</div>');
  618. \t\t\t\t  }else{
  619.             resetNotif();
  620.             alertify.alert('<div style=\"margin-bottom: 20px;\"><span class=\"fa fa-check\"></span> Opération effectuée avec succès !</div><div>'+data+'</div>');
  621. \t\t\t\t  }
  622. \t\t\t\t  \$('.panel-result-action-market-user').hide();
  623. \t\t\t\t  \$('.content-alert-action-market-user').hide();
  624. \t\t\t\t});
  625. \t\t\t\t
  626. \t\t\t}else{
  627. \t\t\t\tresetNotif();
  628. \t\t\t\talertify.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>');
  629. \t\t\t}
  630. \t\t\t
  631. \t\t\treturn false;
  632. \t\t});
  635.     \$(\"form.formmodal_inscription_newletter\").submit(function(){
  636. \t\t\tvar usernom = \$(this).find('input[name=\"usernom\"]').val();
  637.       var userprenom = \$(this).find('input[name=\"userprenom\"]').val();
  638.       var email = \$(this).find('input[name=\"email\"]').val();
  639.       var website = \$(this).find('textarea[name=\"website\"]').val();
  640.       var number = \$(this).find('input[name=\"number\"]').val();
  641.       var offreClient = \$(this).find('input[name=\"offreClient\"]').val();
  642.       var calldate = \$(this).find('input[name=\"calldate\"]').val();
  643.       var calltime = \$(this).find('input[name=\"calltime\"]').val();
  644.       var typeContact = \$(this).find('select[name=\"typeContact\"]').val();
  646. \t\t\tif(";
  647.         // line 5088
  648.         echo twig_escape_filter($this->env, (isset($context["regexmail"]) || array_key_exists("regexmail", $context) ? $context["regexmail"] : (function () { throw new RuntimeError('Variable "regexmail" does not exist.', 5088, $this->source); })()), "html", null, true);
  649.         echo ".test(email))
  650. \t\t\t{
  651. \t\t\t\tvar height = (\$(window).height() + \$(window).scrollTop());
  652. \t\t\t\tvar width = \$(window).width() + 100;
  653. \t\t\t\tvar scrolltop = \$(window).scrollTop();
  654. \t\t\t\t\$('.panel-result-action-market-user').show();
  655. \t\t\t\t\$('.content-alert-action-market-user').show();
  656. \t\t\t\t\$('.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>');
  658. \t\t\t\t\$.post('";
  659.         // line 5097
  660.         echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("users_user_update_newsletter_list", ["type" => 2]);
  661.         echo "', { usernom: usernom, userprenom: userprenom, email: email, website: website, number: number, offreClient: offreClient, calldate: calldate, calltime: calltime, typeContact: typeContact }, function(data){
  662. \t\t\t\t  if(data == 0)
  663. \t\t\t\t  {
  664. \t\t\t\t\tresetNotif();
  665. \t\t\t\t\talertify.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>');
  666. \t\t\t\t  }else{
  667.             resetNotif();
  668.             alertify.alert('<div style=\"margin-bottom: 20px;\"><span class=\"fa fa-check\"></span> Opération effectuée avec succès !</div>');
  669.             \$('#sppmodal-container-newsletter').addClass('out');
  670. \t\t\t      \$('body').removeClass('sppmodal-active');
  671. \t\t\t\t  }
  672. \t\t\t\t  \$('.panel-result-action-market-user').hide();
  673. \t\t\t\t  \$('.content-alert-action-market-user').hide();
  674. \t\t\t\t});
  675. \t\t\t\t
  676. \t\t\t}else{
  677. \t\t\t\tresetNotif();
  678. \t\t\t\talertify.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>');
  679. \t\t\t}
  680. \t\t\t
  681. \t\t\treturn false;
  682. \t\t});
  684. \t\tvar box = \$('.menu-mob');
  685. \t\tvar button = \$('.open-menu, .header-menu');
  686. \t\tbutton.on('click', function(){
  687. \t\t\tbox.toggleClass('activebtn');
  688. \t\t});
  690. \t\t\$(\"[data-toggle=popover]\").popover();
  693. \t\tvar jsonresult =  ";
  694.         // line 5129
  695.         echo $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment(Symfony\Bridge\Twig\Extension\HttpKernelExtension::controller("App\\Controller\\Produit\\Produit\\ProduitController:autorechercheproduit", ["taille" => 10]));
  696.         echo ";
  697.     
  698. \t\tvar j = 0;
  699. \t\tvar searchchoices = [];
  700. \t\tfor(var n in jsonresult){
  701. \t\t\tnom = jsonresult[n].nom;
  702. \t\t\tdrapeau = jsonresult[n].drapeau;
  703. \t\t\tslogan = jsonresult[n].slogan;
  704. \t\t\trelation = jsonresult[n].relation;
  705. \t\t\tlink = jsonresult[n].link;
  706. \t\t\tnum = nom+\":\"+drapeau;
  707. \t\t\tcourantelem = [nom,drapeau,slogan,relation,link];
  708. \t\t\tsearchchoices[j] = courantelem;
  709. \t\t\tj++;
  710. \t\t}
  712. \t\t\$('.recherche-plateforme').autoComplete({
  713. \t\t\tminChars: 0,
  714. \t\t\tsource: function(term, suggest){
  715. \t\t\t\tterm = term.toLowerCase();
  716. \t\t\t\tvar suggestions = [];
  717. \t\t\t\tfor (i=0;i< searchchoices.length;i++)
  718. \t\t\t\t\tif (~(searchchoices[i][0]+' '+searchchoices[i][1]).toLowerCase().indexOf(term)) suggestions.push(searchchoices[i]);
  719. \t\t\t\tsuggest(suggestions);
  720. \t\t\t},
  721. \t\t\trenderItem: function (item, search){
  722. \t\t\t\tsearch = search.replace(/[-\\/\\\\^\$*+?.()|[\\]{}]/g, '\\\\\$&');
  723. \t\t\t\tvar re = new RegExp(\"(\" + search.split(' ').join('|') + \")\", \"gi\");
  724. \t\t\t\treturn '<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=\"";
  725.         // line 5157
  726.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl(""), "html", null, true);
  727.         echo "'+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>';
  728. \t\t\t},
  729. \t\t\tonSelect: function(e, term, item){
  730. \t\t\t\t\$('.recherche-plateforme').val(item.data('langname'));
  731. \t\t\t\tdocument.location.href= item.data('link');
  732. \t\t\t},
  733. \t\t\tcache: false
  734. \t\t});
  737. \t\tvar bloquerfunction = false;
  738. \t\tfunction rechercheprojetanduser()
  739. \t\t{
  740. \t\tif( bloquerfunction == false && \$('.recherche-plateforme').val().length >= 1 )// on vérifier si l'utilisateur a entré plus de 5 caractères
  741. \t\t{
  742. \t\t  var libre = \$('.recherche-plateforme').attr('etat'); // on initialise la variable libre
  743. \t\t  var donnee = \$('.recherche-plateforme').val();  //on récupère la donnée
  744. \t\t  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
  745. \t\t  \$('.recherche-plateforme').attr('etat',1); // on bloque d'autres recherches
  746. \t\t  \$('.recherche-plateforme').attr('lastresult',donnee); // on enregistre la recherche effectuer.
  747. \t\t\tsecondTimestamp = new Date().getTime();
  748. \t\t\t\$.ajax({
  749. \t\t\t\turl : '";
  750.         // line 5179
  751.         echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("produit_produit_auto_recherche_produits_andprojet_plateforme", ["taille" => 300]);
  752.         echo "',
  753. \t\t\t\ttype : 'POST',
  754. \t\t\t\tdata : 'donnee='+ donnee +'&timestamp='+secondTimestamp+'',
  755. \t\t\t\tdataType : 'json',
  756. \t\t\t\tsuccess : function(data, statut){
  757. \t\t\t\t\t  \$('.recherche-plateforme').attr('etat',0); // on libère d'autre recherches
  758. \t\t\t\t\t  jsonresult = data;
  759. \t\t\t\t\t\tj = 0;
  760. \t\t\t\t\t\tsearchchoices = [];
  761. \t\t\t\t\t\tfor(var n in jsonresult){
  762. \t\t\t\t\t\t\tnom = jsonresult[n].nom;
  763. \t\t\t\t\t\t\tdrapeau = jsonresult[n].drapeau;
  764. \t\t\t\t\t\t\tslogan = jsonresult[n].slogan;
  765. \t\t\t\t\t\t\trelation = jsonresult[n].relation;
  766. \t\t\t\t\t\t\tlink = jsonresult[n].link;
  767. \t\t\t\t\t\t\tnum = nom+\":\"+drapeau;
  768. \t\t\t\t\t\t\tcourantelem = [nom,drapeau,slogan,relation,link];
  769. \t\t\t\t\t\t\tsearchchoices[j] = courantelem;
  770. \t\t\t\t\t\t\tj++;
  771. \t\t\t\t\t\t}
  772. \t\t\t\t\t  setTimeout(function() { rechercheprojetanduser(); }, 100);  // on relance la fonction après 200 ms.
  773. \t\t\t\t}
  774. \t\t\t});
  776. \t\t  }else{
  777. \t\t  setTimeout(function() { rechercheprojetanduser(); }, 100);
  778. \t\t  }
  779. \t\t}else{
  780. \t\t\tsetTimeout(function() { rechercheprojetanduser(); }, 100);
  781. \t\t}
  782. \t\t}
  784. \t\t\$('.recherche-plateforme').focus(function(){
  785. \t\t\tbloquerfunction = false;
  786. \t\t\trechercheprojetanduser();
  787. \t\t});
  789. \t\t\$('.open-scroll-bar-body').click(function(){
  790. \t\t\t\$('aside').toggleClass('open');
  791. \t\t\t\$('.content-article-tech').html('');
  792. \t\t});
  794. \t\t\$('.overlay-article-market').click(function(){
  795. \t\t  var id = \$(this).attr('value');
  797. \t\t  var height = (\$(window).height() + \$(window).scrollTop());
  798. \t\t  var width = \$(window).width() + 100;
  799. \t\t  var scrolltop = \$(window).scrollTop();
  800. \t\t  \$('.panel-result-action-market-user').show();
  801. \t\t  \$('.content-alert-action-market-user').show();
  802. \t\t  \$('.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>');
  804. \t\t  \$.post('";
  805.         // line 5231
  806.         echo $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("produit_service_detail_article_support");
  807.         echo "',{ id: id }, function(data){
  808. \t\t\t  if(data != 0)
  809. \t\t\t  {
  810. \t\t\t\t  \$('.panel-result-action-market-user').hide();
  811. \t\t\t\t  \$('.content-alert-action-market-user').hide();
  813. \t\t\t\t  \$('.content-article-tech').html(data);
  814. \t\t\t\t  \$('aside').toggleClass('open');
  815. \t\t\t  }else{
  816. \t\t\t\t  resetNotif();
  817. \t\t\t\t  alertify.alert(\"Echec, Une erreur a été rencontrée lors de l\\'enregistrement de la commande.\");
  818. \t\t\t\t  \$('.panel-result-action-market-user').hide();
  819. \t\t\t\t  \$('.content-alert-action-market-user').hide();
  820. \t\t\t  }
  821. \t\t  });
  822. \t\t});
  824. \t});
  825. </script>
  828. <!-- Go to www.addthis.com/dashboard to customize your tools -->
  829. <!--script type=\"text/javascript\" src=\"//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-595f8e9fdd98b073\"></script-->
  830. <!--Start of Tawk.to Script-->
  831. <script type=\"text/javascript\">
  832. \tvar Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
  833. \t(function(){
  834. \tvar s1=document.createElement(\"script\"),s0=document.getElementsByTagName(\"script\")[0];
  835.     s1.async=true;
  836.     s1.src='https://embed.tawk.to/5f037606760b2b560e6fd915/default';
  837.     s1.charset='UTF-8';
  838.     s1.setAttribute('crossorigin','*');
  839.     s0.parentNode.insertBefore(s1,s0);
  840. \t})();
  841. </script>
  842. <!--End of Tawk.to Script-->
  843. </body>
  844. </html>
  845. ";
  846.         
  847.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  849.         
  850.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  852.     }
  854.     // line 9
  855.     public function block_meta($context, array $blocks = [])
  856.     {
  857.         $macros = $this->macros;
  858.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  859.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "meta"));
  861.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  862.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "meta"));
  864.         echo " ";
  865.         
  866.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  868.         
  869.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  871.     }
  873.     // line 12
  874.     public function block_title($context, array $blocks = [])
  875.     {
  876.         $macros = $this->macros;
  877.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  878.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  880.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  881.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  883.         // line 13
  884.         echo "      ";
  885.         echo $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment(Symfony\Bridge\Twig\Extension\HttpKernelExtension::controller("App\\Controller\\General\\Template\\MenuController:relicon", ["position" => "title"]));
  886.         echo "
  887.     ";
  888.         
  889.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  891.         
  892.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  894.     }
  896.     // line 17
  897.     public function block_stylesheets($context, array $blocks = [])
  898.     {
  899.         $macros = $this->macros;
  900.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  901.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  903.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  904.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  906.         // line 18
  907.         echo "
  908.     <!-- Web Font -->
  909.     <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\"/>
  910.     <link href=\"https://fonts.googleapis.com/css?family=Montserrat\" rel=\"stylesheet\"/>
  912.     ";
  913.         // line 23
  914.         echo $this->env->getRuntime('Symfony\Bridge\Twig\Extension\HttpKernelRuntime')->renderFragment(Symfony\Bridge\Twig\Extension\HttpKernelExtension::controller("App\\Controller\\General\\Template\\MenuController:variablesCss"));
  915.         echo "
  917.   \t<style>
  918.   \t\t.header.shop .all-category{
  919.   \t\t\tbackground: var(--bg-principal)!important;
  920.         color: var(--text-principal)!important;
  921.   \t\t}
  922.       .header.shop .header-inner {
  923.         background: var(--bg-secondaire)!important;
  924.         color: var(--text-secondaire)!important;
  925.       }
  926.       .header.shop .list-main span i{
  927.         color: var(--text-icon-color)!important;
  928.       }
  929.       .header.shop .list-main span a:hover{
  930.         color: var(--text-icon-color)!important;
  931.       }
  932.       .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{
  933.         background: var(--bg-principal)!important;
  934.         color: var(--text-principal)!important;
  935.       }
  936.       .header.sticky .header-inner .nav li a {
  937.         color: var(--text-secondaire)!important;
  938.       }
  939.       .owl-theme .owl-nav [class*='owl-'], .header.shop .nav li .new{
  940.         background: var(--bg-principal)!important;
  941.         color: var(--text-principal)!important;
  942.       }
  943.       .header.shop .nav li .new::before{
  944.         border: 4px solid var(--bg-principal)!important;
  945.       }
  946.       .header.shop .main-category li .mega-menu .single-menu .title-link{
  947.         background: var(--bg-principal)!important;
  948.         color: var(--text-principal)!important;
  949.       }
  950.       .header.shop .main-category li .mega-menu .single-menu .title-link:hover{
  951.         background: var(--bg-principal)!important;
  952.         color: var(--text-principal)!important;
  953.       }
  954.       .header.shop .main-category li .mega-menu {
  955.         border-left: 3px solid var(--bg-principal)!important;
  956.       }
  957.       .header.shop .main-category li .mega-menu .single-menu .image{
  958.           overflow: hidden;
  959.           text-align: center!important;
  960.           box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  961.           transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  962.           padding: 15px 10px;
  963.       }
  965.       .header.shop .main-category li .mega-menu .single-menu img {
  966.           display: inline-block!important;
  967.           cursor: pointer;
  968.       }
  969.       .header.shop .topbar{
  970.         background: var(--bg-principal)!important;
  971.       }
  973.       .header.shop .list-main span a, .principal-link{
  974.         color: var(--text-principal)!important;
  975.       }
  976.       .header.shop .list-main span a:hover, .principal-link:hover{
  977.         background: var(--bg-secondaire)!important;
  978.         color: var(--text-secondaire)!important;
  979.       }
  980.       .call-action-post, .header.shop .right-bar .sinlge-bar .single-icon .total-count{
  981.         background: var(--bg-principal)!important;
  982.         color: var(--text-principal)!important;
  983.       }
  984.       .header.shop .list-main span i{
  985.         color: var(--text-principal)!important;
  986.       }
  987.       .header.shop .nav li.menu-dd-coustom:hover a.target-dd {
  988.         background: var(--bg-principal)!important;
  989.         color: var(--text-principal)!important;
  990.       }
  991.       .header .shopping .dropdown-cart-header a:hover, .header.shop .right-bar .sinlge-bar .single-icon:hover{
  992.         color: var(--bg-principal)!important;
  993.       }
  994.       .header .shopping-item .bottom .btn:hover, .header.shop .search-bar .btnn:hover{
  995.         background: var(--bg-principal)!important;
  996.         color: var(--text-principal)!important;
  997.       }
  998.   \t</style>
  1000.     <!-- Bootstrap -->
  1001. \t<link rel=\"stylesheet\" href=\"";
  1002.         // line 109
  1003.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/css/bootstrap.css"), "html", null, true);
  1004.         echo "\"/>
  1005. \t<link href=\"";
  1006.         // line 110
  1007.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/css/afhstyle.css"), "html", null, true);
  1008.         echo "\" type=\"text/css\" rel=\"stylesheet\" media=\"screen,projection\"/>
  1009. \t<!-- Magnific Popup -->
  1010.   <link rel=\"stylesheet\" href=\"";
  1011.         // line 112
  1012.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/css/magnific-popup.min.css"), "html", null, true);
  1013.         echo "\"/>
  1014. \t<!-- Font Awesome -->
  1015.   <link rel=\"stylesheet\" href=\"";
  1016.         // line 114
  1017.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/css/font-awesome.css"), "html", null, true);
  1018.         echo "\"/>
  1019. \t<!-- Fancybox -->
  1020. \t<link rel=\"stylesheet\" href=\"";
  1021.         // line 116
  1022.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/css/jquery.fancybox.min.css"), "html", null, true);
  1023.         echo "\"/>
  1024. \t<!-- Themify Icons -->
  1025.   <link rel=\"stylesheet\" href=\"";
  1026.         // line 118
  1027.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/css/themify-icons.css"), "html", null, true);
  1028.         echo "\"/>
  1029. \t<!-- Nice Select CSS -->
  1030.   <link rel=\"stylesheet\" href=\"";
  1031.         // line 120
  1032.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/css/niceselect.css"), "html", null, true);
  1033.         echo "\"/>
  1034. \t<!-- Animate CSS -->
  1035.   <link rel=\"stylesheet\" href=\"";
  1036.         // line 122
  1037.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/css/animate.css"), "html", null, true);
  1038.         echo "\"/>
  1039. \t<!-- Flex Slider CSS -->
  1040.   <link rel=\"stylesheet\" href=\"";
  1041.         // line 124
  1042.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/css/flex-slider.min.css"), "html", null, true);
  1043.         echo "\"/>
  1044. \t<!-- Owl Carousel -->
  1045.   <link rel=\"stylesheet\" href=\"";
  1046.         // line 126
  1047.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/css/owl-carousel.css"), "html", null, true);
  1048.         echo "\"/>
  1049. \t<!-- Slicknav -->
  1050.   <link rel=\"stylesheet\" href=\"";
  1051.         // line 128
  1052.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/css/slicknav.min.css"), "html", null, true);
  1053.         echo "\"/>
  1055. \t<!-- Eshop StyleSheet -->
  1056. \t<link rel=\"stylesheet\" href=\"";
  1057.         // line 131
  1058.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/css/reset.css"), "html", null, true);
  1059.         echo "\"/>
  1060. \t<link rel=\"stylesheet\" href=\"";
  1061.         // line 132
  1062.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/css/style.css"), "html", null, true);
  1063.         echo "\"/>
  1064.   <link rel=\"stylesheet\" href=\"";
  1065.         // line 133
  1066.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/css/responsive.css"), "html", null, true);
  1067.         echo "\"/>
  1068. \t<link rel=\"stylesheet\" href=\"";
  1069.         // line 134
  1070.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("autocomplete/css/jquery.auto-complete.css"), "html", null, true);
  1071.         echo "\"/>
  1072.   <link rel=\"stylesheet\" href=\"";
  1073.         // line 135
  1074.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/css/bootstrap-icons.css"), "html", null, true);
  1075.         echo "\"/>
  1076. \t<script src=\"";
  1077.         // line 136
  1078.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/js/jquery.min.js"), "html", null, true);
  1079.         echo "\"></script>
  1080. \t<script src=\"";
  1081.         // line 137
  1082.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/js/jquery.newsTicker.js"), "html", null, true);
  1083.         echo "\"></script>
  1084. \t<script src=\"";
  1085.         // line 138
  1086.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/js/lottieflow.min.js"), "html", null, true);
  1087.         echo "\" type=\"text/javascript\"></script>
  1088. \t<!-- Owl Carousel JS -->
  1089. \t<script src=\"";
  1090.         // line 140
  1091.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/js/owl.carousel.min.js"), "html", null, true);
  1092.         echo "\"></script>
  1094. \t<link rel=\"stylesheet\" href=\"";
  1095.         // line 142
  1096.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/notify/themes/alertify.core.css"), "html", null, true);
  1097.         echo "\"/>
  1098. \t<link rel=\"stylesheet\" href=\"";
  1099.         // line 143
  1100.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/notify/themes/alertify.default.css"), "html", null, true);
  1101.         echo "\" id=\"toggleCSS\"/>
  1102.     <script src=\"";
  1103.         // line 144
  1104.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/notify/lib/alertify.min.js"), "html", null, true);
  1105.         echo "\"></script>
  1106. \t<script>
  1107. \t\tfunction resetNotif(){
  1108. \t\t\t\$(\"#toggleCSS\").attr(\"href\", \"";
  1109.         // line 147
  1110.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/notify/themes/alertify.default.css"), "html", null, true);
  1111.         echo "\");
  1112. \t\t\talertify.set({
  1113. \t\t\t\tlabels : {
  1114. \t\t\t\t\tok     : \"OK\",
  1115. \t\t\t\t\tcancel : \"Cancel\"
  1116. \t\t\t\t},
  1117. \t\t\t\tdelay : 5000,
  1118. \t\t\t\tbuttonReverse : false,
  1119. \t\t\t\tbuttonFocus   : \"ok\"
  1120. \t\t\t});
  1121. \t\t}
  1122. \t</script>
  1124. <style>
  1125. .hover-offer, .hover-offer h2 {
  1126. \ttext-align: left;
  1127. }
  1128. .hover-offer, .hover-offer .overlay2 {
  1129. \twidth: 95%;
  1130. \tmax-width: 450px;
  1131. \theight: auto;
  1132. \toverflow: hidden
  1133. }
  1134. .hover-offer button.info, .hover-offer h2 {
  1135. \ttext-transform: uppercase;
  1136. \tcolor: #fff
  1137. }
  1138. .hover-offer {
  1139. cursor: pointer;
  1140. \tmargin-bottom: 20px;
  1141. \tborder-radius: 2px;
  1142. \twidth: 100%;
  1143. \t    min-width: 267px;
  1144. \tmax-height: 350px;
  1145. \tmax-width: 400px;
  1146. \tmargin-left: auto;
  1147. \tmargin-right: auto;
  1148. }
  1149. .hover-offer .overlay2 {
  1150. \tposition: absolute;
  1151. \ttop: 0;
  1152. \tleft: 0
  1153. }
  1154. .hover-offer img {
  1155. \tdisplay: block;
  1156. \tposition: relative;
  1157. }
  1158. .offer-content {
  1159. position: absolute;
  1160.     z-index: 10;
  1161.     /* height: 100%; */
  1162.        width: 94%;
  1163.     /* max-height: 239px; */
  1164.     bottom: 0;
  1165.     padding: 5% 4% 14% 7%;
  1166.     color: #FFF;
  1167.    background-image: linear-gradient(145deg, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.1) 80%);
  1168.     background-image: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.1) 80%);
  1169.     background-image:-webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.1) 80%);
  1170.     /* background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 60%); */
  1171.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#000', endColorstr='transparent', GradientType=1 );
  1172.     /* -webkit-transition: all .3s ease-out 0s; */
  1173.     -moz-transition: all .3s ease-out 0s;
  1174.     -o-transition: all .3s ease-out 0s;
  1175.     -ms-transition: all .3s ease-out 0s;
  1176.     transition: all .3s ease-out 0s;
  1177.     margin-bottom: 20px;
  1178.     margin-top: 1px;
  1179.     top: 0;
  1180. }
  1181. .offer-content h4 {
  1182. \tfont-size: 170% !important;
  1183. \tmargin-top: 10px;
  1184. \tmargin-bottom: 16px;
  1185. \tfont-weight: 700;
  1186. \tmargin-top: 20px;
  1187. }
  1188. .offer-content .price {
  1189. \tfont-size: 20px;
  1190. \tcolor: #fff;
  1191. \ttext-align: left;
  1192. \tpadding-top: 2%;
  1193. }
  1194. .ehover1 img {
  1195. \t-webkit-transition: all .4s linear;
  1196. \ttransition: all .4s linear
  1197. }
  1198. .ehover1 .overlay2 {
  1199. \t-webkit-transition: all .4s ease-in-out;
  1200. \ttransition: all .4s ease-in-out
  1201. }
  1202. .ehover1:hover img {
  1203. \t-ms-transform: scale(1.2);
  1204. \t-webkit-transform: scale(1.2);
  1205. \ttransform: scale(1.2)
  1206. }
  1207. .ehover1:hover .overlay2 {
  1208. \topacity: 1
  1209. }
  1210. .offer-content .price-offer {
  1211. \tfont-size: 32px;
  1212. \tcolor: #fff;
  1213. \tmargin-top: 10px;
  1214. }
  1215. .flights-icon {
  1216. \tborder: 1px solid #ffffff;
  1217. \tborder-radius: 100%;
  1218. \tdisplay: block;
  1219. \tfont-family: \"theme-icons\";
  1220. \tfont-size: 20px !important;
  1221. \theight: 38px;
  1222. \tline-height: 38px !important;
  1223. \ttext-align: center;
  1224. \twidth: 38px;
  1225. }
  1226. p.detail {
  1227. \tfont-size: 118%;
  1228. \tline-height: 38px;
  1229. }
  1230. p.price-offer {
  1231. \tfont-size: 16px;
  1232. \tcolor: #fff;
  1233. \tfont-weight: 500;
  1234. \tline-height: 23px;
  1235. }
  1236. p.price-offer span {
  1237. \tfont-size: 16px;
  1238. }
  1239. /* RIBBON */
  1242. .ribbon {
  1243. \tposition: absolute;
  1244. \tz-index: 10;
  1245. \tpadding: 0px 7px;
  1246. \t/* margin-left: 62.5%; */
  1247.     /* margin-right: 12.0%; */
  1248. \tborder-top-left-radius: 2px;
  1249. \tborder-bottom-left-radius: 2px;
  1250. \tfont-size: 15px;
  1251. \tline-height: 32px;
  1252. \tfont-weight: bold;
  1253. \ttext-align: center;
  1254. \tcolor: #fff;
  1255. \ttext-shadow: 0 1px 1px rgba(0,0,0,0.2);
  1256. \t-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  1257. \t-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  1258. \tbox-shadow: 0 1px 1px rgba(0,0,0,0.2);
  1259. \tzoom: 1;
  1260. \t/* top: 8%; */
  1261. right: -3%;
  1263. \t/* left: 61%; */
  1264. \tmin-width: 40%;
  1265. \tmax-width: 50%;
  1266. \theight: 32px;
  1268. }
  1269. .orange {
  1270. \tbackground: #FF9600;
  1271. }
  1272. .blue {
  1273. \tbackground: #3398d9
  1274. }
  1275. .green {
  1276. \tbackground: #66b94d;
  1277. }
  1278. .ribbon:after {
  1279. \tcontent: \"\";
  1280. \tposition: absolute;
  1281. \tz-index: -20;
  1282. \ttop: 100%;
  1283. \tleft: auto;
  1284. \tborder-style: solid;
  1285. \tborder-width: 0 0 10px 10px;
  1286. \tright: 0;
  1287. }
  1288. .orange:after {
  1289. \tborder-color: transparent #DC5F0B;
  1290. }
  1291. .blue:after {
  1292. \tborder-color: transparent #1e5b82;
  1293. }
  1294. .green:after {
  1295. \tborder-color: transparent #3e7030;
  1296. }
  1297. .no-ribbon {
  1298. \theight: 41px;
  1299. \tposition: absolute;
  1300. \tz-index: 2000;
  1301. }
  1302. /*END OF RIBBON */
  1303. .button2 {
  1304. \tmargin: 0 auto;
  1305. \t/* width: 145px; */
  1306. \theight: 40px;
  1307. \tbackground: rgba(0, 0, 0, 0.5);
  1308. \toverflow: hidden;
  1309. \ttext-align: center;
  1310. \ttransition: .2s;
  1311. \tcursor: pointer;
  1312. \tborder-radius: 4px !important;
  1313. \tfloat: left;
  1314. \tborder: 1px solid white;
  1315. \tfont-size: 17px;
  1316. \tmargin-top: 20px;
  1317. \tfont-weight: 400;
  1318. \tpadding: 20px 20px;
  1319. \tline-height: 0em;
  1320. \tposition: absolute;
  1321.     right: 7%;
  1322.     bottom: 7%;
  1323. }
  1325. @media (max-width: 768px) {
  1326. .offer-content h4 {
  1327. \tfont-size: 150% !important;
  1328. }
  1329. p.detail {
  1330. \tfont-size: 140%;
  1331. \ttext-shadow: 1px 1px 9px rgba(0, 0, 0, 1);
  1332.   \tline-height: 18px;
  1333. }
  1334. .offer-content {
  1335. position: absolute;
  1336.  z-index: 10;
  1337.  min-width:279px;
  1338. max-width: 400px;
  1339. width: 89%;
  1340. bottom: 0;
  1341.  color: #FFF;
  1342.      padding: 5% 7% 14% 7%;
  1343. }
  1344. .hover-offer {
  1345. \twidth:95%;
  1346.     min-width: 280px;
  1347.  min-height: auto;
  1348.  max-height: 550px;
  1349.  /*max-width: 640px;*/
  1350. \t/* margin-left: auto; */
  1351. \tmargin-right: auto;
  1352. \t/* height: 100%; */
  1354. /* width: auto; */
  1355. }
  1356. .col-xs-offset-1 {
  1357. \tmargin-left: 0;
  1358. }
  1359. .ribbon {
  1360. \twidth: 60%;
  1361. \t    left: 52.5%;
  1362. }
  1363. }
  1365. @media (max-width: 545px) {
  1366. .button2 {
  1367.  width: 80%;
  1368.  padding: 23px;
  1369.  font-size: 23px;
  1370.  margin-right: 2%;
  1371.        bottom: 2%;
  1372. }
  1373. .ribbon {
  1374. \twidth: 49.9%;
  1375.  left: 53.4%;
  1376. }
  1377. }
  1379. .hover-offer {
  1380. \tposition: initial
  1381. }
  1382. .col-lg-3, .col-md-4, .col-sm-6, .col-xs-12 {
  1383. \tpadding: 0 10px
  1384. }
  1386. @media (min-width: 1024px) {
  1387.   .offer-content:hover {
  1388.     box-shadow: none
  1389.   }
  1390.   .offer-content:hover figcaption {
  1391.     background-image: none
  1392.   }
  1393. }
  1394. /*------------ END OF OFFERS ✂----------------------✂*/
  1396. .coustom-my-text{
  1397. \ttext-align: left;word-wrap: break-word;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;
  1398. }
  1399. .mega-menu{
  1400. \tbox-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  1401. \tz-index: 50000;
  1402. }
  1403. .main-category{
  1404. box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  1405. transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  1406. }
  1407. .display-vertical-menu{
  1408. \topacity: 0;
  1409. \tvisibility: hidden;
  1410. }
  1412. .row{
  1413. \tmargin: 0px;
  1414. }
  1416. .breadcrumbs {
  1417.   list-style: none;
  1418.   margin: 0;
  1419.   padding: 0;
  1420. }
  1422. .breadcrumbs li {
  1423.   list-style: none;
  1424.   margin: 0;
  1425.   padding: 0;
  1426.   display: block;
  1427.   float: left;
  1428.   font-family: 'Montserrat', sans-serif!important;
  1429.   font-size: 13px;
  1430.   text-transform: capitalize;
  1431.   font-weight: 700;
  1432.   letter-spacing: .05em;
  1433.   line-height: 20px;
  1434.   color: hsl(0, 0%, 30%);
  1435. }
  1437. .breadcrumbs li a {
  1438.   display: block;
  1439.   padding: 0 40px 0 0px;
  1440.   color: hsl(0, 0%, 30%);
  1441.   text-decoration: none;
  1442.   height: 20px;
  1443.   font-weight: 700;
  1444.   letter-spacing: .05em;
  1445.   line-height: 20px;
  1446.   position: relative;
  1447.   perspective: 700px;
  1448. }
  1450. .breadcrumbs li a:after {
  1451.   content: '';
  1452.   width: 20px;
  1453.   height: 20px;
  1454.   border-color: #333;
  1455.   border-style: solid;
  1456.   border-width: 1px 1px 0 0;
  1458.   -webkit-backface-visibility: hidden;
  1459.   outline: 1px solid transparent;
  1461.   position: absolute;
  1462.   right: 20px;
  1463.   -webkit-transition: all .15s ease;
  1464. \t -moz-transition: all .15s ease;
  1465. \t  -ms-transition: all .15s ease;
  1466. \t\t  transition: all .15s ease;
  1467.   -webkit-transform: rotateZ(45deg) skew(10deg, 10deg);
  1468. \t -moz-transform: rotateZ(45deg) skew(10deg, 10deg);
  1469. \t  -ms-transform: rotateZ(45deg) skew(10deg, 10deg);
  1470. \t\t  transform: rotateZ(45deg) skew(10deg, 10deg);
  1471. }
  1474. .breadcrumbs li a:hover:after {
  1475.   right: 15px;
  1476.   -webkit-transform: rotateZ(45deg) skew(-10deg, -10deg);
  1477. \t -moz-transform: rotateZ(45deg) skew(-10deg, -10deg);
  1478. \t  -ms-transform: rotateZ(45deg) skew(-10deg, -10deg);
  1479. \t\t  transform: rotateZ(45deg) skew(-10deg, -10deg);
  1480. }
  1482. .btn-afh-flat {
  1483. \tfont-size: 12px;
  1484. \tborder: 3px solid #ddd;
  1485. \tmargin-right: -2px;
  1486. \tfont-family: 'Montserrat', sans-serif!important;
  1487. \ttext-align: center;
  1488. \tcolor: #030303;
  1489. \tbackground: linear-gradient(#FFFFFF,#E6E6E6);
  1490. \tborder: 1px solid #CDCDCD;
  1491. \tborder-radius: 3px;
  1492. \tdisplay: inline-block;
  1493. \tpadding: 4px 7px;
  1494. }
  1496. .search-form-left-side .nice-select{
  1497. \twidth: 100%!important;
  1498. }
  1499. .search-form-top-side .nice-select{
  1500. \twidth: 100%!important;
  1501. }
  1502. .form-post-product .nice-select{
  1503. \twidth: 100%!important;
  1504. }
  1507. .product-grid {
  1508.   font-family: Raleway,sans-serif;
  1509.   text-align: center;
  1510.   padding: 0 0 72px;
  1511.   border: 1px solid rgba(0, 0, 0, 0.1);
  1512.   overflow: hidden;
  1513.   position: relative;
  1514.   z-index: 1;
  1515. }
  1516. .product-grid .product-image {
  1517.   position: relative;
  1518.   -webkit-transition: all .3s ease 0s;
  1519.   transition: all .3s ease 0s;
  1520. }
  1521. .product-grid .product-image a {
  1522.   display: block;
  1523. }
  1524. .product-grid .product-image img {
  1525.   width: 100%;
  1526.   height: auto;
  1527. }
  1528. .product-grid .pic-1 {
  1529.   opacity: 1;
  1530.   -webkit-transition: all .3s ease-out 0s;
  1531.   transition: all .3s ease-out 0s;
  1532. }
  1533. .product-grid:hover .pic-1 {
  1534.   opacity: 1;
  1535. }
  1536. .product-grid .pic-2 {
  1537.   opacity: 0;
  1538.   position: absolute;
  1539.   top: 0;
  1540.   left: 0;
  1541.   -webkit-transition: all .3s ease-out 0s;
  1542.   transition: all .3s ease-out 0s;
  1543. }
  1544. .product-grid:hover .pic-2 {
  1545.   opacity: 1;
  1546. }
  1547. .product-grid .social {
  1548.   width: 150px;
  1549.   padding: 0;
  1550.   margin: 0;
  1551.   list-style: none;
  1552.   opacity: 0;
  1553.   -webkit-transform: translateY(-50%) translateX(-50%);
  1554.           transform: translateY(-50%) translateX(-50%);
  1555.   position: absolute;
  1556.   top: 60%;
  1557.   left: 50%;
  1558.   z-index: 1;
  1559.   -webkit-transition: all .3s ease 0s;
  1560.   transition: all .3s ease 0s;
  1561. }
  1562. .product-grid:hover .social {
  1563.   opacity: 1;
  1564.   top: 50%;
  1565. }
  1566. .product-grid .social li {
  1567.   display: inline-block;
  1568. }
  1569. .product-grid .social li a {
  1570.   color: #fff;
  1571.   background-color: #333;
  1572.   font-size: 16px;
  1573.   line-height: 40px;
  1574.   text-align: center;
  1575.   height: 40px;
  1576.   width: 40px;
  1577.   margin: 0 2px;
  1578.   display: block;
  1579.   position: relative;
  1580.   -webkit-transition: all .3s ease-in-out;
  1581.   transition: all .3s ease-in-out;
  1582. }
  1583. .product-grid .social li a:hover {
  1584.   color: #fff;
  1585.   background-color: #ef5777;
  1586. }
  1587. .product-grid .social li a:after, .product-grid .social li a:before {
  1588.   content: attr(data-tip);
  1589.   color: #fff;
  1590.   background-color: #000;
  1591.   font-size: 12px;
  1592.   letter-spacing: 1px;
  1593.   line-height: 20px;
  1594.   padding: 1px 5px;
  1595.   white-space: nowrap;
  1596.   opacity: 0;
  1597.   -webkit-transform: translateX(-50%);
  1598.           transform: translateX(-50%);
  1599.   position: absolute;
  1600.   left: 50%;
  1601.   top: -30px;
  1602. }
  1603. .product-grid .social li a:after {
  1604.   content: '';
  1605.   height: 15px;
  1606.   width: 15px;
  1607.   border-radius: 0;
  1608.   -webkit-transform: translateX(-50%) rotate(45deg);
  1609.           transform: translateX(-50%) rotate(45deg);
  1610.   top: -20px;
  1611.   z-index: -1;
  1612. }
  1613. .product-grid .social li a:hover:after, .product-grid .social li a:hover:before {
  1614.   opacity: 1;
  1615. }
  1616. .product-grid .product-discount-label, .product-grid .product-new-label {
  1617.   color: #fff;
  1618.   background-color: #ef5777;
  1619.   font-size: 12px;
  1620.   text-transform: uppercase;
  1621.   padding: 2px 7px;
  1622.   display: block;
  1623.   position: absolute;
  1624.   top: 10px;
  1625.   left: 0;
  1626. }
  1627. .product-grid .product-discount-label {
  1628.   background-color: #333;
  1629.   left: auto;
  1630.   right: 0;
  1631. }
  1632. .product-grid .rating {
  1633.   color: #FFD200;
  1634.   font-size: 12px;
  1635.   padding: 12px 0 0;
  1636.   margin: 0;
  1637.   list-style: none;
  1638.   position: relative;
  1639.   z-index: -1;
  1640. }
  1641. .product-grid .rating li.disable {
  1642.   color: rgba(0, 0, 0, 0.2);
  1643. }
  1644. .product-grid .product-content {
  1645.   background-color: #fff;
  1646.   text-align: center;
  1647.   padding: 12px 0;
  1648.   margin: 0 auto;
  1649.   position: absolute;
  1650.   left: 0;
  1651.   right: 0;
  1652.   bottom: -27px;
  1653.   z-index: 1;
  1654.   -webkit-transition: all .3s;
  1655.   transition: all .3s;
  1656. }
  1657. .product-grid:hover .product-content {
  1658.   bottom: 0;
  1659. }
  1660. .product-grid .title {
  1661.   font-size: 13px;
  1662.   font-weight: 400;
  1663.   letter-spacing: .5px;
  1664.   text-transform: capitalize;
  1665.   margin: 0 0 10px;
  1666.   -webkit-transition: all .3s ease 0s;
  1667.   transition: all .3s ease 0s;
  1668. }
  1669. .product-grid .title a {
  1670.   color: #828282;
  1671. }
  1672. .product-grid .title a:hover {
  1673.   color: #ef5777;
  1674. }
  1675. .product-grid:hover .title a {
  1676.   color: #ef5777;
  1677. }
  1678. .product-grid .price {
  1679.   color: #333;
  1680.   font-size: 17px;
  1681.   font-family: Montserrat,sans-serif;
  1682.   font-weight: 700;
  1683.   letter-spacing: .6px;
  1684.   margin-bottom: 8px;
  1685.   text-align: center;
  1686.   -webkit-transition: all .3s;
  1687.   transition: all .3s;
  1688. }
  1689. .product-grid .price span {
  1690.   color: #999;
  1691.   font-size: 13px;
  1692.   font-weight: 400;
  1693.   text-decoration: line-through;
  1694.   margin-left: 3px;
  1695.   display: inline-block;
  1696. }
  1697. .product-grid .add-to-cart {
  1698.   color: #000;
  1699.   font-size: 13px;
  1700.   font-weight: 600;
  1701. }
  1703. @media only screen and (max-width: 990px) {
  1704.   .product-grid {
  1705.     margin-bottom: 30px;
  1706.   }
  1707. }
  1708. /********************* Shopping Demo-2 **********************/
  1709. .demo {
  1710.   padding: 45px 0;
  1711. }
  1713. .product-grid2 {
  1714.   font-family: 'Open Sans',sans-serif;
  1715.   position: relative;
  1716. }
  1717. .product-grid2 .product-image2 {
  1718.   overflow: hidden;
  1719.   position: relative;
  1720. }
  1721. .product-grid2 .product-image2 a {
  1722.   display: block;
  1723. }
  1724. .product-grid2 .product-image2 img {
  1725.   width: 100%;
  1726.   height: auto;
  1727. }
  1729. .product-image2 .pic-1 {
  1730.   opacity: 1;
  1731.   -webkit-transition: all .5s;
  1732.   transition: all .5s;
  1733. }
  1735. .product-grid2:hover .product-image2 .pic-1 {
  1736.   opacity: 0;
  1737. }
  1739. .product-image2 .pic-2 {
  1740.   width: 100%;
  1741.   height: 100%;
  1742.   opacity: 0;
  1743.   position: absolute;
  1744.   top: 0;
  1745.   left: 0;
  1746.   -webkit-transition: all .5s;
  1747.   transition: all .5s;
  1748. }
  1750. .product-grid2:hover .product-image2 .pic-2 {
  1751.   opacity: 1;
  1752. }
  1753. .product-grid2 .social {
  1754.   padding: 0;
  1755.   margin: 0;
  1756.   position: absolute;
  1757.   bottom: 50px;
  1758.   right: 25px;
  1759.   z-index: 1;
  1760. }
  1761. .product-grid2 .social li {
  1762.   margin: 0 0 10px;
  1763.   display: block;
  1764.   -webkit-transform: translateX(100px);
  1765.           transform: translateX(100px);
  1766.   -webkit-transition: all .5s;
  1767.   transition: all .5s;
  1768. }
  1769. .product-grid2:hover .social li {
  1770.   -webkit-transform: translateX(0);
  1771.           transform: translateX(0);
  1772. }
  1773. .product-grid2:hover .social li:nth-child(2) {
  1774.   -webkit-transition-delay: .15s;
  1775.           transition-delay: .15s;
  1776. }
  1777. .product-grid2:hover .social li:nth-child(3) {
  1778.   -webkit-transition-delay: .25s;
  1779.           transition-delay: .25s;
  1780. }
  1781. .product-grid2 .social li a {
  1782.   color: #505050;
  1783.   background-color: #fff;
  1784.   font-size: 17px;
  1785.   line-height: 45px;
  1786.   text-align: center;
  1787.   height: 45px;
  1788.   width: 45px;
  1789.   border-radius: 50%;
  1790.   display: block;
  1791.   -webkit-transition: all .3s ease 0s;
  1792.   transition: all .3s ease 0s;
  1793. }
  1794. .product-grid2 .social li a:hover {
  1795.   color: #fff;
  1796.   background-color: #3498db;
  1797.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  1798. }
  1799. .product-grid2 .social li a:after, .product-grid2 .social li a:before {
  1800.   content: attr(data-tip);
  1801.   color: #fff;
  1802.   background-color: #000;
  1803.   font-size: 12px;
  1804.   line-height: 22px;
  1805.   border-radius: 3px;
  1806.   padding: 0 5px;
  1807.   white-space: nowrap;
  1808.   opacity: 0;
  1809.   -webkit-transform: translateX(-50%);
  1810.           transform: translateX(-50%);
  1811.   position: absolute;
  1812.   left: 50%;
  1813.   top: -30px;
  1814. }
  1815. .product-grid2 .social li a:after {
  1816.   content: '';
  1817.   height: 15px;
  1818.   width: 15px;
  1819.   border-radius: 0;
  1820.   -webkit-transform: translateX(-50%) rotate(45deg);
  1821.           transform: translateX(-50%) rotate(45deg);
  1822.   top: -22px;
  1823.   z-index: -1;
  1824. }
  1825. .product-grid2 .social li a:hover:after, .product-grid2 .social li a:hover:before {
  1826.   opacity: 1;
  1827. }
  1828. .product-grid2 .add-to-cart {
  1829.   color: #fff;
  1830.   background-color: #404040;
  1831.   font-size: 15px;
  1832.   text-align: center;
  1833.   width: 100%;
  1834.   padding: 10px 0;
  1835.   display: block;
  1836.   position: absolute;
  1837.   left: 0;
  1838.   bottom: -100%;
  1839.   -webkit-transition: all .3s;
  1840.   transition: all .3s;
  1841. }
  1842. .product-grid2 .add-to-cart:hover {
  1843.   background-color: #3498db;
  1844.   text-decoration: none;
  1845. }
  1846. .product-grid2:hover .add-to-cart {
  1847.   bottom: 0;
  1848. }
  1849. .product-grid2 .product-new-label {
  1850.   background-color: #3498db;
  1851.   color: #fff;
  1852.   font-size: 17px;
  1853.   padding: 5px 10px;
  1854.   position: absolute;
  1855.   right: 0;
  1856.   top: 0;
  1857.   -webkit-transition: all .3s;
  1858.   transition: all .3s;
  1859. }
  1860. .product-grid2:hover .product-new-label {
  1861.   opacity: 0;
  1862. }
  1863. .product-grid2 .product-content {
  1864.   padding: 20px 10px;
  1865.   text-align: center;
  1866. }
  1867. .product-grid2 .title {
  1868.   font-size: 17px;
  1869.   margin: 0 0 7px;
  1870. }
  1871. .product-grid2 .title a {
  1872.   color: #303030;
  1873. }
  1874. .product-grid2 .title a:hover {
  1875.   color: #3498db;
  1876. }
  1877. .product-grid2 .price {
  1878.   color: #303030;
  1879.   font-size: 15px;
  1880. }
  1882. @media screen and (max-width: 990px) {
  1883.   .product-grid2 {
  1884.     margin-bottom: 30px;
  1885.   }
  1886. }
  1887. /********************* Shopping Demo-3 **********************/
  1888. .product-grid3 {
  1889.   font-family: Roboto,sans-serif;
  1890.   text-align: center;
  1891.   position: relative;
  1892.   z-index: 1;
  1893. }
  1894. .product-grid3:before {
  1895.   content: \"\";
  1896.   height: 81%;
  1897.   width: 100%;
  1898.   background: #fff;
  1899.   border: 1px solid rgba(0, 0, 0, 0.1);
  1900.   opacity: 0;
  1901.   position: absolute;
  1902.   top: 0;
  1903.   left: 0;
  1904.   z-index: -1;
  1905.   -webkit-transition: all .5s ease 0s;
  1906.   transition: all .5s ease 0s;
  1907. }
  1908. .product-grid3:hover:before {
  1909.   opacity: 1;
  1910.   height: 100%;
  1911. }
  1912. .product-grid3 .product-image3 {
  1913.   position: relative;
  1914. }
  1915. .product-grid3 .product-image3 a {
  1916.   display: block;
  1917. }
  1918. .product-grid3 .product-image3 img {
  1919.   width: 100%;
  1920.   height: auto;
  1921. }
  1922. .product-grid3 .pic-1 {
  1923.   opacity: 1;
  1924.   -webkit-transition: all .5s ease-out 0s;
  1925.   transition: all .5s ease-out 0s;
  1926. }
  1927. .product-grid3:hover .pic-1 {
  1928.   opacity: 0;
  1929. }
  1930. .product-grid3 .pic-2 {
  1931.   position: absolute;
  1932.   top: 0;
  1933.   left: 0;
  1934.   opacity: 0;
  1935.   -webkit-transition: all .5s ease-out 0s;
  1936.   transition: all .5s ease-out 0s;
  1937. }
  1938. .product-grid3:hover .pic-2 {
  1939.   opacity: 1;
  1940. }
  1941. .product-grid3 .social {
  1942.   width: 120px;
  1943.   padding: 0;
  1944.   margin: 0 auto;
  1945.   list-style: none;
  1946.   opacity: 0;
  1947.   position: absolute;
  1948.   right: 0;
  1949.   left: 0;
  1950.   bottom: -23px;
  1951.   -webkit-transform: scale(0);
  1952.           transform: scale(0);
  1953.   -webkit-transition: all .3s ease 0s;
  1954.   transition: all .3s ease 0s;
  1955. }
  1956. .product-grid3:hover .social {
  1957.   opacity: 1;
  1958.   -webkit-transform: scale(1);
  1959.           transform: scale(1);
  1960. }
  1961. .product-grid3:hover .product-discount-label, .product-grid3:hover .product-new-label, .product-grid3:hover .title {
  1962.   opacity: 0;
  1963. }
  1964. .product-grid3 .social li {
  1965.   display: inline-block;
  1966. }
  1967. .product-grid3 .social li a {
  1968.   color: #e67e22;
  1969.   background: #fff;
  1970.   font-size: 18px;
  1971.   line-height: 50px;
  1972.   width: 50px;
  1973.   height: 50px;
  1974.   border: 1px solid rgba(0, 0, 0, 0.1);
  1975.   border-radius: 50%;
  1976.   margin: 0 2px;
  1977.   display: block;
  1978.   -webkit-transition: all .3s ease 0s;
  1979.   transition: all .3s ease 0s;
  1980. }
  1981. .product-grid3 .social li a:hover {
  1982.   background: #e67e22;
  1983.   color: #fff;
  1984. }
  1985. .product-grid3 .product-discount-label, .product-grid3 .product-new-label {
  1986.   background-color: #e67e22;
  1987.   color: #fff;
  1988.   font-size: 17px;
  1989.   padding: 2px 10px;
  1990.   position: absolute;
  1991.   right: 10px;
  1992.   top: 10px;
  1993.   -webkit-transition: all .3s;
  1994.   transition: all .3s;
  1995. }
  1996. .product-grid3 .product-content {
  1997.   z-index: -1;
  1998.   padding: 15px;
  1999.   text-align: left;
  2000. }
  2001. .product-grid3 .title {
  2002.   font-size: 14px;
  2003.   text-transform: capitalize;
  2004.   margin: 0 0 7px;
  2005.   -webkit-transition: all .3s ease 0s;
  2006.   transition: all .3s ease 0s;
  2007. }
  2008. .product-grid3 .title a {
  2009.   color: #414141;
  2010. }
  2011. .product-grid3 .price {
  2012.   color: #000;
  2013.   font-size: 16px;
  2014.   letter-spacing: 1px;
  2015.   font-weight: 600;
  2016.   margin-right: 2px;
  2017.   display: inline-block;
  2018. }
  2019. .product-grid3 .price span {
  2020.   color: #909090;
  2021.   font-size: 14px;
  2022.   font-weight: 500;
  2023.   letter-spacing: 0;
  2024.   text-decoration: line-through;
  2025.   text-align: left;
  2026.   display: inline-block;
  2027.   margin-top: -2px;
  2028. }
  2029. .product-grid3 .rating {
  2030.   padding: 0;
  2031.   margin: -22px 0 0;
  2032.   list-style: none;
  2033.   text-align: right;
  2034.   display: block;
  2035. }
  2036. .product-grid3 .rating li {
  2037.   color: #ffd200;
  2038.   font-size: 13px;
  2039.   display: inline-block;
  2040. }
  2041. .product-grid3 .rating li.disable {
  2042.   color: #dcdcdc;
  2043. }
  2045. @media only screen and (max-width: 1200px) {
  2046.   .product-grid3 .rating {
  2047.     margin: 0;
  2048.   }
  2049. }
  2050. @media only screen and (max-width: 990px) {
  2051.   .product-grid3 {
  2052.     margin-bottom: 30px;
  2053.   }
  2054.   .product-grid3 .rating {
  2055.     margin: -22px 0 0;
  2056.   }
  2057. }
  2058. @media only screen and (max-width: 359px) {
  2059.   .product-grid3 .rating {
  2060.     margin: 0;
  2061.   }
  2062. }
  2065. /********************* Shopping Demo-4 **********************/
  2066. .product-grid4 {
  2067.   position: relative;
  2068.   font-family: Poppins,sans-serif;
  2069.   text-align: center;
  2070.   border-radius: 5px;
  2071.   overflow: hidden;
  2072.   z-index: 1;
  2073.   -webkit-transition: all .3s ease 0s;
  2074.   transition: all .3s ease 0s;
  2075.   box-shadow:0 4px 10px -6px #0005;
  2076. }
  2077. .product-grid4 .product-image4 {
  2078.   position: relative;
  2079. }
  2080. .product-grid4:hover {
  2081.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  2082. }
  2083. .product-grid4 .product-image4 a {
  2084.   display: block;
  2085. }
  2086. .product-grid4 .product-image4 img {
  2087.   width: 100%;
  2088.   height: auto;
  2089. }
  2090. .product-grid4 .pic-1 {
  2091.   opacity: 1;
  2092.   -webkit-transition: all .5s ease-out 0s;
  2093.   transition: all .5s ease-out 0s;
  2094. }
  2095. .product-grid4:hover .pic-1 {
  2096.   opacity: 0;
  2097. }
  2098. .product-grid4 .pic-2 {
  2099.   position: absolute;
  2100.   top: 0;
  2101.   left: 0;
  2102.   opacity: 0;
  2103.   -webkit-transition: all .5s ease-out 0s;
  2104.   transition: all .5s ease-out 0s;
  2105. }
  2106. .product-grid4:hover .pic-2 {
  2107.   opacity: 1;
  2108. }
  2109. .product-grid4 .social {
  2110.   width: 180px;
  2111.   padding: 0;
  2112.   margin: 0 auto;
  2113.   list-style: none;
  2114.   position: absolute;
  2115.   right: 0;
  2116.   left: 0;
  2117.   top: 50%;
  2118.   -webkit-transform: translateY(-50%);
  2119.           transform: translateY(-50%);
  2120.   -webkit-transition: all .3s ease 0s;
  2121.   transition: all .3s ease 0s;
  2122. }
  2123. .product-grid4 .social li {
  2124.   display: inline-block;
  2125.   opacity: 0;
  2126.   -webkit-transition: all .7s;
  2127.   transition: all .7s;
  2128. }
  2129. .product-grid4 .social li:nth-child(1) {
  2130.   -webkit-transition-delay: .15s;
  2131.           transition-delay: .15s;
  2132. }
  2133. .product-grid4 .social li:nth-child(2) {
  2134.   -webkit-transition-delay: .3s;
  2135.           transition-delay: .3s;
  2136. }
  2137. .product-grid4 .social li:nth-child(3) {
  2138.   -webkit-transition-delay: .45s;
  2139.           transition-delay: .45s;
  2140. }
  2141. .product-grid4:hover .social li {
  2142.   opacity: 1;
  2143. }
  2144. .product-grid4 .social li a {
  2145.   color: #222;
  2146.   background: #fff;
  2147.   font-size: 17px;
  2148.   line-height: 36px;
  2149.   width: 40px;
  2150.   height: 36px;
  2151.   border-radius: 2px;
  2152.   margin: 0 5px;
  2153.   display: block;
  2154.   -webkit-transition: all .3s ease 0s;
  2155.   transition: all .3s ease 0s;
  2156. }
  2157. .product-grid4 .social li a:hover {
  2158.   color: #fff;
  2159.   background: #16a085;
  2160. }
  2161. .product-grid4 .social li a:after, .product-grid4 .social li a:before {
  2162.   content: attr(data-tip);
  2163.   color: #fff;
  2164.   background-color: #000;
  2165.   font-size: 12px;
  2166.   line-height: 20px;
  2167.   border-radius: 3px;
  2168.   padding: 0 5px;
  2169.   white-space: nowrap;
  2170.   opacity: 0;
  2171.   -webkit-transform: translateX(-50%);
  2172.           transform: translateX(-50%);
  2173.   position: absolute;
  2174.   left: 50%;
  2175.   top: -30px;
  2176. }
  2177. .product-grid4 .social li a:after {
  2178.   content: '';
  2179.   height: 15px;
  2180.   width: 15px;
  2181.   border-radius: 0;
  2182.   -webkit-transform: translateX(-50%) rotate(45deg);
  2183.           transform: translateX(-50%) rotate(45deg);
  2184.   top: -22px;
  2185.   z-index: -1;
  2186. }
  2187. .product-grid4 .social li a:hover:after, .product-grid4 .social li a:hover:before {
  2188.   opacity: 1;
  2189. }
  2190. .product-grid4 .product-discount-label, .product-grid4 .product-new-label {
  2191.   color: #fff;
  2192.   background-color: #16a085;
  2193.   font-size: 13px;
  2194.   font-weight: 800;
  2195.   text-transform: uppercase;
  2196.   line-height: 45px;
  2197.   height: 45px;
  2198.   width: 45px;
  2199.   border-radius: 50%;
  2200.   position: absolute;
  2201.   left: 10px;
  2202.   top: 15px;
  2203.   -webkit-transition: all .3s;
  2204.   transition: all .3s;
  2205. }
  2206. .product-grid4 .product-discount-label {
  2207.   left: auto;
  2208.   right: 10px;
  2209.   background-color: #d7292a;
  2210. }
  2211. .product-grid4:hover .product-new-label {
  2212.   opacity: 0;
  2213. }
  2214. .product-grid4 .product-content {
  2215.   padding: 25px;
  2216. }
  2217. .product-grid4 .title {
  2218.   font-size: 15px;
  2219.   font-weight: 400;
  2220.   text-transform: capitalize;
  2221.   margin: 0 0 7px;
  2222.   -webkit-transition: all .3s ease 0s;
  2223.   transition: all .3s ease 0s;
  2224. }
  2225. .product-grid4 .title a {
  2226.   color: #222;
  2227. }
  2228. .product-grid4 .title a:hover {
  2229.   color: #16a085;
  2230. }
  2231. .product-grid4 .price {
  2232.   color: #16a085;
  2233.   font-size: 17px;
  2234.   font-weight: 700;
  2235.   margin: 0 2px 15px 0;
  2236.   display: block;
  2237. }
  2238. .product-grid4 .price span {
  2239.   color: #909090;
  2240.   font-size: 13px;
  2241.   font-weight: 400;
  2242.   letter-spacing: 0;
  2243.   text-decoration: line-through;
  2244.   text-align: left;
  2245.   vertical-align: middle;
  2246.   display: inline-block;
  2247. }
  2248. .product-grid4 .add-to-cart {
  2249.   border: 1px solid #e5e5e5;
  2250.   display: inline-block;
  2251.   padding: 10px 20px;
  2252.   color: #888;
  2253.   font-weight: 600;
  2254.   font-size: 14px;
  2255.   border-radius: 4px;
  2256.   -webkit-transition: all .3s;
  2257.   transition: all .3s;
  2258. }
  2259. .product-grid4:hover .add-to-cart {
  2260.   border: 1px solid transparent;
  2261.   background: #16a085;
  2262.   color: #fff;
  2263. }
  2264. .product-grid4 .add-to-cart:hover {
  2265.   background-color: #505050;
  2266.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  2267. }
  2269. @media only screen and (max-width: 990px) {
  2270.   .product-grid4 {
  2271.     margin-bottom: 30px;
  2272.   }
  2273. }
  2274. /********************* Shopping Demo-5 **********************/
  2275. .product-image5 .pic-1, .product-image5 .pic-2 {
  2276.   -webkit-backface-visibility: hidden;
  2277.           backface-visibility: hidden;
  2278.   -webkit-transition: all .5s ease 0s;
  2279.   transition: all .5s ease 0s;
  2280. }
  2282. .product-grid5 {
  2283.   font-family: Poppins,sans-serif;
  2284.   position: relative;
  2285. }
  2286. .product-grid5 .product-image5 {
  2287.   overflow: hidden;
  2288.   position: relative;
  2289. }
  2290. .product-grid5 .product-image5 a {
  2291.   display: block;
  2292. }
  2293. .product-grid5 .product-image5 img {
  2294.   width: 100%;
  2295.   height: auto;
  2296. }
  2298. .product-image5 .pic-1 {
  2299.   opacity: 1;
  2300. }
  2302. .product-grid5:hover .product-image5 .pic-1 {
  2303.   opacity: 0;
  2304. }
  2306. .product-image5 .pic-2 {
  2307.   width: 100%;
  2308.   height: 100%;
  2309.   opacity: 0;
  2310.   position: absolute;
  2311.   top: 0;
  2312.   left: 0;
  2313. }
  2315. .product-grid5:hover .product-image5 .pic-2 {
  2316.   opacity: 1;
  2317. }
  2318. .product-grid5 .social {
  2319.   padding: 0;
  2320.   margin: 0;
  2321.   position: absolute;
  2322.   top: 10px;
  2323.   right: 10px;
  2324. }
  2325. .product-grid5 .social li {
  2326.   display: block;
  2327.   margin: 0 0 10px;
  2328.   -webkit-transition: all .5s;
  2329.   transition: all .5s;
  2330. }
  2331. .product-grid5 .social li:nth-child(2) {
  2332.   opacity: 0;
  2333.   -webkit-transform: translateY(-50px);
  2334.           transform: translateY(-50px);
  2335. }
  2336. .product-grid5:hover .social li:nth-child(2) {
  2337.   opacity: 1;
  2338.   -webkit-transform: translateY(0);
  2339.           transform: translateY(0);
  2340. }
  2341. .product-grid5 .social li:nth-child(3) {
  2342.   opacity: 0;
  2343.   -webkit-transform: translateY(-50px);
  2344.           transform: translateY(-50px);
  2345. }
  2346. .product-grid5:hover .social li:nth-child(3) {
  2347.   opacity: 1;
  2348.   -webkit-transform: translateY(0);
  2349.           transform: translateY(0);
  2350.   -webkit-transition-delay: .2s;
  2351.           transition-delay: .2s;
  2352. }
  2353. .product-grid5 .social li a {
  2354.   color: #888;
  2355.   background: #fff;
  2356.   font-size: 14px;
  2357.   text-align: center;
  2358.   line-height: 40px;
  2359.   height: 40px;
  2360.   width: 40px;
  2361.   border-radius: 50%;
  2362.   display: block;
  2363.   -webkit-transition: .5s ease 0s;
  2364.   transition: .5s ease 0s;
  2365. }
  2366. .product-grid5 .social li a:hover {
  2367.   color: #fff;
  2368.   background: #1e3799;
  2369. }
  2370. .product-grid5 .select-options {
  2371.   color: #777;
  2372.   background-color: #fff;
  2373.   font-size: 13px;
  2374.   font-weight: 400;
  2375.   text-align: center;
  2376.   text-transform: uppercase;
  2377.   padding: 15px 5px;
  2378.   margin: 0 auto;
  2379.   opacity: 0;
  2380.   display: block;
  2381.   position: absolute;
  2382.   width: 92%;
  2383.   left: 0;
  2384.   bottom: -100px;
  2385.   right: 0;
  2386.   -webkit-transition: .5s ease 0s;
  2387.   transition: .5s ease 0s;
  2388. }
  2389. .product-grid5 .select-options:hover {
  2390.   color: #fff;
  2391.   background-color: #1e3799;
  2392.   text-decoration: none;
  2393. }
  2394. .product-grid5:hover .select-options {
  2395.   opacity: 1;
  2396.   bottom: 10px;
  2397. }
  2398. .product-grid5 .product-content {
  2399.   padding: 20px 10px;
  2400. }
  2401. .product-grid5 .title {
  2402.   font-size: 15px;
  2403.   font-weight: 600;
  2404.   text-transform: capitalize;
  2405.   margin: 0 0 10px;
  2406.   -webkit-transition: all .3s ease 0s;
  2407.   transition: all .3s ease 0s;
  2408. }
  2409. .product-grid5 .title a {
  2410.   color: #222;
  2411. }
  2412. .product-grid5 .title a:hover {
  2413.   color: #1e3799;
  2414. }
  2415. .product-grid5 .price {
  2416.   color: #222;
  2417.   font-size: 13px;
  2418.   font-weight: 500;
  2419.   letter-spacing: 1px;
  2420. }
  2422. @media only screen and (max-width: 990px) {
  2423.   .product-grid5 {
  2424.     margin-bottom: 30px;
  2425.   }
  2426. }
  2427. /********************* Shopping Demo-6 **********************/
  2428. .product-grid6 {
  2429.   overflow: hidden;
  2430.   font-family: 'Open Sans',sans-serif;
  2431.   text-align: center;
  2432.   position: relative;
  2433.   -webkit-transition: all .5s ease 0s;
  2434.   transition: all .5s ease 0s;
  2435. }
  2436. .product-grid6 .product-image6 {
  2437.   overflow: hidden;
  2438. }
  2439. .product-grid6:hover {
  2440.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  2441. }
  2442. .product-grid6 .product-image6 a {
  2443.   display: block;
  2444. }
  2445. .product-grid6 .product-image6 img {
  2446.   width: 100%;
  2447.   height: auto;
  2448.   -webkit-transition: all .5s ease 0s;
  2449.   transition: all .5s ease 0s;
  2450. }
  2451. .product-grid6:hover .product-image6 img {
  2452.   -webkit-transform: scale(1.1);
  2453.           transform: scale(1.1);
  2454. }
  2455. .product-grid6 .product-content {
  2456.   padding: 12px 12px 15px;
  2457.   -webkit-transition: all .5s ease 0s;
  2458.   transition: all .5s ease 0s;
  2459. }
  2460. .product-grid6:hover .product-content {
  2461.   opacity: 0;
  2462. }
  2463. .product-grid6 .title {
  2464.   font-size: 20px;
  2465.   font-weight: 600;
  2466.   text-transform: capitalize;
  2467.   margin: 0 0 10px;
  2468.   -webkit-transition: all .3s ease 0s;
  2469.   transition: all .3s ease 0s;
  2470. }
  2471. .product-grid6 .title a {
  2472.   color: #000;
  2473. }
  2474. .product-grid6 .title a:hover {
  2475.   color: #2e86de;
  2476. }
  2477. .product-grid6 .price {
  2478.   font-size: 18px;
  2479.   font-weight: 600;
  2480.   color: #2e86de;
  2481. }
  2482. .product-grid6 .price span {
  2483.   color: #999;
  2484.   font-size: 15px;
  2485.   font-weight: 400;
  2486.   text-decoration: line-through;
  2487.   margin-left: 7px;
  2488.   display: inline-block;
  2489. }
  2490. .product-grid6 .social {
  2491.   background-color: #fff;
  2492.   width: 100%;
  2493.   padding: 0;
  2494.   margin: 0;
  2495.   list-style: none;
  2496.   opacity: 0;
  2497.   -webkit-transform: translateX(-50%);
  2498.           transform: translateX(-50%);
  2499.   position: absolute;
  2500.   bottom: -50%;
  2501.   left: 50%;
  2502.   z-index: 1;
  2503.   -webkit-transition: all .5s ease 0s;
  2504.   transition: all .5s ease 0s;
  2505. }
  2506. .product-grid6:hover .social {
  2507.   opacity: 1;
  2508.   bottom: 20px;
  2509. }
  2510. .product-grid6 .social li {
  2511.   display: inline-block;
  2512. }
  2513. .product-grid6 .social li a {
  2514.   color: #909090;
  2515.   font-size: 16px;
  2516.   line-height: 45px;
  2517.   text-align: center;
  2518.   height: 45px;
  2519.   width: 45px;
  2520.   margin: 0 7px;
  2521.   border: 1px solid #909090;
  2522.   border-radius: 50px;
  2523.   display: block;
  2524.   position: relative;
  2525.   -webkit-transition: all .3s ease-in-out;
  2526.   transition: all .3s ease-in-out;
  2527. }
  2528. .product-grid6 .social li a:hover {
  2529.   color: #fff;
  2530.   background-color: #2e86de;
  2531.   width: 80px;
  2532. }
  2533. .product-grid6 .social li a:after, .product-grid6 .social li a:before {
  2534.   content: attr(data-tip);
  2535.   color: #fff;
  2536.   background-color: #2e86de;
  2537.   font-size: 12px;
  2538.   letter-spacing: 1px;
  2539.   line-height: 20px;
  2540.   padding: 1px 5px;
  2541.   border-radius: 5px;
  2542.   white-space: nowrap;
  2543.   opacity: 0;
  2544.   -webkit-transform: translateX(-50%);
  2545.           transform: translateX(-50%);
  2546.   position: absolute;
  2547.   left: 50%;
  2548.   top: -30px;
  2549. }
  2550. .product-grid6 .social li a:after {
  2551.   content: '';
  2552.   height: 15px;
  2553.   width: 15px;
  2554.   border-radius: 0;
  2555.   -webkit-transform: translateX(-50%) rotate(45deg);
  2556.           transform: translateX(-50%) rotate(45deg);
  2557.   top: -20px;
  2558.   z-index: -1;
  2559. }
  2560. .product-grid6 .social li a:hover:after, .product-grid6 .social li a:hover:before {
  2561.   opacity: 1;
  2562. }
  2564. @media only screen and (max-width: 990px) {
  2565.   .product-grid6 {
  2566.     margin-bottom: 30px;
  2567.   }
  2568. }
  2569. /********************* Shopping Demo-7 **********************/
  2570. .product-grid7 {
  2571.   font-family: 'Roboto Slab',serif;
  2572.   position: relative;
  2573.   z-index: 1;
  2574. }
  2575. .product-grid7 .product-image7 {
  2576.   border: 1px solid rgba(0, 0, 0, 0.1);
  2577.   overflow: hidden;
  2578.   -webkit-perspective: 1500px;
  2579.           perspective: 1500px;
  2580.   position: relative;
  2581.   -webkit-transition: all .3s ease 0s;
  2582.   transition: all .3s ease 0s;
  2583. }
  2584. .product-grid7 .product-image7 a {
  2585.   display: block;
  2586. }
  2587. .product-grid7 .product-image7 img {
  2588.   width: 100%;
  2589.   height: auto;
  2590. }
  2591. .product-grid7 .pic-1 {
  2592.   opacity: 1;
  2593.   -webkit-transition: all .5s ease-out 0s;
  2594.   transition: all .5s ease-out 0s;
  2595. }
  2596. .product-grid7 .pic-2 {
  2597.   opacity: 0;
  2598.   -webkit-transform: rotateY(-90deg);
  2599.           transform: rotateY(-90deg);
  2600.   position: absolute;
  2601.   top: 0;
  2602.   left: 0;
  2603.   -webkit-transition: all .5s ease-out 0s;
  2604.   transition: all .5s ease-out 0s;
  2605. }
  2606. .product-grid7:hover .pic-2 {
  2607.   opacity: 1;
  2608.   -webkit-transform: rotateY(0);
  2609.           transform: rotateY(0);
  2610. }
  2611. .product-grid7 .social {
  2612.   padding: 0;
  2613.   margin: 0;
  2614.   list-style: none;
  2615.   position: absolute;
  2616.   bottom: 3px;
  2617.   left: -20%;
  2618.   z-index: 1;
  2619.   -webkit-transition: all .5s ease 0s;
  2620.   transition: all .5s ease 0s;
  2621. }
  2622. .product-grid7:hover .social {
  2623.   left: 17px;
  2624. }
  2625. .product-grid7 .social li a {
  2626.   color: #fff;
  2627.   background-color: #333;
  2628.   font-size: 16px;
  2629.   line-height: 40px;
  2630.   text-align: center;
  2631.   height: 40px;
  2632.   width: 40px;
  2633.   margin: 15px 0;
  2634.   border-radius: 50%;
  2635.   display: block;
  2636.   -webkit-transition: all .5s ease-in-out;
  2637.   transition: all .5s ease-in-out;
  2638. }
  2639. .product-grid7 .social li a:hover {
  2640.   color: #fff;
  2641.   background-color: #78e08f;
  2642. }
  2643. .product-grid7 .product-new-label {
  2644.   color: #fff;
  2645.   background-color: #333;
  2646.   padding: 5px 10px;
  2647.   border-radius: 5px;
  2648.   display: block;
  2649.   position: absolute;
  2650.   top: 10px;
  2651.   left: 10px;
  2652. }
  2653. .product-grid7 .product-content {
  2654.   text-align: center;
  2655.   padding: 20px 0 0;
  2656. }
  2657. .product-grid7 .title {
  2658.   font-size: 15px;
  2659.   font-weight: 600;
  2660.   text-transform: capitalize;
  2661.   margin: 0 0 10px;
  2662.   -webkit-transition: all .3s ease 0s;
  2663.   transition: all .3s ease 0s;
  2664. }
  2665. .product-grid7 .title a {
  2666.   color: #333;
  2667. }
  2668. .product-grid7 .title a:hover {
  2669.   color: #78e08f;
  2670. }
  2671. .product-grid7 .rating {
  2672.   color: #78e08f;
  2673.   font-size: 12px;
  2674.   padding: 0;
  2675.   margin: 0 0 10px;
  2676.   list-style: none;
  2677. }
  2678. .product-grid7 .price {
  2679.   color: #333;
  2680.   font-size: 20px;
  2681.   font-family: Lora,serif;
  2682.   font-weight: 700;
  2683.   margin-bottom: 8px;
  2684.   text-align: center;
  2685.   -webkit-transition: all .3s;
  2686.   transition: all .3s;
  2687. }
  2688. .product-grid7 .price span {
  2689.   color: #999;
  2690.   font-size: 14px;
  2691.   font-weight: 700;
  2692.   text-decoration: line-through;
  2693.   margin-left: 7px;
  2694.   display: inline-block;
  2695. }
  2697. @media only screen and (max-width: 990px) {
  2698.   .product-grid7 {
  2699.     margin-bottom: 30px;
  2700.   }
  2701. }
  2702. /********************* Shopping Demo-8 **********************/
  2703. .product-grid8 {
  2704.   font-family: Poppins,sans-serif;
  2705.   position: relative;
  2706.   z-index: 1;
  2707. }
  2708. .product-grid8 .product-image8 {
  2709.   border: 1px solid #e4e9ef;
  2710.   position: relative;
  2711.   -webkit-transition: all .3s ease 0s;
  2712.   transition: all .3s ease 0s;
  2713. }
  2714. .product-grid8:hover .product-image8 {
  2715.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  2716. }
  2717. .product-grid8 .product-image8 a {
  2718.   display: block;
  2719. }
  2720. .product-grid8 .product-image8 img {
  2721.   width: 100%;
  2722.   height: auto;
  2723. }
  2724. .product-grid8 .pic-1 {
  2725.   opacity: 1;
  2726.   -webkit-transition: all .5s ease-out 0s;
  2727.   transition: all .5s ease-out 0s;
  2728. }
  2729. .product-grid8:hover .pic-1 {
  2730.   opacity: 0;
  2731. }
  2732. .product-grid8 .pic-2 {
  2733.   opacity: 0;
  2734.   position: absolute;
  2735.   top: 0;
  2736.   left: 0;
  2737.   -webkit-transition: all .5s ease-out 0s;
  2738.   transition: all .5s ease-out 0s;
  2739. }
  2740. .product-grid8:hover .pic-2 {
  2741.   opacity: 1;
  2742. }
  2743. .product-grid8 .social {
  2744.   padding: 0;
  2745.   margin: 0;
  2746.   list-style: none;
  2747.   position: absolute;
  2748.   bottom: 13px;
  2749.   right: 13px;
  2750.   z-index: 1;
  2751. }
  2752. .product-grid8 .social li {
  2753.   opacity: 0;
  2754.   -webkit-transform: translateY(3px);
  2755.           transform: translateY(3px);
  2756.   -webkit-transition: all .5s ease 0s;
  2757.   transition: all .5s ease 0s;
  2758. }
  2759. .product-grid8:hover .social li {
  2760.   margin: 0 0 10px;
  2761.   opacity: 1;
  2762.   -webkit-transform: translateY(0);
  2763.           transform: translateY(0);
  2764. }
  2765. .product-grid8:hover .social li:nth-child(1) {
  2766.   -webkit-transition-delay: .1s;
  2767.           transition-delay: .1s;
  2768. }
  2769. .product-grid8:hover .social li:nth-child(2) {
  2770.   -webkit-transition-delay: .2s;
  2771.           transition-delay: .2s;
  2772. }
  2773. .product-grid8:hover .social li:nth-child(3) {
  2774.   -webkit-transition-delay: .4s;
  2775.           transition-delay: .4s;
  2776. }
  2777. .product-grid8 .social li a {
  2778.   color: grey;
  2779.   font-size: 17px;
  2780.   line-height: 40px;
  2781.   text-align: center;
  2782.   height: 40px;
  2783.   width: 40px;
  2784.   border: 1px solid grey;
  2785.   display: block;
  2786.   -webkit-transition: all .5s ease-in-out;
  2787.   transition: all .5s ease-in-out;
  2788. }
  2789. .product-grid8 .social li a:hover {
  2790.   color: #000;
  2791.   border-color: #000;
  2792. }
  2793. .product-grid8 .product-discount-label {
  2794.   display: block;
  2795.   padding: 4px 15px 4px 30px;
  2796.   color: #fff;
  2797.   background-color: #0081c2;
  2798.   position: absolute;
  2799.   top: 10px;
  2800.   right: 0;
  2801.   -webkit-clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
  2802.   clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
  2803. }
  2804. .product-grid8 .product-content {
  2805.   padding: 20px 0 0;
  2806. }
  2807. .product-grid8 .price {
  2808.   color: #000;
  2809.   font-size: 19px;
  2810.   font-weight: 400;
  2811.   margin-bottom: 8px;
  2812.   text-align: left;
  2813.   -webkit-transition: all .3s;
  2814.   transition: all .3s;
  2815. }
  2816. .product-grid8 .price span {
  2817.   color: #999;
  2818.   font-size: 14px;
  2819.   font-weight: 500;
  2820.   text-decoration: line-through;
  2821.   margin-left: 7px;
  2822.   display: inline-block;
  2823. }
  2824. .product-grid8 .product-shipping {
  2825.   color: rgba(0, 0, 0, 0.5);
  2826.   font-size: 15px;
  2827.   padding-left: 35px;
  2828.   margin: 0 0 15px;
  2829.   display: block;
  2830.   position: relative;
  2831. }
  2832. .product-grid8 .product-shipping:before {
  2833.   content: '';
  2834.   height: 1px;
  2835.   width: 25px;
  2836.   background-color: rgba(0, 0, 0, 0.5);
  2837.   -webkit-transform: translateY(-50%);
  2838.           transform: translateY(-50%);
  2839.   position: absolute;
  2840.   top: 50%;
  2841.   left: 0;
  2842. }
  2843. .product-grid8 .title {
  2844.   font-size: 16px;
  2845.   font-weight: 400;
  2846.   text-transform: capitalize;
  2847.   margin: 0 0 30px;
  2848.   -webkit-transition: all .3s ease 0s;
  2849.   transition: all .3s ease 0s;
  2850. }
  2851. .product-grid8 .title a {
  2852.   color: #000;
  2853. }
  2854. .product-grid8 .title a:hover {
  2855.   color: #0081c2;
  2856. }
  2857. .product-grid8 .all-deals {
  2858.   display: block;
  2859.   color: #fff;
  2860.   background-color: #2e353b;
  2861.   font-size: 15px;
  2862.   letter-spacing: 1px;
  2863.   text-align: center;
  2864.   text-transform: uppercase;
  2865.   padding: 22px 5px;
  2866.   -webkit-transition: all .5s ease 0s;
  2867.   transition: all .5s ease 0s;
  2868. }
  2869. .product-grid8 .all-deals .icon {
  2870.   margin-left: 7px;
  2871. }
  2872. .product-grid8 .all-deals:hover {
  2873.   background-color: #0081c2;
  2874. }
  2876. @media only screen and (max-width: 990px) {
  2877.   .product-grid8 {
  2878.     margin-bottom: 30px;
  2879.   }
  2880. }
  2881. /********************* Shopping Demo-9 **********************/
  2882. .product-grid9 {
  2883.   position: relative;
  2884.   font-family: Poppins,sans-serif;
  2885.   z-index: 1;
  2886. }
  2887. .product-grid9 .product-image9 {
  2888.   position: relative;
  2889. }
  2890. .product-grid9 .product-image9 a {
  2891.   display: block;
  2892. }
  2893. .product-grid9 .product-image9 img {
  2894.   width: 100%;
  2895.   height: auto;
  2896. }
  2897. .product-grid9 .pic-1 {
  2898.   opacity: 1;
  2899.   -webkit-transition: all .5s ease-out 0s;
  2900.   transition: all .5s ease-out 0s;
  2901. }
  2902. .product-grid9:hover .pic-1 {
  2903.   opacity: 0;
  2904. }
  2905. .product-grid9 .pic-2 {
  2906.   position: absolute;
  2907.   top: 0;
  2908.   left: 0;
  2909.   opacity: 0;
  2910.   -webkit-transition: all .5s ease-out 0s;
  2911.   transition: all .5s ease-out 0s;
  2912. }
  2913. .product-grid9:hover .pic-2 {
  2914.   opacity: 1;
  2915. }
  2916. .product-grid9 .product-full-view {
  2917.   color: #505050;
  2918.   background-color: #fff;
  2919.   font-size: 16px;
  2920.   height: 45px;
  2921.   width: 45px;
  2922.   padding: 18px;
  2923.   border-radius: 100px 0 0;
  2924.   display: block;
  2925.   opacity: 0;
  2926.   position: absolute;
  2927.   right: 0;
  2928.   bottom: 0;
  2929.   -webkit-transition: all .3s ease 0s;
  2930.   transition: all .3s ease 0s;
  2931. }
  2932. .product-grid9 .product-full-view:hover {
  2933.   color: #c0392b;
  2934. }
  2935. .product-grid9:hover .product-full-view {
  2936.   opacity: 1;
  2937. }
  2938. .product-grid9 .product-content {
  2939.   padding: 12px 12px 0;
  2940.   overflow: hidden;
  2941.   position: relative;
  2942. }
  2944. .product-content .rating {
  2945.   padding: 0;
  2946.   margin: 0 0 7px;
  2947.   list-style: none;
  2948. }
  2950. .product-grid9 .rating li {
  2951.   font-size: 12px;
  2952.   color: #ffd200;
  2953.   -webkit-transition: all .3s ease 0s;
  2954.   transition: all .3s ease 0s;
  2955. }
  2956. .product-grid9 .rating li.disable {
  2957.   color: rgba(0, 0, 0, 0.2);
  2958. }
  2959. .product-grid9 .title {
  2960.   font-size: 16px;
  2961.   font-weight: 400;
  2962.   text-transform: capitalize;
  2963.   margin: 0 0 3px;
  2964.   -webkit-transition: all .3s ease 0s;
  2965.   transition: all .3s ease 0s;
  2966. }
  2967. .product-grid9 .title a {
  2968.   color: rgba(0, 0, 0, 0.5);
  2969. }
  2970. .product-grid9 .title a:hover {
  2971.   color: #c0392b;
  2972. }
  2973. .product-grid9 .price {
  2974.   color: #000;
  2975.   font-size: 17px;
  2976.   margin: 0;
  2977.   display: block;
  2978.   -webkit-transition: all .5s ease 0s;
  2979.   transition: all .5s ease 0s;
  2980. }
  2981. .product-grid9:hover .price {
  2982.   opacity: 0;
  2983. }
  2984. .product-grid9 .add-to-cart {
  2985.   display: block;
  2986.   color: #c0392b;
  2987.   font-weight: 600;
  2988.   font-size: 14px;
  2989.   opacity: 0;
  2990.   position: absolute;
  2991.   left: 10px;
  2992.   bottom: -20px;
  2993.   -webkit-transition: all .5s ease 0s;
  2994.   transition: all .5s ease 0s;
  2995. }
  2996. .product-grid9:hover .add-to-cart {
  2997.   opacity: 1;
  2998.   bottom: 0;
  2999. }
  3001. @media only screen and (max-width: 990px) {
  3002.   .product-grid9 {
  3003.     margin-bottom: 30px;
  3004.   }
  3005. }
  3008. .dropdown-btn {
  3009.   position: relative;
  3010.   display: inline-block;
  3011.   z-index: 10;
  3012.   width: 100%; height: 100%; cursor: pointer;
  3013.   color: #333;
  3014.   padding-top: 3px;
  3015. }
  3017. .dropdown__menu {
  3018.   display: none;
  3019.   position: absolute;
  3020.   top: 100%;
  3021.   right: 0;
  3022.   min-width: 200px;
  3023.   background: #fff;
  3024.   margin-top: 10px;
  3025.   border: 1px solid #F4F5F7;
  3026.   border-radius: 4px;
  3027.   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  3028.   text-align: left!important;
  3029. }
  3030. .dropdown__menu--active {
  3031.   display: block;
  3032. }
  3033. .dropdown__option {
  3034.   display: block;
  3035.   padding: 10px 15px;
  3036.   text-decoration: none;
  3037.   color: #000;
  3038.   transition: all .2s ease-in-out;
  3039.   line-height: 13px;
  3040.   text-transform: capitalize;
  3041. }
  3042. .dropdown__option:hover {
  3043.   background: #F4F5F7;
  3044.   padding-left: 20px !important;
  3045. }
  3046. .dropdown__option:not(:last-child) {
  3047.   border-bottom: 1px solid #F4F5F7;
  3048. }
  3049. .product-discount-label{
  3050.   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);
  3051.   transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  3052. }
  3055. .flex-container {
  3056.   display: flex;
  3057.   justify-content: center;
  3058.   flex-direction: column;
  3059.   align-items: center;
  3060. }
  3062. .flex-container > div {
  3063. padding-top:10px;
  3064. }
  3065. .paginate-ctn{
  3066.     display: flex;
  3067. }
  3068. .round-effect{
  3069.   color:#DD4124;
  3070.   cursor:pointer;
  3071. \t/*   border:1px solid red; */
  3073.   font-size:16px;
  3074.   text-align:center;
  3075.   padding-left:10px;
  3076.   padding-right:10px;
  3077.   padding-top:9px;
  3078.   border-radius: 50%;
  3079.   height: 40px;
  3080.   width: 40px;
  3081.   margin:5px;
  3082.   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  3083.    text-decoration: none;
  3084. }
  3086. .round-effect:hover{
  3087.   text-decoration: none;
  3088.   background:#DD4124;
  3089.   color:#FFF;
  3090. }
  3091. .round-effect:hover a {
  3092.   text-decoration: none;
  3093.   color:#FFF;
  3094. }
  3096. .activepage{
  3097.   background:#DD4124;
  3098.   color:#FFF!important;
  3099. }
  3101. .header-wave {
  3102.   position: relative;
  3103.   min-height: 200px;
  3104.   background: transparent;
  3105.   background-image: linear-gradient(155deg, #f4f4f4 0%, #f4f4f4 50%, #f4f4f4 100%);
  3106. }
  3108. .header-wave h1 {
  3109.   color: white;
  3110. }
  3112. .svg-wave {
  3113.   position: absolute;
  3114.   bottom: 0;
  3115.   width: 100%;
  3116.   height: auto;
  3117. }
  3119. .section-wave{
  3120. \tposition: relative;
  3121. \tmargin: 0;
  3122. \tpadding: 0;
  3123. \tbackground: white;
  3124. \twidth: 100%;
  3125. \theight: 200px;
  3126. }
  3128. #worf{
  3129. \tposition: absolute;
  3130. \tbottom: 0;
  3131. \twidth: 100%;
  3132. \tz-index: 1;
  3133. }
  3135. #worf path{
  3136.   fill: url(#grad1)
  3137. }
  3139. section.section-2{
  3140. \twidth: 100%;
  3141. \theight: 200px;
  3142. \tbackground: linear-gradient(to right, #dffdgg 0%,#f2f2f2 100%);
  3143. }
  3147. #client-logos .item {
  3148. \tmargin: 1px;
  3149. }
  3150. .cover-wrapper {
  3151. \tpadding: 5px 0px;
  3152. }
  3153. .client-inners img {
  3154. \theight: 100%;
  3155. \tobject-fit: contain;
  3156. }
  3157. .client-inners{
  3158. \tborder: 1px solid #ccc;
  3159. \theight: 90px;
  3160. \ttext-align: center;
  3161. \tpadding: 0px;
  3162. }
  3163. .owl-nav img {
  3164. \twidth: 34px;
  3165. }
  3166. .owl-prev img {
  3167. \tposition: absolute;
  3168. \tleft: -38px;
  3169. \ttop: 40px;
  3170. }
  3171. .owl-next img {
  3172. \tposition: absolute;
  3173. \tright: -38px;
  3174. \ttop: 40px;
  3175. }
  3176. .item-inner:hover{
  3177. \tbackground: #f8f8f8;
  3178. \tbox-shadow: 0px 0px 3px 1px #333;
  3179. }
  3180. .theme-bg-light{
  3181. border: 1px  #CCC solid;
  3183. box-shadow:
  3184. inset 0px 11px 8px -10px #CCC,
  3185. inset 0px -11px 8px -10px #CCC;
  3186. }
  3188. .logo-partner .owl-stage-outer{
  3189. \tmax-height: 150px!important;
  3190. }
  3191. .item{
  3192. \tborder: none;
  3193. \tmin-height: 100px;
  3194. }
  3195. #client-logos .item{
  3196. \t/*box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)!important;*/
  3197. }
  3198. .item:hover{
  3199. \tbackground: #f7f7f7;
  3200. }
  3201. .owl-dots{
  3202. \tdisplay: none;
  3203. }
  3205. .info-popop-home{
  3206. \tbackground: #d7d7d7; width: 25px; padding-top: 6px; color: #fff; height: 25px; border-radius: 50%;display: inline-block;
  3207. }
  3209. .go-corner {
  3210.   display: -webkit-box;
  3211.   display: flex;
  3212.   -webkit-box-align: center;
  3213. \t\t  align-items: center;
  3214.   -webkit-box-pack: center;
  3215. \t\t  justify-content: center;
  3216.   position: absolute;
  3217.   width: 32px;
  3218.   height: 32px;
  3219.   overflow: hidden;
  3220.   top: 0;
  3221.   right: 0;
  3222.   background-color: #00838d;
  3223.   border-radius: 0 4px 0 32px;
  3224. }
  3226. .go-arrow {
  3227.   margin-top: -4px;
  3228.   margin-right: -4px;
  3229.   color: white;
  3230.   font-family: courier, sans;
  3231. }
  3232. .card4 {
  3233.   display: block;
  3234.   top: 0px;
  3235.   position: relative;
  3236.   width: 100%!important;
  3237.   min-height: 200px;PPM
  3238.   background-color: #ffffff;
  3239.   border-radius: 4px;
  3240.   padding: 32px 24px;
  3241.   margin: 15px 0px 0px 0px;
  3242.   text-decoration: none;
  3243.   overflow: hidden;
  3244.   border: 1px solid #cccccc;
  3245.   box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075) !important;
  3246. }
  3247. .card4 .go-corner {
  3248.   background-color: #00838d;
  3249.   height: 100%;
  3250.   width: 16px;
  3251.   padding-right: 9px;
  3252.   border-radius: 0;
  3253.   -webkit-transform: skew(6deg);
  3254. \t\t  transform: skew(6deg);
  3255.   margin-right: -36px;
  3256.   -webkit-box-align: start;
  3257. \t\t  align-items: start;
  3258.   background-image: linear-gradient(-45deg, #8F479A 1%, #DC2A74 100%);
  3259. }
  3260. .card4 .go-arrow {
  3261.   -webkit-transform: skew(-6deg);
  3262. \t\t  transform: skew(-6deg);
  3263.   margin-left: -2px;
  3264.   margin-top: 9px;
  3265.   opacity: 0;
  3266. }
  3267. .card4:hover {
  3268.   border: 1px solid #CD3D73;
  3269. }
  3270. .card4 h3 {
  3271.   margin-top: 8px;
  3272. }
  3274. .card4:hover .go-corner {
  3275.   margin-right: -12px;
  3276. }
  3277. .card4:hover .go-arrow {
  3278.   opacity: 1;
  3279. }
  3280. .divider{
  3281. \tborder-top: 2px dashed #999;
  3282. }
  3284. .basis-member.staff {
  3286. }
  3288. .basis-member.staff .member-box {
  3289.     position: relative;
  3290.     border-radius: 5px;
  3291.     overflow: hidden;
  3292.     margin-bottom: 30px;
  3293. }
  3295. .basis-member.staff .member-box .card-body {
  3296.     position: relative;
  3297.     height: 150px
  3298. }
  3300. .shadow-lg:hover{
  3301. \tbox-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  3302.   transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  3303. }
  3305. .basis-member.staff .member-box .shape {
  3306.     width: 200px;
  3307.     height: 200px;
  3308.     background: var(--primary);
  3309.     opacity: 0.2;
  3310.     position: absolute;
  3311.     top: 0;
  3312.     right: -100px;
  3313.     transform: rotate(45deg);
  3314. }
  3316. .basis-member.staff .member-box .card-img-top {
  3317.     position: relative;
  3318.     width: 150px;
  3319.     height: 150px;
  3320.     border-radius: 50%;
  3321.     border-top-left-radius: 0;
  3322.     border-bottom: 5px solid var(--primary);
  3323. }
  3325. .basis-member.staff .member-box .member-title {
  3326.     font-size: 20px;
  3327.     font-weight: 600;
  3328.     letter-spacing: -0.025em;
  3329. }
  3331. .header.shop .list-main span {
  3332. \tdisplay: inline-block;
  3333. \tcolor: #333;
  3334. \tfont-size: 13px;
  3335. \tfont-weight: 500;
  3336. \tborder-right: 1px solid #f0f0f0;
  3337. \tpadding: 0px 13px;
  3338. }
  3339. .header.shop .list-main span i {
  3340. \tdisplay: inline-block;
  3341. \tmargin-right: 4px;
  3342. \tfont-size: 15px;
  3343. \tcolor: #F7941D;
  3344. \tposition: relative;
  3345. \ttop: 1px;
  3346. }
  3347. .header.shop .list-main span:last-child{
  3348. \tpadding-right:0;
  3349. \tborder:none;
  3350. }
  3351. .header.shop .list-main span a{
  3352. \tcolor:#333;
  3353. }
  3354. .header.shop .list-main span a:hover{
  3355. \tcolor:#F7941D;
  3356. }
  3358. .feature_box_col_one{
  3359. \tdisplay: inline-block;
  3360. \ttext-decoration: none;
  3361. \tcolor: inherit;
  3362. }
  3364. .cardop-item {
  3365. \tbackground: #fff;
  3366. \ttext-align: center;
  3367. \tpadding: 30px 25px;
  3368. \t-webkit-box-shadow:0 0px 25px rgba(0, 0, 0, 0.07);
  3369. \tbox-shadow:0 0px 25px rgba(0, 0, 0, 0.07);
  3370. \tborder-radius: 0px;
  3371. \tmargin-bottom: 30px;
  3372. \t-webkit-transition: all .5s ease 0;
  3373. \ttransition: all .5s ease 0;
  3374. \ttransition: all 0.5s ease 0s;
  3375. \tdisplay: block;
  3376. }
  3377. .cardop-item:hover{
  3378. \tbackground:#fff;
  3379. \tbox-shadow:0 8px 20px 0px rgba(0, 0, 0, 0.2);
  3380. \t-webkit-transition: all .5s ease 0;
  3381. \ttransition: all .5s ease 0;
  3382. \ttransition: all 0.5s ease 0s;
  3383. \tcursor: pointer;
  3384. \tdisplay: block;
  3385. }
  3386. .cardop-item:hover .cardop-item, .cardop-item:hover span.icon{
  3387. \tbackground: #f4f4f4;
  3388. \tborder-radius:10px;
  3389. \t-webkit-transition: all .5s ease 0;
  3390. \ttransition: all .5s ease 0;
  3391. \ttransition: all 0.5s ease 0s;
  3392. }
  3393. .cardop-item:hover h6, .cardop-item:hover p{
  3394. \tcolor:#333;
  3395. \t-webkit-transition: all .5s ease 0;
  3396. \ttransition: all .5s ease 0;
  3397. \ttransition: all 0.5s ease 0s;
  3398. }
  3399. .logo:hover span.icon{
  3400. \tbackground: green;
  3401. \tborder-radius:10px;
  3402. \t-webkit-transition: all .5s ease 0;
  3403. \ttransition: all .5s ease 0;
  3404. \ttransition: all 0.5s ease 0s;
  3405. \tcolor: #fff;
  3406. }
  3407. .logo .icon{
  3408. \tfont-size: 40px;
  3409. \tcolor: #f91942;
  3410. \twidth: 70px;
  3411. \theight: 70px;
  3412. \tpadding-top: 15px;
  3413. \tborder-radius: 50%;
  3414. \tbackground: #f4f4f4;
  3415. }
  3417. .cardop-item .icon{
  3418. \tfont-size: 40px;
  3419. \tmargin-bottom:25px;
  3420. \tcolor: #f91942;
  3421. \twidth: 90px;
  3422. \theight: 90px;
  3423. \tline-height: 96px;
  3424. \tborder-radius: 50px;
  3425. }
  3427. .cardop-item .feature_box_col_one{
  3428. \tbackground:rgba(247, 198, 5, 0.20);
  3429. \tcolor: #3565ae;
  3430. }
  3431. .cardop-item h6{
  3432. \tfont-weight: bold;
  3433. \tmargin-bottom: 7px;
  3434. }
  3436. .menucell {
  3437.     width: 100%;
  3438. }
  3439. .menu-container {
  3440.   margin: 0 auto;
  3441.   background: #3565ae;
  3442. }
  3443. .menucell a.logo {
  3444.     display: inline-block;
  3445.     padding: 1.5em 3em;
  3446.     width: 19%;
  3447.     float: left;
  3448. }
  3449. .menucell img {
  3450.     max-width: 100%;
  3451. }
  3452. .menu-mobile {
  3453.   display: none;
  3454.   padding: 20px;
  3455. }
  3456. .menu-mobile:after {
  3457.   content: \"\\f394\";
  3458.   font-family: \"Ionicons\";
  3459.   font-size: 2.5rem;
  3460.   padding: 0;
  3461.   float: right;
  3462.   position: relative;
  3463.   top: 50%;
  3464.   -webkit-transform: translateY(-25%);
  3465.           transform: translateY(-25%);
  3466. }
  3467. .menu-dropdown-icon:before {
  3468.   content: \"\\f489\";
  3469.   font-family: \"Ionicons\";
  3470.   display: none;
  3471.   cursor: pointer;
  3472.   float: right;
  3473.   padding: 1.5em 2em;
  3474.   background: #fff;
  3475.   color: #333;
  3476. }
  3477. .menucell > ul {
  3478.   margin: 0 auto;
  3479.   width: 100%;
  3480.   list-style: none;
  3481.   padding: 0;
  3482.   position: relative;
  3483.   /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
  3485. }
  3486. .menucell > ul:before,
  3487. .menucell > ul:after {
  3488.   content: \"\";
  3489.   display: table;
  3490. }
  3491. .menucell > ul:after {
  3492.   clear: both;
  3493. }
  3494. .menucell > ul > li {
  3495.   border-right: 1px solid #fff;
  3496.   background: #fff;
  3497.   padding: 0;
  3498.   margin: 0;
  3499. }
  3500. .menucell > ul > li a {
  3501.   text-decoration: none;
  3502.   display: block;
  3503.   padding: 7px 2px;
  3504. }
  3505. .menucell > ul > li:hover {
  3506.   background: #fff;
  3507.   text-align: left;
  3508.   border-right: 1px solid #ddd;
  3509. }
  3510. .menucell > ul > li > ul {
  3511.   display: none;
  3512.   width: 100%;
  3513.   background: #fff;
  3514.   padding: 20px;
  3515.   position: absolute;
  3516.   z-index: 99;
  3517.   right: 0;
  3518.   margin: 0;
  3519.   list-style: none;
  3520.   box-sizing: border-box;
  3521.   box-shadow: 0 4px 4px rgba(0,0,0,0.4);
  3522. }
  3523. .menucell > ul > li > ul:before,
  3524. .menucell > ul > li > ul:after {
  3525.   content: \"\";
  3526.   display: table;
  3527. }
  3528. .menucell > ul > li > ul:after {
  3529.   clear: both;
  3530. }
  3531. .menucell > ul > li > ul > li {
  3532.   margin: 0;
  3533.   padding-bottom: 0;
  3534.   list-style: none;
  3535.   width: 25%;
  3536.   background: none;
  3537.   float: left;
  3538. }
  3539. .menucell > ul > li > ul > li a {
  3540.   color: #777;
  3541.   padding: .2em 0;
  3542.   width: 95%;
  3543.   display: block;
  3544.   border-bottom: 1px solid #ccc;
  3545. }
  3546. .menucell > ul > li > ul > li a:hover{
  3547. \tcolor:#03a9f4;
  3548. }
  3549. .menucell > ul > li > ul > li > ul {
  3550.   display: block;
  3551.   padding: 0;
  3552.   margin: 10px 0 0;
  3553.   list-style: none;
  3554.   box-sizing: border-box;
  3555. }
  3556. .menucell > ul > li > ul > li > ul:before,
  3557. .menucell > ul > li > ul > li > ul:after {
  3558.   content: \"\";
  3559.   display: table;
  3560. }
  3561. .menucell > ul > li > ul > li > ul:after {
  3562.   clear: both;
  3563. }
  3564. .menucell > ul > li > ul > li > ul > li {
  3565.   float: left;
  3566.   width: 100%;
  3567.   padding: 10px 0;
  3568.   margin: 0;
  3569.   font-size: .8em;
  3570. }
  3571. .menucell > ul > li > ul > li > ul > li a {
  3572.   border: 0;
  3573.   font-size: 14px;
  3574. }
  3575. .menucell > ul > li > ul.normal-sub {
  3576.   width: 300px;
  3577.   left: auto;
  3578.   padding: 10px 20px;
  3579. }
  3580. .menucell > ul > li > ul.normal-sub > li {
  3581.   width: 100%;
  3582. }
  3583. .menucell > ul > li > ul.normal-sub > li a {
  3584.   border: 0;
  3585.   padding: 1em 0;
  3586. }
  3588. .menucell > ul > li a{
  3589. \tcolor: #333;
  3590. }
  3591. .menucell > ul > li a:hover{
  3592. \tcolor: #777;
  3593. }
  3595. .menucell ul li{
  3596. margin-top: 0px!important;
  3597. }
  3600. #demo {
  3601.   margin: 20px auto;
  3602.   max-width: 960px;
  3603. }
  3604. #demo h1 {
  3605.   font-size: 2.4rem;
  3606.   line-height: 3.2rem;
  3607.   letter-spacing: 0;
  3608.   font-weight: 300;
  3609.   color: #212121;
  3610.   text-transform: inherit;
  3611.   margin-bottom: 1rem;
  3612.   text-align: center;
  3613. }
  3614. #demo h2 {
  3615.   font-size: 1.5rem;
  3616.   line-height: 2.8rem;
  3617.   letter-spacing: 0.01rem;
  3618.   font-weight: 400;
  3619.   color: #212121;
  3620.   text-align: center;
  3621. }
  3622. .shadow-z-1 {
  3623.   -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
  3624.   -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
  3625.   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  3626. }
  3627. /* -- Material Design Table style -------------- */
  3628. .table {
  3629.   width: 100%;
  3630.   max-width: 100%;
  3631.   margin-bottom: 2rem;
  3632.   background-color: #fff;
  3633. }
  3634. .table > thead > tr,
  3635. .table > tbody > tr,
  3636. .table > tfoot > tr {
  3637.   -webkit-transition: all 0.3s ease;
  3638.   -o-transition: all 0.3s ease;
  3639.   transition: all 0.3s ease;
  3640. }
  3641. .table > thead > tr > th,
  3642. .table > tbody > tr > th,
  3643. .table > tfoot > tr > th,
  3644. .table > thead > tr > td,
  3645. .table > tbody > tr > td,
  3646. .table > tfoot > tr > td {
  3647.   text-align: left;
  3648.   padding: 1.6rem;
  3649.   vertical-align: top;
  3650.   border-top: 0;
  3651.   -webkit-transition: all 0.3s ease;
  3652.   -o-transition: all 0.3s ease;
  3653.   transition: all 0.3s ease;
  3654. }
  3655. .table > thead > tr > th {
  3656.   font-weight: 400;
  3657.   color: #757575;
  3658.   vertical-align: bottom;
  3659.   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  3660. }
  3661. .table > caption + thead > tr:first-child > th,
  3662. .table > colgroup + thead > tr:first-child > th,
  3663. .table > thead:first-child > tr:first-child > th,
  3664. .table > caption + thead > tr:first-child > td,
  3665. .table > colgroup + thead > tr:first-child > td,
  3666. .table > thead:first-child > tr:first-child > td {
  3667.   border-top: 0;
  3668. }
  3669. .table > tbody + tbody {
  3670.   border-top: 1px solid rgba(0, 0, 0, 0.12);
  3671. }
  3672. .table .table {
  3673.   background-color: #fff;
  3674. }
  3675. .table .no-border {
  3676.   border: 0;
  3677. }
  3678. .table-condensed > thead > tr > th,
  3679. .table-condensed > tbody > tr > th,
  3680. .table-condensed > tfoot > tr > th,
  3681. .table-condensed > thead > tr > td,
  3682. .table-condensed > tbody > tr > td,
  3683. .table-condensed > tfoot > tr > td {
  3684.   padding: 0.8rem;
  3685. }
  3686. .table-bordered {
  3687.   border: 0;
  3688. }
  3689. .table-bordered > thead > tr > th,
  3690. .table-bordered > tbody > tr > th,
  3691. .table-bordered > tfoot > tr > th,
  3692. .table-bordered > thead > tr > td,
  3693. .table-bordered > tbody > tr > td,
  3694. .table-bordered > tfoot > tr > td {
  3695.   border: 0;
  3696.   border-bottom: 1px solid #e0e0e0;
  3697. }
  3698. .table-bordered > thead > tr > th,
  3699. .table-bordered > thead > tr > td {
  3700.   border-bottom-width: 2px;
  3701. }
  3702. .table-striped > tbody > tr:nth-child(odd) > td,
  3703. .table-striped > tbody > tr:nth-child(odd) > th {
  3704.   background-color: #f5f5f5;
  3705. }
  3706. .table-hover > tbody > tr:hover > td,
  3707. .table-hover > tbody > tr:hover > th {
  3708.   background-color: rgba(0, 0, 0, 0.12);
  3709. }
  3710. @media screen and (max-width: 768px) {
  3711.   .table-responsive-vertical > .table {
  3712. \tmargin-bottom: 0;
  3713. \tbackground-color: transparent;
  3714.   }
  3715.   .table-responsive-vertical > .table > thead,
  3716.   .table-responsive-vertical > .table > tfoot {
  3717. \tdisplay: none;
  3718.   }
  3719.   .table-responsive-vertical > .table > tbody {
  3720. \tdisplay: block;
  3721.   }
  3722.   .table-responsive-vertical > .table > tbody > tr {
  3723. \tdisplay: block;
  3724. \tborder: 1px solid #e0e0e0;
  3725. \tborder-radius: 2px;
  3726. \tmargin-bottom: 1.6rem;
  3727.   }
  3728.   .table-responsive-vertical > .table > tbody > tr > td {
  3729. \tbackground-color: #fff;
  3730. \tdisplay: block;
  3731. \tvertical-align: middle;
  3732. \ttext-align: right;
  3733.   }
  3734.   .table-responsive-vertical > .table > tbody > tr > td[data-title]:before {
  3735. \tcontent: attr(data-title);
  3736. \tfloat: left;
  3737. \tfont-size: inherit;
  3738. \tfont-weight: 400;
  3739. \tcolor: #757575;
  3740.   }
  3741.   .table-responsive-vertical.shadow-z-1 {
  3742. \t-webkit-box-shadow: none;
  3743. \t-moz-box-shadow: none;
  3744. \tbox-shadow: none;
  3745.   }
  3746.   .table-responsive-vertical.shadow-z-1 > .table > tbody > tr {
  3747. \tborder: none;
  3748. \t-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  3749. \t-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  3750. \tbox-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  3751.   }
  3752.   .table-responsive-vertical > .table-bordered {
  3753. \tborder: 0;
  3754.   }
  3755.   .table-responsive-vertical > .table-bordered > tbody > tr > td {
  3756. \tborder: 0;
  3757. \tborder-bottom: 1px solid #e0e0e0;
  3758.   }
  3759.   .table-responsive-vertical > .table-bordered > tbody > tr > td:last-child {
  3760. \tborder-bottom: 0;
  3761.   }
  3762.   .table-responsive-vertical > .table-striped > tbody > tr > td,
  3763.   .table-responsive-vertical > .table-striped > tbody > tr:nth-child(odd) {
  3764. \tbackground-color: #fff;
  3765.   }
  3766.   .table-responsive-vertical > .table-striped > tbody > tr > td:nth-child(odd) {
  3767. \tbackground-color: #f5f5f5;
  3768.   }
  3769.   .table-responsive-vertical > .table-hover > tbody > tr:hover > td,
  3770.   .table-responsive-vertical > .table-hover > tbody > tr:hover {
  3771. \tbackground-color: #fff;
  3772.   }
  3773.   .table-responsive-vertical > .table-hover > tbody > tr > td:hover {
  3774. \tbackground-color: rgba(0, 0, 0, 0.12);
  3775.   }
  3776. }
  3777. .table-striped.table-mc-red > tbody > tr:nth-child(odd) > td,
  3778. .table-striped.table-mc-red > tbody > tr:nth-child(odd) > th {
  3779.   background-color: #fde0dc;
  3780. }
  3781. .table-hover.table-mc-red > tbody > tr:hover > td,
  3782. .table-hover.table-mc-red > tbody > tr:hover > th {
  3783.   background-color: #f9bdbb;
  3784. }
  3785. @media screen and (max-width: 767px) {
  3786.   .table-responsive-vertical .table-striped.table-mc-red > tbody > tr > td,
  3787.   .table-responsive-vertical .table-striped.table-mc-red > tbody > tr:nth-child(odd) {
  3788. \tbackground-color: #fff;
  3789.   }
  3790.   .table-responsive-vertical .table-striped.table-mc-red > tbody > tr > td:nth-child(odd) {
  3791. \tbackground-color: #fde0dc;
  3792.   }
  3793.   .table-responsive-vertical .table-hover.table-mc-red > tbody > tr:hover > td,
  3794.   .table-responsive-vertical .table-hover.table-mc-red > tbody > tr:hover {
  3795. \tbackground-color: #fff;
  3796.   }
  3797.   .table-responsive-vertical .table-hover.table-mc-red > tbody > tr > td:hover {
  3798. \tbackground-color: #f9bdbb;
  3799.   }
  3800. }
  3801. .table-striped.table-mc-pink > tbody > tr:nth-child(odd) > td,
  3802. .table-striped.table-mc-pink > tbody > tr:nth-child(odd) > th {
  3803.   background-color: #fce4ec;
  3804. }
  3805. .table-hover.table-mc-pink > tbody > tr:hover > td,
  3806. .table-hover.table-mc-pink > tbody > tr:hover > th {
  3807.   background-color: #f8bbd0;
  3808. }
  3809. @media screen and (max-width: 767px) {
  3810.   .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr > td,
  3811.   .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr:nth-child(odd) {
  3812. \tbackground-color: #fff;
  3813.   }
  3814.   .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr > td:nth-child(odd) {
  3815. \tbackground-color: #fce4ec;
  3816.   }
  3817.   .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr:hover > td,
  3818.   .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr:hover {
  3819. \tbackground-color: #fff;
  3820.   }
  3821.   .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr > td:hover {
  3822. \tbackground-color: #f8bbd0;
  3823.   }
  3824. }
  3825. .table-striped.table-mc-purple > tbody > tr:nth-child(odd) > td,
  3826. .table-striped.table-mc-purple > tbody > tr:nth-child(odd) > th {
  3827.   background-color: #f3e5f5;
  3828. }
  3829. .table-hover.table-mc-purple > tbody > tr:hover > td,
  3830. .table-hover.table-mc-purple > tbody > tr:hover > th {
  3831.   background-color: #e1bee7;
  3832. }
  3833. @media screen and (max-width: 767px) {
  3834.   .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr > td,
  3835.   .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr:nth-child(odd) {
  3836. \tbackground-color: #fff;
  3837.   }
  3838.   .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr > td:nth-child(odd) {
  3839. \tbackground-color: #f3e5f5;
  3840.   }
  3841.   .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr:hover > td,
  3842.   .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr:hover {
  3843. \tbackground-color: #fff;
  3844.   }
  3845.   .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr > td:hover {
  3846. \tbackground-color: #e1bee7;
  3847.   }
  3848. }
  3849. .table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) > td,
  3850. .table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) > th {
  3851.   background-color: #ede7f6;
  3852. }
  3853. .table-hover.table-mc-deep-purple > tbody > tr:hover > td,
  3854. .table-hover.table-mc-deep-purple > tbody > tr:hover > th {
  3855.   background-color: #d1c4e9;
  3856. }
  3857. @media screen and (max-width: 767px) {
  3858.   .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr > td,
  3859.   .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) {
  3860. \tbackground-color: #fff;
  3861.   }
  3862.   .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr > td:nth-child(odd) {
  3863. \tbackground-color: #ede7f6;
  3864.   }
  3865.   .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr:hover > td,
  3866.   .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr:hover {
  3867. \tbackground-color: #fff;
  3868.   }
  3869.   .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr > td:hover {
  3870. \tbackground-color: #d1c4e9;
  3871.   }
  3872. }
  3873. .table-striped.table-mc-indigo > tbody > tr:nth-child(odd) > td,
  3874. .table-striped.table-mc-indigo > tbody > tr:nth-child(odd) > th {
  3875.   background-color: #e8eaf6;
  3876. }
  3877. .table-hover.table-mc-indigo > tbody > tr:hover > td,
  3878. .table-hover.table-mc-indigo > tbody > tr:hover > th {
  3879.   background-color: #c5cae9;
  3880. }
  3881. @media screen and (max-width: 767px) {
  3882.   .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr > td,
  3883.   .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr:nth-child(odd) {
  3884. \tbackground-color: #fff;
  3885.   }
  3886.   .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr > td:nth-child(odd) {
  3887. \tbackground-color: #e8eaf6;
  3888.   }
  3889.   .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr:hover > td,
  3890.   .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr:hover {
  3891. \tbackground-color: #fff;
  3892.   }
  3893.   .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr > td:hover {
  3894. \tbackground-color: #c5cae9;
  3895.   }
  3896. }
  3897. .table-striped.table-mc-blue > tbody > tr:nth-child(odd) > td,
  3898. .table-striped.table-mc-blue > tbody > tr:nth-child(odd) > th {
  3899.   background-color: #e7e9fd;
  3900. }
  3901. .table-hover.table-mc-blue > tbody > tr:hover > td,
  3902. .table-hover.table-mc-blue > tbody > tr:hover > th {
  3903.   background-color: #d0d9ff;
  3904. }
  3905. @media screen and (max-width: 767px) {
  3906.   .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr > td,
  3907.   .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr:nth-child(odd) {
  3908. \tbackground-color: #fff;
  3909.   }
  3910.   .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr > td:nth-child(odd) {
  3911. \tbackground-color: #e7e9fd;
  3912.   }
  3913.   .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr:hover > td,
  3914.   .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr:hover {
  3915. \tbackground-color: #fff;
  3916.   }
  3917.   .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr > td:hover {
  3918. \tbackground-color: #d0d9ff;
  3919.   }
  3920. }
  3921. .table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) > td,
  3922. .table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) > th {
  3923.   background-color: #e1f5fe;
  3924. }
  3925. .table-hover.table-mc-light-blue > tbody > tr:hover > td,
  3926. .table-hover.table-mc-light-blue > tbody > tr:hover > th {
  3927.   background-color: #b3e5fc;
  3928. }
  3929. @media screen and (max-width: 767px) {
  3930.   .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr > td,
  3931.   .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) {
  3932. \tbackground-color: #fff;
  3933.   }
  3934.   .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr > td:nth-child(odd) {
  3935. \tbackground-color: #e1f5fe;
  3936.   }
  3937.   .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr:hover > td,
  3938.   .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr:hover {
  3939. \tbackground-color: #fff;
  3940.   }
  3941.   .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr > td:hover {
  3942. \tbackground-color: #b3e5fc;
  3943.   }
  3944. }
  3945. .table-striped.table-mc-cyan > tbody > tr:nth-child(odd) > td,
  3946. .table-striped.table-mc-cyan > tbody > tr:nth-child(odd) > th {
  3947.   background-color: #e0f7fa;
  3948. }
  3949. .table-hover.table-mc-cyan > tbody > tr:hover > td,
  3950. .table-hover.table-mc-cyan > tbody > tr:hover > th {
  3951.   background-color: #b2ebf2;
  3952. }
  3953. @media screen and (max-width: 767px) {
  3954.   .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr > td,
  3955.   .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr:nth-child(odd) {
  3956. \tbackground-color: #fff;
  3957.   }
  3958.   .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr > td:nth-child(odd) {
  3959. \tbackground-color: #e0f7fa;
  3960.   }
  3961.   .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr:hover > td,
  3962.   .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr:hover {
  3963. \tbackground-color: #fff;
  3964.   }
  3965.   .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr > td:hover {
  3966. \tbackground-color: #b2ebf2;
  3967.   }
  3968. }
  3969. .table-striped.table-mc-teal > tbody > tr:nth-child(odd) > td,
  3970. .table-striped.table-mc-teal > tbody > tr:nth-child(odd) > th {
  3971.   background-color: #e0f2f1;
  3972. }
  3973. .table-hover.table-mc-teal > tbody > tr:hover > td,
  3974. .table-hover.table-mc-teal > tbody > tr:hover > th {
  3975.   background-color: #b2dfdb;
  3976. }
  3977. @media screen and (max-width: 767px) {
  3978.   .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr > td,
  3979.   .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr:nth-child(odd) {
  3980. \tbackground-color: #fff;
  3981.   }
  3982.   .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr > td:nth-child(odd) {
  3983. \tbackground-color: #e0f2f1;
  3984.   }
  3985.   .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr:hover > td,
  3986.   .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr:hover {
  3987. \tbackground-color: #fff;
  3988.   }
  3989.   .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr > td:hover {
  3990. \tbackground-color: #b2dfdb;
  3991.   }
  3992. }
  3993. .table-striped.table-mc-green > tbody > tr:nth-child(odd) > td,
  3994. .table-striped.table-mc-green > tbody > tr:nth-child(odd) > th {
  3995.   background-color: #d0f8ce;
  3996. }
  3997. .table-hover.table-mc-green > tbody > tr:hover > td,
  3998. .table-hover.table-mc-green > tbody > tr:hover > th {
  3999.   background-color: #a3e9a4;
  4000. }
  4001. @media screen and (max-width: 767px) {
  4002.   .table-responsive-vertical .table-striped.table-mc-green > tbody > tr > td,
  4003.   .table-responsive-vertical .table-striped.table-mc-green > tbody > tr:nth-child(odd) {
  4004. \tbackground-color: #fff;
  4005.   }
  4006.   .table-responsive-vertical .table-striped.table-mc-green > tbody > tr > td:nth-child(odd) {
  4007. \tbackground-color: #d0f8ce;
  4008.   }
  4009.   .table-responsive-vertical .table-hover.table-mc-green > tbody > tr:hover > td,
  4010.   .table-responsive-vertical .table-hover.table-mc-green > tbody > tr:hover {
  4011. \tbackground-color: #fff;
  4012.   }
  4013.   .table-responsive-vertical .table-hover.table-mc-green > tbody > tr > td:hover {
  4014. \tbackground-color: #a3e9a4;
  4015.   }
  4016. }
  4017. .table-striped.table-mc-light-green > tbody > tr:nth-child(odd) > td,
  4018. .table-striped.table-mc-light-green > tbody > tr:nth-child(odd) > th {
  4019.   background-color: #f1f8e9;
  4020. }
  4021. .table-hover.table-mc-light-green > tbody > tr:hover > td,
  4022. .table-hover.table-mc-light-green > tbody > tr:hover > th {
  4023.   background-color: #dcedc8;
  4024. }
  4025. @media screen and (max-width: 767px) {
  4026.   .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr > td,
  4027.   .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr:nth-child(odd) {
  4028. \tbackground-color: #fff;
  4029.   }
  4030.   .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr > td:nth-child(odd) {
  4031. \tbackground-color: #f1f8e9;
  4032.   }
  4033.   .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr:hover > td,
  4034.   .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr:hover {
  4035. \tbackground-color: #fff;
  4036.   }
  4037.   .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr > td:hover {
  4038. \tbackground-color: #dcedc8;
  4039.   }
  4040. }
  4041. .table-striped.table-mc-lime > tbody > tr:nth-child(odd) > td,
  4042. .table-striped.table-mc-lime > tbody > tr:nth-child(odd) > th {
  4043.   background-color: #f9fbe7;
  4044. }
  4045. .table-hover.table-mc-lime > tbody > tr:hover > td,
  4046. .table-hover.table-mc-lime > tbody > tr:hover > th {
  4047.   background-color: #f0f4c3;
  4048. }
  4049. @media screen and (max-width: 767px) {
  4050.   .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr > td,
  4051.   .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr:nth-child(odd) {
  4052. \tbackground-color: #fff;
  4053.   }
  4054.   .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr > td:nth-child(odd) {
  4055. \tbackground-color: #f9fbe7;
  4056.   }
  4057.   .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr:hover > td,
  4058.   .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr:hover {
  4059. \tbackground-color: #fff;
  4060.   }
  4061.   .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr > td:hover {
  4062. \tbackground-color: #f0f4c3;
  4063.   }
  4064. }
  4065. .table-striped.table-mc-yellow > tbody > tr:nth-child(odd) > td,
  4066. .table-striped.table-mc-yellow > tbody > tr:nth-child(odd) > th {
  4067.   background-color: #fffde7;
  4068. }
  4069. .table-hover.table-mc-yellow > tbody > tr:hover > td,
  4070. .table-hover.table-mc-yellow > tbody > tr:hover > th {
  4071.   background-color: #fff9c4;
  4072. }
  4073. @media screen and (max-width: 767px) {
  4074.   .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr > td,
  4075.   .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr:nth-child(odd) {
  4076. \tbackground-color: #fff;
  4077.   }
  4078.   .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr > td:nth-child(odd) {
  4079. \tbackground-color: #fffde7;
  4080.   }
  4081.   .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr:hover > td,
  4082.   .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr:hover {
  4083. \tbackground-color: #fff;
  4084.   }
  4085.   .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr > td:hover {
  4086. \tbackground-color: #fff9c4;
  4087.   }
  4088. }
  4089. .table-striped.table-mc-amber > tbody > tr:nth-child(odd) > td,
  4090. .table-striped.table-mc-amber > tbody > tr:nth-child(odd) > th {
  4091.   background-color: #fff8e1;
  4092. }
  4093. .table-hover.table-mc-amber > tbody > tr:hover > td,
  4094. .table-hover.table-mc-amber > tbody > tr:hover > th {
  4095.   background-color: #ffecb3;
  4096. }
  4097. @media screen and (max-width: 767px) {
  4098.   .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr > td,
  4099.   .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr:nth-child(odd) {
  4100. \tbackground-color: #fff;
  4101.   }
  4102.   .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr > td:nth-child(odd) {
  4103. \tbackground-color: #fff8e1;
  4104.   }
  4105.   .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr:hover > td,
  4106.   .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr:hover {
  4107. \tbackground-color: #fff;
  4108.   }
  4109.   .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr > td:hover {
  4110. \tbackground-color: #ffecb3;
  4111.   }
  4112. }
  4113. .table-striped.table-mc-orange > tbody > tr:nth-child(odd) > td,
  4114. .table-striped.table-mc-orange > tbody > tr:nth-child(odd) > th {
  4115.   background-color: #fff3e0;
  4116. }
  4117. .table-hover.table-mc-orange > tbody > tr:hover > td,
  4118. .table-hover.table-mc-orange > tbody > tr:hover > th {
  4119.   background-color: #ffe0b2;
  4120. }
  4121. @media screen and (max-width: 767px) {
  4122.   .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr > td,
  4123.   .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr:nth-child(odd) {
  4124. \tbackground-color: #fff;
  4125.   }
  4126.   .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr > td:nth-child(odd) {
  4127. \tbackground-color: #fff3e0;
  4128.   }
  4129.   .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr:hover > td,
  4130.   .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr:hover {
  4131. \tbackground-color: #fff;
  4132.   }
  4133.   .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr > td:hover {
  4134. \tbackground-color: #ffe0b2;
  4135.   }
  4136. }
  4137. .table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) > td,
  4138. .table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) > th {
  4139.   background-color: #fbe9e7;
  4140. }
  4141. .table-hover.table-mc-deep-orange > tbody > tr:hover > td,
  4142. .table-hover.table-mc-deep-orange > tbody > tr:hover > th {
  4143.   background-color: #ffccbc;
  4144. }
  4145. @media screen and (max-width: 767px) {
  4146.   .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr > td,
  4147.   .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) {
  4148. \tbackground-color: #fff;
  4149.   }
  4150.   .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr > td:nth-child(odd) {
  4151. \tbackground-color: #fbe9e7;
  4152.   }
  4153.   .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr:hover > td,
  4154.   .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr:hover {
  4155. \tbackground-color: #fff;
  4156.   }
  4157.   .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr > td:hover {
  4158. \tbackground-color: #ffccbc;
  4159.   }
  4160. }
  4162. .flat-busness, .button-flat {
  4163.     padding: 10px;
  4164.     outline: none;
  4165.     text-decoration: none;
  4166.     text-align: center;
  4167.     border-radius: 40px;
  4168.     background: #fff;
  4169.     border: 2px solid #1e499b;
  4170.     color: #1e499b;
  4171.     letter-spacing: 1px;
  4172.     text-shadow: 0;
  4173.     font-size: 12px;
  4174.     font-weight: bold;
  4175.     cursor: pointer;
  4176.     transition: all 0.25s ease;
  4177. \tmargin-top: 3px;
  4178. }
  4179. .flat-busness:hover, .button-flat:hover{
  4180. \tbackground: #f7941d;
  4181. \tcolor: #fff;
  4182. }
  4184. @media only screen and (min-width: 1100px){
  4185. \t.header.shop .search-bar {
  4186. \t\twidth: 660px!important;
  4187. \t}
  4188. \t.header.shop .search-bar input {
  4189. \t\twidth: 450px!important;
  4190. \t\tmargin-left: -60px;
  4191. \t}
  4192. }
  4193. .nice-select .list {
  4194. \tz-index: 1000!important;
  4195. }
  4197. .button--anchor {
  4198.   background: none;
  4199.   border: none;
  4200.   padding: 0;
  4201.   margin: 0;
  4202. }
  4203. .button--anchor:hover {
  4204.   text-decoration: underline;
  4205. }
  4207. .button--primary {
  4208.   box-sizing: border-box;
  4209.   border: 1px solid #c49530;
  4210.   border-radius: 3px;
  4211.   box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.2);
  4212.   background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #fee045), to(#fecb2a));
  4213.   background: linear-gradient(to bottom, #fee045 5%, #fecb2a 100%);
  4214.   height: 37px;
  4215.   font-weight: bold;
  4216.   font-size: 13px;
  4217.   text-align: center;
  4218.   padding: 7px;
  4219. }
  4221. .button--blue {
  4222.   color: #1471da;
  4223. }
  4225. .hr-line {
  4226.   display: flex;
  4227. }
  4229. .hr-line:before,
  4230. .hr-line:after {
  4231.   content: '';
  4232.   flex: 1;
  4233.   border-bottom: 1px solid;
  4234.   margin: auto 0.25em;
  4235. }
  4236. .btn-nav-search {
  4237.     font-size: 12px;
  4238.     border: 3px solid #ddd;
  4239.     margin-right: -2px;
  4240.     font-family: 'Montserrat', sans-serif!important;
  4241.     text-align: center;
  4242.     color: #030303;
  4243.     background: linear-gradient(#FFFFFF,#E6E6E6);
  4244.     border: 1px solid #CDCDCD;
  4245.     border-radius: 3px;
  4246.     display: inline-block;
  4247. \tpadding: 5px 10px;
  4248. \tfont-weight: bold;
  4249. }
  4251. input[type=\"checkbox\"] {
  4252.   -webkit-appearance: none;
  4253.      -moz-appearance: none;
  4254.           appearance: none;
  4255.   background-color: white;
  4256.   border: 0.125rem #808080 solid;
  4257.   border-radius: 4px;
  4258.   cursor: pointer;
  4259.   display: inline-block;
  4260.   height: 1.25rem;
  4261.   margin-right: 0.25rem;
  4262.   position: relative;
  4263.   -webkit-transition: all 0.25s;
  4264.   transition: all 0.25s;
  4265.   vertical-align: middle;
  4266.   width: 1.25rem;
  4267. }
  4268. input[type=\"checkbox\"]::after {
  4269.   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\");
  4270.   background-position: center center;
  4271.   background-repeat: no-repeat;
  4272.   background-size: 0.75rem 0.75rem;
  4273.   content: \"\";
  4274.   height: 1rem;
  4275.   left: 0;
  4276.   opacity: 0;
  4277.   position: absolute;
  4278.   top: 0;
  4279.   -webkit-transition: opacity 0.25s;
  4280.   transition: opacity 0.25s;
  4281.   width: 1rem;
  4282. }
  4283. input[type=\"checkbox\"]:hover {
  4284.   background-color: #bfdde1;
  4285.   border: 0.125rem #007788 solid;
  4286.   -webkit-transform: scale(1.1);
  4287.           transform: scale(1.1);
  4288. }
  4289. input[type=\"checkbox\"]:focus {
  4290.   outline: none;
  4291.   box-shadow: 0px 0px 8px rgba(0, 119, 136, 0.75);
  4292. }
  4293. input[type=\"checkbox\"]:checked {
  4294.   background-color: #007788;
  4295.   border: 0.125rem #007788 solid;
  4296. }
  4297. input[type=\"checkbox\"]:checked::after {
  4298.   opacity: 1;
  4299. }
  4300. label {
  4301.   display: inline-block;
  4302.   vertical-align: middle;
  4303. }
  4305. .mbill-border{
  4306. \tbackground: #fff; border: 1px solid #ddd; margin-top: 15px; padding: 4px; border-radius: 5px;
  4307. }
  4308. .modal-dialog .modal-content .modal-body {
  4309.     padding: 0px;
  4310.     overflow-y: auto;
  4311.     max-height: 510px;
  4312.     height: auto;
  4313. }
  4316. /** Début style Offres spéciales **/
  4318. .kapsayici{
  4319. \twidth:100%;
  4320. \theight:auto;
  4321. \tposition:relative;
  4322. \tmargin-left:auto;
  4323. \tmargin-right:auto;
  4324. \tdisplay:block;
  4325. }
  4326. .kapsayici a{
  4327. \tcolor:#fff;
  4328. \ttext-decoration:none;
  4329. \tbackground-color:#000;
  4330. \tfont-family: 'Roboto', sans-serif;
  4331. }
  4332. .kapsayici a:hover{
  4333. \tcolor:#fff;
  4334. \ttext-decoration:none;
  4335. }
  4337. .slid3{
  4338. \twidth:100%;
  4339. \theight:250px;
  4340. \tbackground-color:#ccc;
  4341. \tdisplay:block;
  4342. \tposition:relative;
  4343. \tz-index:1;
  4344. }
  4346. .resim3{
  4347. \twidth:100%;
  4348. \theight:100%;
  4349. \tdisplay:block;
  4350. \tposition:absolute;
  4351. \ttransition:0.5s;
  4352. \tvertical-align: middle;
  4353. \tz-index:2;
  4354. }
  4355. .resim3:after{
  4356. \tposition: absolute;
  4357. \tcontent:\"\";
  4358. \theight:100%;
  4359. \twidth:100%;
  4360. \ttop:0;
  4361. \tleft:0;
  4362. \topacity:0.9;
  4363. \tbackground: linear-gradient(to bottom, transparent 40%,#000 90%);
  4364. }
  4365. .resim3 img{
  4366. \twidth:100%;
  4367. \theight:100%;
  4368. \tobject-fit: cover;
  4369. \tobject-position: 50% 15%;
  4370. }
  4371. .resim3 h2{
  4372. \tposition:absolute;
  4373. \tbottom:0px;
  4374. \tpadding:10px;
  4375. \tword-wrap: break-word;
  4376. \ttext-shadow: 6px 4px 12px #000;
  4377. \tfont-weight:900;
  4378. \tfont-size:24px;
  4379. \tz-index:222;
  4380. \ttransition:0.4s;
  4381. }
  4382. .resim3 p{
  4383. \tposition:absolute;
  4384. \tbottom:2px;
  4385. \tvisibility:hidden;
  4386. \tpadding:10px;
  4387. \tz-index:11;
  4388. \tword-wrap: break-word;
  4389. \ttext-shadow: 6px 4px 12px #000;
  4390. \tfont-size:16px;
  4391. \tcolor:#fff;
  4392. \twidth: 90%;
  4393. \ttransition:0.2s;
  4394. \toverflow: hidden;
  4395. \twhite-space: nowrap;
  4396. \ttext-overflow: ellipsis;
  4397. }
  4398. .emoji{
  4399. \ttop:-10px;
  4400. \tleft:-20px;
  4401. \tposition:absolute;
  4402. \tz-index:222;
  4403. }
  4404. .emoji img{
  4405. \twidth:55px;
  4406. \theight:55px;
  4407. \tpadding:4px;
  4408. }
  4409. .slid3  span.yazar3 img{
  4410. \tdisplay:inline;
  4411. \tborder-radius:100%;
  4412. \twidth:30px;
  4413. \theight:30px;
  4414. \tvertical-align:middle;
  4415. \tpadding-right:5px;
  4416. \tz-index:999;
  4417. }
  4418. .slid3 a:hover  .resim3 h2{ bottom:30px; transition:0.4s;}
  4419. .slid3 a:hover .resim3 p{visibility: visible; z-index:222; transition:0.6s;}
  4420. .slid3 a:hover .resim3:after{ opacity:1;background: linear-gradient(to bottom, transparent 0%,#000 100%);}
  4422. .panel-offer{
  4423. \tborder: 1px solid #ddd; padding-top: 15px; padding-bottom: 15px;
  4424. }
  4425. .panel-offer:hover{
  4426. \tbackground: #f4f4f4;
  4427. }
  4429. /** Début File Input */
  4431. .file-input {
  4432.   display: inline-block;
  4433.   text-align: left;
  4434.   background: #fff;
  4435.   padding: 16px;
  4436.   width: 450px;
  4437.   position: relative;
  4438.   border-radius: 3px;
  4439. }
  4441. .file-input > [type='file'] {
  4442.   position: absolute;
  4443.   top: 0;
  4444.   left: 0;
  4445.   width: 100%;
  4446.   height: 100%;
  4447.   opacity: 0;
  4448.   z-index: 10;
  4449.   cursor: pointer;
  4450. }
  4452. .file-input > .button {
  4453.   display: inline-block;
  4454.   cursor: pointer;
  4455.   background: #eee;
  4456.   padding: 8px 16px;
  4457.   border-radius: 2px;
  4458.   margin-right: 8px;
  4459. }
  4461. .file-input:hover > .button {
  4462.   background: dodgerblue;
  4463.   color: white;
  4464. }
  4466. .file-input > .label {
  4467.   color: #333;
  4468.   white-space: nowrap;
  4469.   opacity: .3;
  4470. }
  4472. .file-input.-chosen > .label {
  4473.   opacity: 1;
  4474. }
  4477. /* responsive Search, Pagine & Filter Table */
  4479. .dataTables_filter {
  4480.   float: right;
  4481. }
  4483. .table-hover > tbody > tr:hover {
  4484.   background-color: #ccffff;
  4485. }
  4487. @media only screen and (min-width: 768px) {
  4488.   .tablefilter {
  4489.     width: 100% !important;
  4490. \tmargin: 15px 0px;
  4491.   }
  4492. }
  4494. thead {
  4495.   background: #f4f4f4;
  4496.   border-radius: 10px 10px 0px 0px!important;
  4497. }
  4498. tfoot {
  4499.   background: #f4f4f4;
  4500.   border-radius: 0px 10px!important;
  4501. }
  4502. tr{
  4503. \tborder: 1px solid rgba(0,0,0,0.1)!important;
  4504. }
  4505. .table td:nth-child(2) {
  4506.   overflow: hidden;
  4507.   text-overflow: ellipsis;
  4508. }
  4510. .highlight {
  4511.   background: #ffff99;
  4512. }
  4514. @media only screen and (max-width: 767px) {
  4515.   /* Force table to not be like tables anymore */
  4516.   .tablefilter,
  4517.   .tablefilter thead,
  4518.   .tablefilter tbody,
  4519.   .tablefilter th,
  4520.   .tablefilter td,
  4521.   .tablefilter tr {
  4522.     display: block;
  4523.   }
  4525.   /* Hide table headers (but not display: none;, for accessibility) */
  4526.   .tablefilter thead tr,
  4527.   .tablefilter tfoot tr {
  4528.     position: absolute;
  4529.     top: -9999px;
  4530.     left: -9999px;
  4531.   }
  4533.   .tablefilter td {
  4534.     /* Behave  like a \"row\" */
  4535.     border: none;
  4536.     border-bottom: 1px solid #eee;
  4537.     position: relative;
  4538.     padding-left: 50% !important;
  4539.   }
  4541.   .tablefilter td:before {
  4542.     /* Now like a table header */
  4543.     position: absolute;
  4544.     /* Top/left values mimic padding */
  4545.     top: 6px;
  4546.     left: 6px;
  4547.     width: 45%;
  4548.     padding-right: 10px;
  4549.     white-space: nowrap;
  4550.   }
  4552.   .tablefilter td:nth-child(1) {
  4553.     background: #ccc;
  4554.     height: 100%;
  4555.     top: 0;
  4556.     left: 0;
  4557.     font-weight: bold;
  4558.   }
  4559. }
  4561. .dt-bootstrap .row{
  4562. \twidth: 100%!important;
  4563. \tmargin-top: 5px;
  4564. \tmargin-bottom: 5px;
  4565. }
  4566. .dataTables_paginate ul li{
  4567. \tdisplay: inline!important;
  4568. }
  4569. .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}
  4570. table.dataTable thead .sorting:after{
  4571.     opacity: 0.5;
  4572.     content: \"\\f0dc\"!important;
  4573.     font-family: \"FontAwesome\"!important;
  4574. }
  4575. table.dataTable thead .sorting_asc:after{
  4576. \topacity: 0.5;
  4577.     content: \"\\f0dc\"!important;
  4578.     font-family: \"FontAwesome\"!important;
  4579. }
  4580. table.dataTable thead .sorting_desc:after{
  4581. \topacity: 0.5;
  4582.     content: \"\\f0dc\"!important;
  4583.     font-family: \"FontAwesome\"!important;
  4584. }
  4585. .tablefilter > thead > tr > th, .tablefilter > tbody > tr > th, .tablefilter > tfoot > tr > th, .tablefilter > thead > tr > td, .tablefilter > tbody > tr > td, .tablefilter > tfoot > tr > td {
  4586.    padding: 7px 3px;
  4587. }
  4588. .tablefilter > tbody > tr > td {
  4589. \tborder-bottom: 1px solid #ddd!important;
  4590. \ttext-weight: normal!important;
  4591. \tborder-bottom-width: 1!important;
  4592. }
  4594. .star-ratings-css {
  4595.   unicode-bidi: bidi-override;
  4596.   color: #c5c5c5;
  4597.   font-size: 25px;
  4598.   height: 25px;
  4599.   width: 100px;
  4600.   margin: 0 auto;
  4601.   position: relative;
  4602.   padding: 0;
  4603.   text-shadow: 0px 1px 0 #a2a2a2;
  4604. }
  4605. .star-ratings-css-top {
  4606.   color: #e7711b;
  4607.   padding: 0;
  4608.   position: absolute;
  4609.   z-index: 0;
  4610.   display: block;
  4611.   top: 0;
  4612.   left: 0;
  4613.   overflow: hidden;
  4614. }
  4615. .star-ratings-css-bottom {
  4616.   padding: -1;
  4617.   display: block;
  4618.   z-index: 0;
  4619. }
  4620. .star-ratings-sprite {
  4621.   background: url(\"";
  4622.         // line 3657
  4623.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/images/star-rating-sprite.png"), "html", null, true);
  4624.         echo "\") repeat-x;
  4625.   font-size: 0;
  4626.   height: 21px;
  4627.   line-height: 0;
  4628.   overflow: hidden;
  4629.   text-indent: -999em;
  4630.   width: 110px;
  4631.   margin: 0 auto;
  4632. }
  4633. .star-ratings-sprite-rating {
  4634.   background: url(\"";
  4635.         // line 3667
  4636.         echo twig_escape_filter($this->env, $this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("template/images/star-rating-sprite.png"), "html", null, true);
  4637.         echo "\") repeat-x;
  4638.   background-position: 0 100%;
  4639.   float: left;
  4640.   height: 21px;
  4641.   display: block;
  4642. }
  4643. em {
  4644.   font-style: italic;
  4645. }
  4647. .topic{
  4648.   padding:20px;
  4649.   padding-top:0px;
  4650.   padding-bottom:0px;
  4651.   border-bottom:solid 1px #ebebeb;
  4652.   width: 100%;
  4653. }
  4654. .topic .open{
  4655.   cursor:pointer;
  4656.   display:block;
  4657.   padding:0px;
  4658. }
  4659. .topic .open:hover{
  4660.   opacity:0.7;
  4661. }
  4662. .expanded{
  4663.   background-color:#f5f5f5;
  4664.   transition: all .3s ease-in-out;
  4665. }
  4666. .question{
  4667.   padding-top:30px;
  4668.   padding-right: 40px;
  4669.   padding-bottom:20px;
  4670.   font-size: 18px;
  4671.   font-weight:500;
  4672.   color: #526ee4;
  4673. }
  4674. .answer{
  4675.   font-size:16px;
  4676.   line-height:26px;
  4677.   display:none;
  4678.   margin-bottom:30px;
  4679.   text-align:justify;
  4680.   padding-left:20px;
  4681.   padding-right:20px;
  4682. }
  4683. .faq-t{
  4684.   -moz-transform: rotate(-45deg);
  4685.   -ms-transform: rotate(-45deg);
  4686.   -webkit-transform: rotate(-45deg);
  4687.   transform: rotate(-45deg);
  4688.   display: inline-block;
  4689.   float:right;
  4690.   position:relative;
  4691.   top:-55px;
  4692.   right:10px;
  4693.   width: 10px;
  4694.   height: 10px;
  4695.   background: transparent;
  4696.   border-left: 2px solid #ccc;
  4697.   border-bottom: 2px solid #ccc;
  4698.   transition: all .3s ease-in-out;
  4699. }
  4700. .faq-o{
  4701.   top:-50px;
  4702.    -moz-transform: rotate(-224deg);
  4703.   -ms-transform: rotate(-224deg);
  4704.   -webkit-transform: rotate(-224deg);
  4705.   transform: rotate(-224deg);
  4706. }
  4707. @media only screen and (max-width: 480px) {
  4708.   .faq-t{display:none;}
  4709.   .question{
  4710.   padding-right: 0px;
  4711. }
  4712.   main{
  4713.   padding:10px;
  4714. }
  4715.   .answer{
  4716.   margin-bottom:30px;
  4717.   padding-left:0px;
  4718.   padding-right:0px;
  4719. }
  4720. }
  4722. .theme-bg-light{
  4723. \tborder: 1px  #CCC solid;
  4724. \tbox-shadow: inset 0px 11px 8px -10px #CCC, inset 0px -11px 8px -10px #CCC;
  4725. }
  4727. .flat-btn {
  4728. \tdisplay: inline-block;
  4729. \tpadding: 15px 20px;
  4730. \tfont-size: 13px;
  4731. \tfont-weight: 600;
  4732. \ttext-align: center;
  4733. \ttext-decoration: none;
  4734. \tborder-radius: 50px;
  4735. \tborder: 1px solid #E5DFEF;
  4736. \tcolor: #231A3B;
  4737. \ttransition: background .2s ease-in-out;
  4738. \tmargin-top: 15px;
  4739. }
  4741. .flat-btn:hover {
  4742. \tbackground: #E5DFEF;
  4743. \tcursor: pointer;
  4744. }
  4746. @media (min-width:576px) {
  4747.     .modal-dialog {
  4748.         max-width: 500px!important;
  4749.         margin: 30px auto
  4750.     }
  4751.     .modal-sm {
  4752.         max-width: 300px!important;
  4753.     }
  4754. }
  4756. @media (min-width:992px) {
  4757.     .modal-lg {
  4758.         max-width: 800px!important;
  4759.     }
  4760. }
  4762. .white-text-shadow{
  4763. \tcolor: #666;
  4764.     /*text-shadow: 1px 1px 2px #000000;*/
  4765.     margin-bottom: 10px;
  4766. \ttext-align: center;
  4767. \tdisplay: inline-block;
  4768. }
  4769. .white-text-shadow:hover{
  4770. \ttext-decoration: underline;
  4771. }
  4774. @media only screen and (max-width: 767px){
  4775. .slicknav_btn {
  4776.     background: transparent;
  4777.     padding: 0;
  4778.     margin: 5px 15px 0px 0px;
  4779. \tposition: absolute;
  4780.     right: 0px;
  4781.     top: 0px;
  4782. }
  4784. .m-text-center{
  4785. \ttext-align: center!important;
  4786. }
  4787. .logo-small a img{
  4788. \theight: 50px;
  4789. \tmargin-top: -10px;
  4790. }
  4791. .open-menu{
  4792. \tposition: absolute;
  4793. \tleft: -15px!important; top: -7px!important;
  4794. }
  4796. .hero-slider .single-slider {
  4797. \theight: auto!important;
  4798. \tmin-height: 510px!important;
  4799. }
  4800. .hero-slider{
  4801. \theight: auto!important;
  4802. }
  4803. }
  4805. @media only screen and (min-width: 767px){
  4806. .m-text-center{
  4807. \ttext-align: left;
  4808. }
  4809. .open-menu{
  4810. \tdisplay: none!important;
  4811. }
  4812. .logo-small a img{
  4813. \theight: 80px;
  4814. \tmargin-top: -10px;
  4815. }
  4816. .hero-slider .single-slider {
  4817. \theight: 510px!important;
  4818. }
  4819. .hero-slider{
  4820. \theight: auto!important;
  4821. }
  4822. }
  4824. .menu-mob{
  4825.     height: 100%!important;
  4826.     width: 300px;
  4827.     position: fixed;
  4828.     left: -350px;
  4829. \ttop: 0px;
  4830.     z-index: 1001;
  4831.     background: #fff;
  4832.     overflow: hidden;
  4833.     text-align: left;
  4834.   -webkit-transition: -webkit-transform 250ms ease-in-out;
  4835.   transition: transform 250ms ease-in-out;
  4836. }
  4838. .activebtn {
  4839.     -webkit-transform: translateX(350px);
  4840.     -moz-transform: translateX(350px);
  4841.     -o-transform: translateX(350px);
  4842.     -ms-transform: translateX(350px);
  4843.     transform: translateX(350px);
  4844.     box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  4845.     -moz-box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  4846.     -webkit-box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  4847. }
  4849. .open-menu{
  4850.     display: inline-block;
  4851. }
  4853. .open-menu button{
  4854.     display: inline;
  4855.     z-index: 0;
  4856.     background: transparent;
  4857.     border: none;
  4858.     margin-top: 10px;
  4859.     margin-left: 25px;
  4860.     padding: 0px;
  4861.     cursor: pointer;
  4862. }
  4864. .open-menu img{
  4865.     width: 30px;
  4866.     height: 30px;
  4867. }
  4869. .header-menu{
  4870.     height: 60px;
  4871.     background: #f4f4f4;
  4872. \tmargin-bottom: 7px;
  4873. \tpadding: 7px 10px;
  4874. }
  4876. .header-menu button {
  4877.     position: absolute;
  4878.     background: transparent;
  4879.     border: none;
  4880.     padding: 0px;
  4881.     cursor: pointer;
  4882. \tfloat: right;
  4883. \ttop: 7px;
  4884. \tright: 7px;
  4885. }
  4887. .header-menu img {
  4888.     width: 40px;
  4889.     height: 40px;
  4890. }
  4892. .top-menu {
  4893.     margin-top: 35px;
  4894. }
  4896. .top-menu a {
  4897.     text-decoration: none;
  4898.     color: black;
  4899.     font-weight: 500;
  4900.     font-size: 16rem;
  4901.     display: block;
  4902.     line-height: 40px;
  4903.     padding-left: 35px;
  4904. \t transition: .2s;
  4905. }
  4907. /* Dropdown Button */
  4908. .dropbtn-prfl {
  4909. background-color: #4CAF50;
  4910. color: white;
  4911. padding: 16px;
  4912. font-size: 16px;
  4913. border: none;
  4914. }
  4916. /* The container <div> - needed to position the dropdown content */
  4917. .dropdown-prfl {
  4918. position: relative;
  4919. display: inline-block;
  4920. }
  4922. /* Dropdown Content (Hidden by Default) */
  4923. .dropdown-content-prfl {
  4924. display: none;
  4925. position: absolute;
  4926. background-color: #fff;
  4927. min-width: 160px;
  4928. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  4929. z-index: 1;
  4930. border-radius: 10px;
  4931. }
  4933. /* Links inside the dropdown */
  4934. .dropdown-content-prfl a {
  4935. color: black;
  4936. padding: 12px 16px;
  4937. text-decoration: none;
  4938. display: block;
  4939. }
  4941. /* Change color of dropdown links on hover */
  4942. .dropdown-content-prfl a:hover {background-color: #ddd;}
  4944. /* Show the dropdown menu on hover */
  4945. .dropdown-prfl:hover .dropdown-content-prfl {display: block;}
  4947. /* Change the background color of the dropdown button when the dropdown content is shown */
  4948. .dropdown-prfl:hover .dropbtn-prfl {background-color: #3e8e41;}
  4950. .menu-mob .dropdown-toggle::after {
  4951.     display: inline-block;
  4952.     width: 0;
  4953.     height: 0;
  4954.     float: right;
  4955.     position: absolute;
  4956.     top: 15px;
  4957.     right: 7px;
  4958.     content: \"\";
  4959.     border-top: .3em solid;
  4960.     border-right: .3em solid transparent;
  4961.     border-bottom: 0;
  4962.     border-left: .3em solid transparent;
  4963. }
  4965. aside{
  4966.   position: fixed;
  4967.   width: 100%;
  4968.   top: 0;
  4969.   left: 0;
  4970.   background: #f4f4f4;
  4971.   opacity: 0;
  4972.   visibility: hidden;
  4973.   transition: all .5s ease;
  4974.   z-index: 90000!important;
  4975. }
  4976. .open {
  4977.   opacity: 1;
  4978.   visibility: visible;
  4979. }
  4982. .close-nav {
  4983.   position: fixed;
  4984.   top: 20px;
  4985.   left: 15px;
  4986.   color: white;
  4987.   z-index: 3;
  4988.   cursor: pointer;
  4989.   font-family: sans-serif;
  4990.   box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
  4991. }
  4992. .close-nav:hover{
  4993. \tbackground: red!important;
  4994. \tcolor: #fff!important;
  4995. }
  4996. .hiden-scroll-bar-body{
  4997. \theight: 400px;
  4998. \toverflow-y: hidden;
  4999. }
  5000. .close-nav span,
  5001. .close-nav span:before,
  5002. .close-nav span:after {
  5003.   border-radius: 4px;
  5004.   height: 5px;
  5005.   width: 35px;
  5006.   background: white;
  5007.   position: absolute;
  5008.   display: block;
  5009.   content: '';
  5010. }
  5011. .close-nav span {
  5012.   background: transparent;
  5013. }
  5014. .close-nav span:before {
  5015.   -webkit-transform: rotate(45deg);
  5016. \t\t  transform: rotate(45deg);
  5017. }
  5018. .close-nav span:after {
  5019.   -webkit-transform: rotate(-45deg);
  5020. \t\t  transform: rotate(-45deg);
  5021. }
  5023. .outer-close {
  5024.   position: absolute;
  5025.   right: 0;
  5026.   top: 0;
  5027.   width: 85px;
  5028.   height: 85px;
  5029.   cursor: pointer;
  5030. }
  5033. .position-current-user, .position-current-user p{
  5034. \tbackground: #3565ae!important;
  5035. \tcolor: #fff!important;
  5036. }
  5037. .bg-struct{
  5038. \tbackground: #3565ae!important;
  5039. \tcolor: #fff!important;
  5040. }
  5044. .silly_scrollbar {
  5045. \theight:700px;
  5046. \t-webkit-box-shadow:0 0 3px #333;
  5047. \t-webkit-box-sizing: border-box;
  5048. \tpadding:0 14px;
  5049. \toverflow:auto;
  5050. }
  5052. .silly_scrollbar::-webkit-scrollbar {
  5053. \twidth: 12px;
  5054. }
  5056. .silly_scrollbar::-webkit-scrollbar-track {
  5057. \t-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  5058. \tborder-radius: 10px;
  5059. }
  5061. .silly_scrollbar::-webkit-scrollbar-thumb {
  5062. \tborder-radius: 10px;
  5063. \t-webkit-box-shadow: inset 0 0 6px red;
  5064. }
  5066. .silly_scrollbar::-webkit-scrollbar-thumb:hover {
  5067. \t-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
  5068. }
  5070. /* The container  - needed to position the dropdown content */
  5071. .dropdown-prfl {
  5072. position: relative;
  5073. display: inline-block;
  5074. }
  5076. /* Dropdown Content (Hidden by Default) */
  5077. .dropdown-content-prfl {
  5078. display: none;
  5079. position: absolute;
  5080. background-color: #fff;
  5081. min-width: 160px;
  5082. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  5083. margin-top: -5px; z-index: 50000;
  5084. }
  5086. /* Links inside the dropdown */
  5087. .dropdown-content-prfl a {
  5088. color: black;
  5089. padding: 12px 16px;
  5090. text-decoration: none;
  5091. display: block;
  5092. }
  5094. /* Change color of dropdown links on hover */
  5095. .dropdown-content-prfl a:hover {background-color: #ddd;}
  5097. /* Show the dropdown menu on hover */
  5098. .dropdown-prfl:hover .dropdown-content-prfl {display: block;}
  5100. /* Change the background color of the dropdown button when the dropdown content is shown */
  5101. .dropdown-prfl:hover .dropbtn-prfl {background-color: #3e8e41;}
  5103. .button-hover, .button-hover:hover, .button-hover:active, .button-hover:visited, .button-hover:focus {
  5104.   outline: 0;
  5105. }
  5107. .button-hover:not(.btn-lang-footer):not(.btn-send-footer):not(.homepage-seecourses):not(.module-btn):not(.btn-download):not(.dropbtn12) {
  5108.   height: 45px;
  5109.   width: auto;
  5110.   padding: 0 35px;
  5111.   border-radius: 4px;
  5112.   color: #6c6c6c;
  5113.   border: 1px solid #c6c6c6;
  5114.   text-transform: uppercase;
  5115.   font-family: 'Montserrat';
  5116.   font-size: 14px;
  5117.   font-weight: bold;
  5118.   line-height: 22px;
  5119.   text-align: center;
  5120.   transition: 0.3s cubic-bezier(0.25, 0.8, 0.95, 1);
  5121.   transition: padding 0s;
  5122.   background: transparent;
  5123. }
  5124. .button-hover:not(.btn-lang-footer):not(.btn-send-footer):not(.homepage-seecourses):not(.module-btn):not(.btn-download):hover {
  5125.   background: linear-gradient(216.73deg, #7B00B9 0%, #7323DC 100%);
  5126.   color: #fff;
  5127.   border: 1px solid #7B00B9;
  5128. }
  5129. @media (min-width: 320px) and (max-width: 768px) {
  5130.   .button-hover:not(.btn-lang-footer):not(.btn-send-footer):not(.homepage-seecourses):not(.module-btn):not(.btn-download):hover {
  5131. \tbackground: transparent;
  5132. \tcolor: #6c6c6c;
  5133. \tborder: 1px solid #c6c6c6;
  5134.   }
  5135. }
  5138. /*
  5139. \t---------------------------------------------
  5140. \tStart Modal SPP
  5141. \t-------------------------------------------------
  5142. \t*/
  5143. \thtml.sppmodal-active, body.sppmodal-active {
  5144. \toverflow: hidden;
  5145. \t}
  5146. \t.sppmodal-container {
  5147. \tposition: fixed;  /*Mettre à fixed si la classe sppmodal-active est appliqué à l'élément body*/
  5148. \tdisplay: table;
  5149. \theight:100%;
  5150. \twidth: 100%;
  5151. \ttop: 0;
  5152. \tleft: 0;
  5153. \ttransform: scale(0);
  5154. \tz-index: 1000;
  5155. \t}
  5156. \t.sppmodal-container.one {
  5157. \ttransform: scaleY(0.01) scaleX(0);
  5158. \tanimation: unfoldIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  5159. \t}
  5160. \t.sppmodal-container.one .sppmodal-background .sppmodal {
  5161. \ttransform: scale(0);
  5162. \tanimation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  5163. \t}
  5164. \t.sppmodal-container.one.out {
  5165. \ttransform: scale(1);
  5166. \tanimation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  5167. \t}
  5168. \t.sppmodal-container.one.out .sppmodal-background .sppmodal {
  5169. \tanimation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  5170. \t}
  5172. \t.sppmodal-container .sppmodal-background {
  5173. \tdisplay: table-cell;
  5174. \tbackground: rgba(247, 248, 251,0.8)!important;
  5175. \ttext-align: center;
  5176. \tvertical-align: middle;
  5177. \t}
  5178. \t.sppmodal-container .sppmodal-background .sppmodal {
  5179. \tpadding: 10px;
  5180. \tdisplay: inline-block;
  5181. \tposition: relative;
  5182. \t\twidth: 600px;
  5183. \theight: auto;
  5184. \tmax-width: 100%!important;
  5185. \theight: 750px;
  5186. \toverflow-y: auto;
  5187. \toverflow-x: hidden;
  5188. \tpadding-bottom: 40px;
  5191. \t\tfont-family: Arial;
  5192. \t\tfont-size: 13px;
  5193. \t\tfont-weight: 400;
  5194. \t\ttext-align: center;
  5195. \t\tline-height: 18px;
  5196. \t\tcolor:  #FFFFFF;
  5197. \t\tbackground-color: #FFFFFF;
  5198. \t\tbackground-repeat: repeat;
  5199. \t\tbackground-position: left top;
  5200. \t\tborder: 1px solid  #F1F3F9;
  5201. \t\tborder-radius: 4px;
  5202. \t\tbox-shadow: 0px 2px 5px 1px  #999999;
  5203. \t}
  5205. \t.sppmodal-container .sppmodal-background .sppmodal h2 {
  5206. \tfont-size: 25px;
  5207. \tline-height: 25px;
  5208. \tmargin-bottom: 15px;
  5209. \t}
  5210. \t.sppmodal-container .sppmodal-background .sppmodal p {
  5211. \tfont-size: 18px;
  5212. \tline-height: 22px;
  5213. \t}
  5214. \t.sppmodal-container .sppmodal-background .sppmodal .sppmodal-svg {
  5215. \tposition: absolute;
  5216. \ttop: 0;
  5217. \tleft: 0;
  5218. \theight: 100%;
  5219. \twidth: 100%;
  5220. \tborder-radius: 3px;
  5221. \t}
  5222. \t.sppmodal-container .sppmodal-background .sppmodal .sppmodal-svg rect {
  5223. \tstroke: #fff;
  5224. \tstroke-width: 2px;
  5225. \tstroke-dasharray: 778;
  5226. \tstroke-dashoffset: 778;
  5227. \t}
  5230. \t@keyframes unfoldIn {
  5231. \t0% {
  5232. \t\ttransform: scaleY(0.005) scaleX(0);
  5233. \t}
  5234. \t50% {
  5235. \t\ttransform: scaleY(0.005) scaleX(1);
  5236. \t}
  5237. \t100% {
  5238. \t\ttransform: scaleY(1) scaleX(1);
  5239. \t}
  5240. \t}
  5241. \t@keyframes unfoldOut {
  5242. \t0% {
  5243. \t\ttransform: scaleY(1) scaleX(1);
  5244. \t}
  5245. \t50% {
  5246. \t\ttransform: scaleY(0.005) scaleX(1);
  5247. \t}
  5248. \t100% {
  5249. \t\ttransform: scaleY(0.005) scaleX(0);
  5250. \t}
  5251. \t}
  5252. \t@keyframes zoomIn {
  5253. \t0% {
  5254. \t\ttransform: scale(0);
  5255. \t}
  5256. \t100% {
  5257. \t\ttransform: scale(1);
  5258. \t}
  5259. \t}
  5260. \t@keyframes zoomOut {
  5261. \t0% {
  5262. \t\ttransform: scale(1);
  5263. \t}
  5264. \t100% {
  5265. \t\ttransform: scale(0);
  5266. \t}
  5267. \t}
  5268.   .form-alert-top{
  5269.     z-index: 2; position: absolute; background: #caf3f7; border-top: 1px solid #ddd; bottom: 0px; width: 100%; left: 0px; height: 70px;
  5270.   }
  5271.   @media (max-width: 720px){
  5272.     .sppmodal-container .sppmodal-background .sppmodal{
  5273.       width: 100%!important;
  5274.       height: calc(100vh)!important;
  5275.     }
  5276.     .form-alert-top{
  5277.       display: none;
  5278.     }
  5279.   }
  5280. \t/*
  5281. \t--------------------------------------
  5282. \tEnd Modal SPP
  5283. \t--------------------------------------
  5284. \t*/
  5286.   .btn-home {
  5287.   font-family: \"Barlow\", sans-serif;
  5288.   font-weight: 700;
  5289.   font-size: 18px;
  5290.   padding: 15px 40px;
  5291.   background: #fff;
  5292.   border: none;
  5293.   cursor: pointer;
  5294.   transition: 0.4s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
  5295.   position: relative;
  5296.   z-index: 2;
  5297.   border-radius: 50px;
  5298.   overflow: hidden;
  5299. }
  5300. .btn-home:after {
  5301.   content: \"\";
  5302.   position: absolute;
  5303.   transition: 0.4s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
  5304. }
  5306. .btn-4 {
  5307.   color: #252D4A;
  5308.   border: 2px solid currentColor;
  5309. }
  5310. .btn-4:after {
  5311.   border: solid #5568AA;
  5312.   border-width: 0 2px 2px 0;
  5313.   display: inline-block;
  5314.   padding: 4px;
  5315.   transform: rotate(-45deg) translateY(-48%);
  5316.   top: 48%;
  5317.   right: 27%;
  5318.   opacity: 0;
  5319.   visibility: hidden;
  5320.   z-index: -1;
  5321. }
  5322. .btn-4:hover, .btn-4:focus {
  5323.   color: #5568AA;
  5324.   border: 2px solid transparent;
  5325.   padding: 15px 70px;
  5326. }
  5327. .btn-4:hover:after, .btn-4:focus:after {
  5328.   opacity: 1;
  5329.   visibility: visible;
  5330.   right: 18%;
  5331. }
  5332. .btn-4:focus {
  5333.   border-color: currentColor;
  5334. }
  5335. .btn-4:hover{
  5336.   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  5337. }
  5338. form.formmodal_inscription_newletter .nice-select {
  5339.     width: 100%!important;
  5340. }
  5341. .nice-select .list {
  5342.     max-height: 250px!important;
  5343.     overflow: auto!important;
  5344. }
  5345. .white-text-shadow{
  5346.   color: white;
  5347.   text-shadow: 2px 2px 4px #000000;
  5348. }
  5352. /* toggle-switch-1 */
  5353. .toggle-switch-1{
  5354.   --width: 70px;
  5355.   --height: 25px;
  5356.   position: relative;
  5357.   width: var(--width);
  5358.   height: var(--height);
  5359.   cursor: pointer;
  5360. }
  5361. .toggle-switch-1 input[type=checkbox]{
  5362.   opacity: 0!important;
  5363. }
  5364. .toggle-switch-1 input{
  5365.   position: relative;
  5366.   z-index: 1;
  5367.   appearance: none;
  5368. }
  5369. .toggle-switch-1 span{
  5370.   position: absolute;
  5371.   top: 0;
  5372.   left: 0;
  5373.   width: 100%;
  5374.   height: 100%;
  5375.   background: #313237;
  5376.   border-radius: var(--height);
  5377.   transition: 0.5;
  5378.   box-shadow: 0 1px 1px #313237;
  5379. }
  5380. .toggle-switch-1 input:checked ~ span{
  5381.   background: #0a58ca;
  5382.   box-shadow: 0 1px 1px #05be0566;
  5383. }
  5384. .toggle-switch-1 span i {
  5385.   position: absolute;
  5386.   width: 30px;
  5387. \theight: 18px;
  5388.   aspect-ratio: 1;
  5389.   background: #fff;
  5390.   border-radius: 10px;
  5391.   left: 4px;
  5392.   top: 3px;
  5393. }
  5394. .toggle-switch-1 span i:before {
  5395.   content: \"Non\";
  5396.   position: absolute;
  5397.   top: 50%;
  5398.   left: 50%;
  5399.   transform: translate(-50%, -50%);
  5400.   color: #333;
  5401.   text-transform: uppercase;
  5402.   font-weight: 900;
  5403.   font-style: normal;
  5404.   font-size: 8px;
  5405.   transition: 0.5s;
  5406. }
  5407. .toggle-switch-1 input:checked ~ span i{
  5408.   left: 36px;
  5409. }
  5410. .toggle-switch-1 input:checked ~ span i:before{
  5411.   content: \"Oui\";
  5412.   color: #007FFF;
  5413. }
  5414. /*-----------End checkbox----------------*/
  5416. /*------------------ Begin Stepper Souscriptio ---------------------*/
  5418. .stepper {
  5419.   clear: left;
  5420.   float: left;
  5421.   margin: 20px;
  5422. }
  5424. .stepper .step {
  5425.   float: left;
  5426.   font-size: 15px;
  5427.   margin: 0 12px;
  5428. }
  5430. .stepper .divider1 {
  5431.   border-bottom: 1px solid #cfcfcf;
  5432.   float: left;
  5433.   height: 12px;
  5434.   margin: 0 12px;
  5435.   width: 45px;
  5436. }
  5438. .stepper .circle {
  5439.   background: #cfcfcf;
  5440.   border-radius: 50%;
  5441.   color: #ffffff;
  5442.   float: left;
  5443.   font-size: 13px;
  5444.   height: 24px;
  5445.   line-height: 24px;
  5446.   text-align: center;
  5447.   width: 24px;
  5448. }
  5450. .stepper .label {
  5451.   color: #cfcfcf;
  5452.   float: left;
  5453.   line-height: 24px;
  5454.   margin-left: 8px;
  5455. }
  5457. .stepper .active .circle {
  5458.   background: #ef7521;
  5459. }
  5461. .stepper .active .label {
  5462.   color: #5b5b5b;
  5463.   font-weight: 400;
  5464. }
  5466. .stepper .complete .circle {
  5467.   background: #ef7521;
  5468. }
  5470. .stepper .complete .icon {
  5471.   font-size: 30px;
  5472.   position: relative;
  5473.   top: -3px;
  5474. }
  5476. .stepper .complete .label {
  5477.   color: #5b5b5b;
  5478.   font-weight: 400;
  5479. }
  5480. /*-----------------End stepper souscription ------------------*/
  5482. .animate__animated.animate__fadeIn {
  5483.   --animate-duration: 0.3s;
  5484. }
  5487. .main_card {
  5488.   transform: scale(0.9);
  5489.   border-radius: 10px;
  5490.   background: #fff;
  5491. }
  5492. .main_card h3 {
  5493.   font-family: Mulish;
  5494.   font-style: normal;
  5495.   font-weight: bold;
  5496.   font-size: 22px;
  5497.   line-height: 28px;
  5498.   /* identical to box height */
  5499.   color: #1A1B38;
  5500. }
  5501. .main_card .select-cards {
  5502.   height: auto;
  5503. }
  5504. .main_card .select-cards .select {
  5505.   width: 100%;
  5506.   height: 95px;
  5507.   background: #FFFFFF;
  5508.   border: 1px solid #EAEAEA;
  5509.   border-radius: 5px;
  5510.   margin-bottom: 10px;
  5511.   display: flex;
  5512.   align-items: center;
  5513.   cursor: pointer;
  5514.   transition: 0.3s;
  5515. }
  5516. .main_card .select-cards .select .titles {
  5517.   margin-left: 15px;
  5518. }
  5519. .main_card .select-cards .select .titles h4 {
  5520.   font-family: Mulish;
  5521.   font-style: normal;
  5522.   font-weight: bold;
  5523.   font-size: 16px;
  5524.   line-height: 20px;
  5525.   /* identical to box height */
  5526.   color: #1A1B38;
  5527. }
  5528. .main_card .select-cards .select .titles h5 {
  5529.   font-family: Mulish;
  5530.   font-style: normal;
  5531.   font-weight: normal;
  5532.   font-size: 16px;
  5533.   line-height: 20px;
  5534.   /* identical to box height */
  5535.   color: #1A1B38;
  5536.   margin-top: 1px;
  5537. }
  5538. .main_card .select-cards .select .check-box {
  5539.   width: 33px;
  5540.   height: 33px;
  5541.   background: #FFFFFF;
  5542.   border: 2px solid #BCBCBC;
  5543.   border-radius: 50%;
  5544.   margin-left: 25px;
  5545.   display: flex;
  5546.   align-items: center;
  5547.   justify-content: center;
  5548.   transition: 0.3s;
  5549. }
  5550. .main_card .select-cards .select .check-box .check-dot {
  5551.   width: 15px;
  5552.   height: 15px;
  5553.   background: #fff;
  5554.   border-radius: 50%;
  5555.   transition: 0.3s;
  5556.   transform: scale(0);
  5557. }
  5558. .main_card .select-cards .select[data-selected=true] {
  5559.   border-color: #000000;
  5560. }
  5561. .main_card .select-cards .select[data-selected=true] .check-box {
  5562.   background: #000000;
  5563.   border-color: #000;
  5564.   background: #1d3cc6;
  5565.   border-color: #1d3cc6;
  5566. }
  5567. .main_card .select-cards .select[data-selected=true] .check-box .check-dot {
  5568.   width: 15px;
  5569.   height: 15px;
  5570.   transform: scale(1);
  5571. }
  5572. .main_card .select-btn {
  5573.   height: 95px;
  5574.   background: #1d3cc6;
  5575.   border-radius: 5px;
  5576.   font-family: Mulish;
  5577.   font-style: normal;
  5578.   font-weight: bold;
  5579.   font-size: 18px;
  5580.   line-height: 23px;
  5581.   cursor: pointer;
  5582.   /* identical to box height */
  5583.   text-align: center;
  5584.   color: #FFFFFF;
  5585.   display: flex;
  5586.   align-items: center;
  5587.   justify-content: center;
  5588. }
  5589. .stepper-item-1{
  5590.   display: block;
  5591. }
  5592. .stepper-item-2{
  5593.   display: none;
  5594. }
  5596. </style>
  5597. ";
  5598.         
  5599.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  5601.         
  5602.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  5604.     }
  5606.     // line 4644
  5607.     public function block_body($context, array $blocks = [])
  5608.     {
  5609.         $macros = $this->macros;
  5610.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  5611.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));
  5613.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  5614.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));
  5616.         // line 4645
  5617.         echo "
  5618.   ";
  5619.         
  5620.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  5622.         
  5623.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  5625.     }
  5627.     // line 4925
  5628.     public function block_srcjavascript($context, array $blocks = [])
  5629.     {
  5630.         $macros = $this->macros;
  5631.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  5632.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "srcjavascript"));
  5634.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  5635.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "srcjavascript"));
  5637.         // line 4926
  5638.         echo "
  5639. ";
  5640.         
  5641.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  5643.         
  5644.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  5646.     }
  5648.     // line 5025
  5649.     public function block_javascript($context, array $blocks = [])
  5650.     {
  5651.         $macros = $this->macros;
  5652.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  5653.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->enter($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
  5655.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02 = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  5656.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->enter($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "javascript"));
  5658.         // line 5026
  5659.         echo "
  5660. \t";
  5661.         
  5662.         $__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02->leave($__internal_319393461309892924ff6e74d6d6e64287df64b63545b994e100d4ab223aed02_prof);
  5664.         
  5665.         $__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e->leave($__internal_085b0142806202599c7fe3b329164a92397d8978207a37e79d70b8c52599e33e_prof);
  5667.     }
  5669.     public function getTemplateName()
  5670.     {
  5671.         return "Theme/layoutbase.html.twig";
  5672.     }
  5674.     public function isTraitable()
  5675.     {
  5676.         return false;
  5677.     }
  5679.     public function getDebugInfo()
  5680.     {
  5681.         return array (  5659 => 5026,  5649 => 5025,  5638 => 4926,  5628 => 4925,  5617 => 4645,  5607 => 4644,  4636 => 3667,  4623 => 3657,  1110 => 147,  1104 => 144,  1100 => 143,  1096 => 142,  1091 => 140,  1086 => 138,  1082 => 137,  1078 => 136,  1074 => 135,  1070 => 134,  1066 => 133,  1062 => 132,  1058 => 131,  1052 => 128,  1047 => 126,  1042 => 124,  1037 => 122,  1032 => 120,  1027 => 118,  1022 => 116,  1017 => 114,  1012 => 112,  1007 => 110,  1003 => 109,  914 => 23,  907 => 18,  897 => 17,  884 => 13,  874 => 12,  855 => 9,  806 => 5231,  751 => 5179,  726 => 5157,  695 => 5129,  660 => 5097,  648 => 5088,  606 => 5049,  593 => 5039,  580 => 5028,  578 => 5025,  519 => 4969,  503 => 4956,  492 => 4948,  482 => 4941,  467 => 4928,  465 => 4925,  461 => 4924,  457 => 4923,  452 => 4921,  447 => 4919,  442 => 4917,  437 => 4915,  432 => 4913,  427 => 4911,  422 => 4909,  417 => 4907,  411 => 4904,  405 => 4901,  400 => 4899,  395 => 4897,  390 => 4895,  383 => 4891,  369 => 4882,  356 => 4871,  354 => 4870,  340 => 4859,  329 => 4851,  320 => 4845,  313 => 4841,  296 => 4827,  182 => 4716,  170 => 4707,  159 => 4699,  114 => 4657,  109 => 4655,  99 => 4647,  97 => 4644,  92 => 4642,  76 => 4628,  74 => 17,  70 => 15,  68 => 12,  64 => 10,  62 => 9,  58 => 8,  49 => 1,);
  5682.     }
  5684.     public function getSourceContext()
  5685.     {
  5686.         return new Source("<!DOCTYPE HTML>
  5687. <html>
  5688. <head>
  5689.   <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"/>
  5690.   <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no\"/>
  5691.   <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"/>
  5692.   <meta name=\"msapplication-tap-highlight\" content=\"no\"/>
  5693.   {{ render(controller(\"App\\\\Controller\\\\General\\\\Template\\\\MenuController:relicon\")) }}
  5694.   {% block meta %} {% endblock %}
  5696.   <title>
  5697.     {% block title %}
  5698.       {{ render(controller(\"App\\\\Controller\\\\General\\\\Template\\\\MenuController:relicon\", {'position': 'title'})) }}
  5699.     {% endblock %}
  5700.   </title>
  5702.   {% block stylesheets %}
  5704.     <!-- Web Font -->
  5705.     <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\"/>
  5706.     <link href=\"https://fonts.googleapis.com/css?family=Montserrat\" rel=\"stylesheet\"/>
  5708.     {{ render(controller(\"App\\\\Controller\\\\General\\\\Template\\\\MenuController:variablesCss\")) }}
  5710.   \t<style>
  5711.   \t\t.header.shop .all-category{
  5712.   \t\t\tbackground: var(--bg-principal)!important;
  5713.         color: var(--text-principal)!important;
  5714.   \t\t}
  5715.       .header.shop .header-inner {
  5716.         background: var(--bg-secondaire)!important;
  5717.         color: var(--text-secondaire)!important;
  5718.       }
  5719.       .header.shop .list-main span i{
  5720.         color: var(--text-icon-color)!important;
  5721.       }
  5722.       .header.shop .list-main span a:hover{
  5723.         color: var(--text-icon-color)!important;
  5724.       }
  5725.       .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{
  5726.         background: var(--bg-principal)!important;
  5727.         color: var(--text-principal)!important;
  5728.       }
  5729.       .header.sticky .header-inner .nav li a {
  5730.         color: var(--text-secondaire)!important;
  5731.       }
  5732.       .owl-theme .owl-nav [class*='owl-'], .header.shop .nav li .new{
  5733.         background: var(--bg-principal)!important;
  5734.         color: var(--text-principal)!important;
  5735.       }
  5736.       .header.shop .nav li .new::before{
  5737.         border: 4px solid var(--bg-principal)!important;
  5738.       }
  5739.       .header.shop .main-category li .mega-menu .single-menu .title-link{
  5740.         background: var(--bg-principal)!important;
  5741.         color: var(--text-principal)!important;
  5742.       }
  5743.       .header.shop .main-category li .mega-menu .single-menu .title-link:hover{
  5744.         background: var(--bg-principal)!important;
  5745.         color: var(--text-principal)!important;
  5746.       }
  5747.       .header.shop .main-category li .mega-menu {
  5748.         border-left: 3px solid var(--bg-principal)!important;
  5749.       }
  5750.       .header.shop .main-category li .mega-menu .single-menu .image{
  5751.           overflow: hidden;
  5752.           text-align: center!important;
  5753.           box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  5754.           transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  5755.           padding: 15px 10px;
  5756.       }
  5758.       .header.shop .main-category li .mega-menu .single-menu img {
  5759.           display: inline-block!important;
  5760.           cursor: pointer;
  5761.       }
  5762.       .header.shop .topbar{
  5763.         background: var(--bg-principal)!important;
  5764.       }
  5766.       .header.shop .list-main span a, .principal-link{
  5767.         color: var(--text-principal)!important;
  5768.       }
  5769.       .header.shop .list-main span a:hover, .principal-link:hover{
  5770.         background: var(--bg-secondaire)!important;
  5771.         color: var(--text-secondaire)!important;
  5772.       }
  5773.       .call-action-post, .header.shop .right-bar .sinlge-bar .single-icon .total-count{
  5774.         background: var(--bg-principal)!important;
  5775.         color: var(--text-principal)!important;
  5776.       }
  5777.       .header.shop .list-main span i{
  5778.         color: var(--text-principal)!important;
  5779.       }
  5780.       .header.shop .nav li.menu-dd-coustom:hover a.target-dd {
  5781.         background: var(--bg-principal)!important;
  5782.         color: var(--text-principal)!important;
  5783.       }
  5784.       .header .shopping .dropdown-cart-header a:hover, .header.shop .right-bar .sinlge-bar .single-icon:hover{
  5785.         color: var(--bg-principal)!important;
  5786.       }
  5787.       .header .shopping-item .bottom .btn:hover, .header.shop .search-bar .btnn:hover{
  5788.         background: var(--bg-principal)!important;
  5789.         color: var(--text-principal)!important;
  5790.       }
  5791.   \t</style>
  5793.     <!-- Bootstrap -->
  5794. \t<link rel=\"stylesheet\" href=\"{{ asset('template/css/bootstrap.css') }}\"/>
  5795. \t<link href=\"{{ asset('template/css/afhstyle.css') }}\" type=\"text/css\" rel=\"stylesheet\" media=\"screen,projection\"/>
  5796. \t<!-- Magnific Popup -->
  5797.   <link rel=\"stylesheet\" href=\"{{ asset('template/css/magnific-popup.min.css') }}\"/>
  5798. \t<!-- Font Awesome -->
  5799.   <link rel=\"stylesheet\" href=\"{{ asset('template/css/font-awesome.css') }}\"/>
  5800. \t<!-- Fancybox -->
  5801. \t<link rel=\"stylesheet\" href=\"{{ asset('template/css/jquery.fancybox.min.css') }}\"/>
  5802. \t<!-- Themify Icons -->
  5803.   <link rel=\"stylesheet\" href=\"{{ asset('template/css/themify-icons.css') }}\"/>
  5804. \t<!-- Nice Select CSS -->
  5805.   <link rel=\"stylesheet\" href=\"{{ asset('template/css/niceselect.css') }}\"/>
  5806. \t<!-- Animate CSS -->
  5807.   <link rel=\"stylesheet\" href=\"{{ asset('template/css/animate.css') }}\"/>
  5808. \t<!-- Flex Slider CSS -->
  5809.   <link rel=\"stylesheet\" href=\"{{ asset('template/css/flex-slider.min.css') }}\"/>
  5810. \t<!-- Owl Carousel -->
  5811.   <link rel=\"stylesheet\" href=\"{{ asset('template/css/owl-carousel.css') }}\"/>
  5812. \t<!-- Slicknav -->
  5813.   <link rel=\"stylesheet\" href=\"{{ asset('template/css/slicknav.min.css') }}\"/>
  5815. \t<!-- Eshop StyleSheet -->
  5816. \t<link rel=\"stylesheet\" href=\"{{ asset('template/css/reset.css') }}\"/>
  5817. \t<link rel=\"stylesheet\" href=\"{{ asset('template/css/style.css') }}\"/>
  5818.   <link rel=\"stylesheet\" href=\"{{ asset('template/css/responsive.css') }}\"/>
  5819. \t<link rel=\"stylesheet\" href=\"{{ asset('autocomplete/css/jquery.auto-complete.css') }}\"/>
  5820.   <link rel=\"stylesheet\" href=\"{{ asset('template/css/bootstrap-icons.css') }}\"/>
  5821. \t<script src=\"{{ asset('template/js/jquery.min.js') }}\"></script>
  5822. \t<script src=\"{{ asset('template/js/jquery.newsTicker.js') }}\"></script>
  5823. \t<script src=\"{{ asset('template/js/lottieflow.min.js') }}\" type=\"text/javascript\"></script>
  5824. \t<!-- Owl Carousel JS -->
  5825. \t<script src=\"{{ asset('template/js/owl.carousel.min.js') }}\"></script>
  5827. \t<link rel=\"stylesheet\" href=\"{{ asset('template/notify/themes/alertify.core.css') }}\"/>
  5828. \t<link rel=\"stylesheet\" href=\"{{ asset('template/notify/themes/alertify.default.css') }}\" id=\"toggleCSS\"/>
  5829.     <script src=\"{{ asset('template/notify/lib/alertify.min.js') }}\"></script>
  5830. \t<script>
  5831. \t\tfunction resetNotif(){
  5832. \t\t\t\$(\"#toggleCSS\").attr(\"href\", \"{{ asset('template/notify/themes/alertify.default.css') }}\");
  5833. \t\t\talertify.set({
  5834. \t\t\t\tlabels : {
  5835. \t\t\t\t\tok     : \"OK\",
  5836. \t\t\t\t\tcancel : \"Cancel\"
  5837. \t\t\t\t},
  5838. \t\t\t\tdelay : 5000,
  5839. \t\t\t\tbuttonReverse : false,
  5840. \t\t\t\tbuttonFocus   : \"ok\"
  5841. \t\t\t});
  5842. \t\t}
  5843. \t</script>
  5845. <style>
  5846. .hover-offer, .hover-offer h2 {
  5847. \ttext-align: left;
  5848. }
  5849. .hover-offer, .hover-offer .overlay2 {
  5850. \twidth: 95%;
  5851. \tmax-width: 450px;
  5852. \theight: auto;
  5853. \toverflow: hidden
  5854. }
  5855. .hover-offer button.info, .hover-offer h2 {
  5856. \ttext-transform: uppercase;
  5857. \tcolor: #fff
  5858. }
  5859. .hover-offer {
  5860. cursor: pointer;
  5861. \tmargin-bottom: 20px;
  5862. \tborder-radius: 2px;
  5863. \twidth: 100%;
  5864. \t    min-width: 267px;
  5865. \tmax-height: 350px;
  5866. \tmax-width: 400px;
  5867. \tmargin-left: auto;
  5868. \tmargin-right: auto;
  5869. }
  5870. .hover-offer .overlay2 {
  5871. \tposition: absolute;
  5872. \ttop: 0;
  5873. \tleft: 0
  5874. }
  5875. .hover-offer img {
  5876. \tdisplay: block;
  5877. \tposition: relative;
  5878. }
  5879. .offer-content {
  5880. position: absolute;
  5881.     z-index: 10;
  5882.     /* height: 100%; */
  5883.        width: 94%;
  5884.     /* max-height: 239px; */
  5885.     bottom: 0;
  5886.     padding: 5% 4% 14% 7%;
  5887.     color: #FFF;
  5888.    background-image: linear-gradient(145deg, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.1) 80%);
  5889.     background-image: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.1) 80%);
  5890.     background-image:-webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.1) 80%);
  5891.     /* background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 60%); */
  5892.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#000', endColorstr='transparent', GradientType=1 );
  5893.     /* -webkit-transition: all .3s ease-out 0s; */
  5894.     -moz-transition: all .3s ease-out 0s;
  5895.     -o-transition: all .3s ease-out 0s;
  5896.     -ms-transition: all .3s ease-out 0s;
  5897.     transition: all .3s ease-out 0s;
  5898.     margin-bottom: 20px;
  5899.     margin-top: 1px;
  5900.     top: 0;
  5901. }
  5902. .offer-content h4 {
  5903. \tfont-size: 170% !important;
  5904. \tmargin-top: 10px;
  5905. \tmargin-bottom: 16px;
  5906. \tfont-weight: 700;
  5907. \tmargin-top: 20px;
  5908. }
  5909. .offer-content .price {
  5910. \tfont-size: 20px;
  5911. \tcolor: #fff;
  5912. \ttext-align: left;
  5913. \tpadding-top: 2%;
  5914. }
  5915. .ehover1 img {
  5916. \t-webkit-transition: all .4s linear;
  5917. \ttransition: all .4s linear
  5918. }
  5919. .ehover1 .overlay2 {
  5920. \t-webkit-transition: all .4s ease-in-out;
  5921. \ttransition: all .4s ease-in-out
  5922. }
  5923. .ehover1:hover img {
  5924. \t-ms-transform: scale(1.2);
  5925. \t-webkit-transform: scale(1.2);
  5926. \ttransform: scale(1.2)
  5927. }
  5928. .ehover1:hover .overlay2 {
  5929. \topacity: 1
  5930. }
  5931. .offer-content .price-offer {
  5932. \tfont-size: 32px;
  5933. \tcolor: #fff;
  5934. \tmargin-top: 10px;
  5935. }
  5936. .flights-icon {
  5937. \tborder: 1px solid #ffffff;
  5938. \tborder-radius: 100%;
  5939. \tdisplay: block;
  5940. \tfont-family: \"theme-icons\";
  5941. \tfont-size: 20px !important;
  5942. \theight: 38px;
  5943. \tline-height: 38px !important;
  5944. \ttext-align: center;
  5945. \twidth: 38px;
  5946. }
  5947. p.detail {
  5948. \tfont-size: 118%;
  5949. \tline-height: 38px;
  5950. }
  5951. p.price-offer {
  5952. \tfont-size: 16px;
  5953. \tcolor: #fff;
  5954. \tfont-weight: 500;
  5955. \tline-height: 23px;
  5956. }
  5957. p.price-offer span {
  5958. \tfont-size: 16px;
  5959. }
  5960. /* RIBBON */
  5963. .ribbon {
  5964. \tposition: absolute;
  5965. \tz-index: 10;
  5966. \tpadding: 0px 7px;
  5967. \t/* margin-left: 62.5%; */
  5968.     /* margin-right: 12.0%; */
  5969. \tborder-top-left-radius: 2px;
  5970. \tborder-bottom-left-radius: 2px;
  5971. \tfont-size: 15px;
  5972. \tline-height: 32px;
  5973. \tfont-weight: bold;
  5974. \ttext-align: center;
  5975. \tcolor: #fff;
  5976. \ttext-shadow: 0 1px 1px rgba(0,0,0,0.2);
  5977. \t-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  5978. \t-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  5979. \tbox-shadow: 0 1px 1px rgba(0,0,0,0.2);
  5980. \tzoom: 1;
  5981. \t/* top: 8%; */
  5982. right: -3%;
  5984. \t/* left: 61%; */
  5985. \tmin-width: 40%;
  5986. \tmax-width: 50%;
  5987. \theight: 32px;
  5989. }
  5990. .orange {
  5991. \tbackground: #FF9600;
  5992. }
  5993. .blue {
  5994. \tbackground: #3398d9
  5995. }
  5996. .green {
  5997. \tbackground: #66b94d;
  5998. }
  5999. .ribbon:after {
  6000. \tcontent: \"\";
  6001. \tposition: absolute;
  6002. \tz-index: -20;
  6003. \ttop: 100%;
  6004. \tleft: auto;
  6005. \tborder-style: solid;
  6006. \tborder-width: 0 0 10px 10px;
  6007. \tright: 0;
  6008. }
  6009. .orange:after {
  6010. \tborder-color: transparent #DC5F0B;
  6011. }
  6012. .blue:after {
  6013. \tborder-color: transparent #1e5b82;
  6014. }
  6015. .green:after {
  6016. \tborder-color: transparent #3e7030;
  6017. }
  6018. .no-ribbon {
  6019. \theight: 41px;
  6020. \tposition: absolute;
  6021. \tz-index: 2000;
  6022. }
  6023. /*END OF RIBBON */
  6024. .button2 {
  6025. \tmargin: 0 auto;
  6026. \t/* width: 145px; */
  6027. \theight: 40px;
  6028. \tbackground: rgba(0, 0, 0, 0.5);
  6029. \toverflow: hidden;
  6030. \ttext-align: center;
  6031. \ttransition: .2s;
  6032. \tcursor: pointer;
  6033. \tborder-radius: 4px !important;
  6034. \tfloat: left;
  6035. \tborder: 1px solid white;
  6036. \tfont-size: 17px;
  6037. \tmargin-top: 20px;
  6038. \tfont-weight: 400;
  6039. \tpadding: 20px 20px;
  6040. \tline-height: 0em;
  6041. \tposition: absolute;
  6042.     right: 7%;
  6043.     bottom: 7%;
  6044. }
  6046. @media (max-width: 768px) {
  6047. .offer-content h4 {
  6048. \tfont-size: 150% !important;
  6049. }
  6050. p.detail {
  6051. \tfont-size: 140%;
  6052. \ttext-shadow: 1px 1px 9px rgba(0, 0, 0, 1);
  6053.   \tline-height: 18px;
  6054. }
  6055. .offer-content {
  6056. position: absolute;
  6057.  z-index: 10;
  6058.  min-width:279px;
  6059. max-width: 400px;
  6060. width: 89%;
  6061. bottom: 0;
  6062.  color: #FFF;
  6063.      padding: 5% 7% 14% 7%;
  6064. }
  6065. .hover-offer {
  6066. \twidth:95%;
  6067.     min-width: 280px;
  6068.  min-height: auto;
  6069.  max-height: 550px;
  6070.  /*max-width: 640px;*/
  6071. \t/* margin-left: auto; */
  6072. \tmargin-right: auto;
  6073. \t/* height: 100%; */
  6075. /* width: auto; */
  6076. }
  6077. .col-xs-offset-1 {
  6078. \tmargin-left: 0;
  6079. }
  6080. .ribbon {
  6081. \twidth: 60%;
  6082. \t    left: 52.5%;
  6083. }
  6084. }
  6086. @media (max-width: 545px) {
  6087. .button2 {
  6088.  width: 80%;
  6089.  padding: 23px;
  6090.  font-size: 23px;
  6091.  margin-right: 2%;
  6092.        bottom: 2%;
  6093. }
  6094. .ribbon {
  6095. \twidth: 49.9%;
  6096.  left: 53.4%;
  6097. }
  6098. }
  6100. .hover-offer {
  6101. \tposition: initial
  6102. }
  6103. .col-lg-3, .col-md-4, .col-sm-6, .col-xs-12 {
  6104. \tpadding: 0 10px
  6105. }
  6107. @media (min-width: 1024px) {
  6108.   .offer-content:hover {
  6109.     box-shadow: none
  6110.   }
  6111.   .offer-content:hover figcaption {
  6112.     background-image: none
  6113.   }
  6114. }
  6115. /*------------ END OF OFFERS ✂----------------------✂*/
  6117. .coustom-my-text{
  6118. \ttext-align: left;word-wrap: break-word;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;
  6119. }
  6120. .mega-menu{
  6121. \tbox-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  6122. \tz-index: 50000;
  6123. }
  6124. .main-category{
  6125. box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  6126. transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  6127. }
  6128. .display-vertical-menu{
  6129. \topacity: 0;
  6130. \tvisibility: hidden;
  6131. }
  6133. .row{
  6134. \tmargin: 0px;
  6135. }
  6137. .breadcrumbs {
  6138.   list-style: none;
  6139.   margin: 0;
  6140.   padding: 0;
  6141. }
  6143. .breadcrumbs li {
  6144.   list-style: none;
  6145.   margin: 0;
  6146.   padding: 0;
  6147.   display: block;
  6148.   float: left;
  6149.   font-family: 'Montserrat', sans-serif!important;
  6150.   font-size: 13px;
  6151.   text-transform: capitalize;
  6152.   font-weight: 700;
  6153.   letter-spacing: .05em;
  6154.   line-height: 20px;
  6155.   color: hsl(0, 0%, 30%);
  6156. }
  6158. .breadcrumbs li a {
  6159.   display: block;
  6160.   padding: 0 40px 0 0px;
  6161.   color: hsl(0, 0%, 30%);
  6162.   text-decoration: none;
  6163.   height: 20px;
  6164.   font-weight: 700;
  6165.   letter-spacing: .05em;
  6166.   line-height: 20px;
  6167.   position: relative;
  6168.   perspective: 700px;
  6169. }
  6171. .breadcrumbs li a:after {
  6172.   content: '';
  6173.   width: 20px;
  6174.   height: 20px;
  6175.   border-color: #333;
  6176.   border-style: solid;
  6177.   border-width: 1px 1px 0 0;
  6179.   -webkit-backface-visibility: hidden;
  6180.   outline: 1px solid transparent;
  6182.   position: absolute;
  6183.   right: 20px;
  6184.   -webkit-transition: all .15s ease;
  6185. \t -moz-transition: all .15s ease;
  6186. \t  -ms-transition: all .15s ease;
  6187. \t\t  transition: all .15s ease;
  6188.   -webkit-transform: rotateZ(45deg) skew(10deg, 10deg);
  6189. \t -moz-transform: rotateZ(45deg) skew(10deg, 10deg);
  6190. \t  -ms-transform: rotateZ(45deg) skew(10deg, 10deg);
  6191. \t\t  transform: rotateZ(45deg) skew(10deg, 10deg);
  6192. }
  6195. .breadcrumbs li a:hover:after {
  6196.   right: 15px;
  6197.   -webkit-transform: rotateZ(45deg) skew(-10deg, -10deg);
  6198. \t -moz-transform: rotateZ(45deg) skew(-10deg, -10deg);
  6199. \t  -ms-transform: rotateZ(45deg) skew(-10deg, -10deg);
  6200. \t\t  transform: rotateZ(45deg) skew(-10deg, -10deg);
  6201. }
  6203. .btn-afh-flat {
  6204. \tfont-size: 12px;
  6205. \tborder: 3px solid #ddd;
  6206. \tmargin-right: -2px;
  6207. \tfont-family: 'Montserrat', sans-serif!important;
  6208. \ttext-align: center;
  6209. \tcolor: #030303;
  6210. \tbackground: linear-gradient(#FFFFFF,#E6E6E6);
  6211. \tborder: 1px solid #CDCDCD;
  6212. \tborder-radius: 3px;
  6213. \tdisplay: inline-block;
  6214. \tpadding: 4px 7px;
  6215. }
  6217. .search-form-left-side .nice-select{
  6218. \twidth: 100%!important;
  6219. }
  6220. .search-form-top-side .nice-select{
  6221. \twidth: 100%!important;
  6222. }
  6223. .form-post-product .nice-select{
  6224. \twidth: 100%!important;
  6225. }
  6228. .product-grid {
  6229.   font-family: Raleway,sans-serif;
  6230.   text-align: center;
  6231.   padding: 0 0 72px;
  6232.   border: 1px solid rgba(0, 0, 0, 0.1);
  6233.   overflow: hidden;
  6234.   position: relative;
  6235.   z-index: 1;
  6236. }
  6237. .product-grid .product-image {
  6238.   position: relative;
  6239.   -webkit-transition: all .3s ease 0s;
  6240.   transition: all .3s ease 0s;
  6241. }
  6242. .product-grid .product-image a {
  6243.   display: block;
  6244. }
  6245. .product-grid .product-image img {
  6246.   width: 100%;
  6247.   height: auto;
  6248. }
  6249. .product-grid .pic-1 {
  6250.   opacity: 1;
  6251.   -webkit-transition: all .3s ease-out 0s;
  6252.   transition: all .3s ease-out 0s;
  6253. }
  6254. .product-grid:hover .pic-1 {
  6255.   opacity: 1;
  6256. }
  6257. .product-grid .pic-2 {
  6258.   opacity: 0;
  6259.   position: absolute;
  6260.   top: 0;
  6261.   left: 0;
  6262.   -webkit-transition: all .3s ease-out 0s;
  6263.   transition: all .3s ease-out 0s;
  6264. }
  6265. .product-grid:hover .pic-2 {
  6266.   opacity: 1;
  6267. }
  6268. .product-grid .social {
  6269.   width: 150px;
  6270.   padding: 0;
  6271.   margin: 0;
  6272.   list-style: none;
  6273.   opacity: 0;
  6274.   -webkit-transform: translateY(-50%) translateX(-50%);
  6275.           transform: translateY(-50%) translateX(-50%);
  6276.   position: absolute;
  6277.   top: 60%;
  6278.   left: 50%;
  6279.   z-index: 1;
  6280.   -webkit-transition: all .3s ease 0s;
  6281.   transition: all .3s ease 0s;
  6282. }
  6283. .product-grid:hover .social {
  6284.   opacity: 1;
  6285.   top: 50%;
  6286. }
  6287. .product-grid .social li {
  6288.   display: inline-block;
  6289. }
  6290. .product-grid .social li a {
  6291.   color: #fff;
  6292.   background-color: #333;
  6293.   font-size: 16px;
  6294.   line-height: 40px;
  6295.   text-align: center;
  6296.   height: 40px;
  6297.   width: 40px;
  6298.   margin: 0 2px;
  6299.   display: block;
  6300.   position: relative;
  6301.   -webkit-transition: all .3s ease-in-out;
  6302.   transition: all .3s ease-in-out;
  6303. }
  6304. .product-grid .social li a:hover {
  6305.   color: #fff;
  6306.   background-color: #ef5777;
  6307. }
  6308. .product-grid .social li a:after, .product-grid .social li a:before {
  6309.   content: attr(data-tip);
  6310.   color: #fff;
  6311.   background-color: #000;
  6312.   font-size: 12px;
  6313.   letter-spacing: 1px;
  6314.   line-height: 20px;
  6315.   padding: 1px 5px;
  6316.   white-space: nowrap;
  6317.   opacity: 0;
  6318.   -webkit-transform: translateX(-50%);
  6319.           transform: translateX(-50%);
  6320.   position: absolute;
  6321.   left: 50%;
  6322.   top: -30px;
  6323. }
  6324. .product-grid .social li a:after {
  6325.   content: '';
  6326.   height: 15px;
  6327.   width: 15px;
  6328.   border-radius: 0;
  6329.   -webkit-transform: translateX(-50%) rotate(45deg);
  6330.           transform: translateX(-50%) rotate(45deg);
  6331.   top: -20px;
  6332.   z-index: -1;
  6333. }
  6334. .product-grid .social li a:hover:after, .product-grid .social li a:hover:before {
  6335.   opacity: 1;
  6336. }
  6337. .product-grid .product-discount-label, .product-grid .product-new-label {
  6338.   color: #fff;
  6339.   background-color: #ef5777;
  6340.   font-size: 12px;
  6341.   text-transform: uppercase;
  6342.   padding: 2px 7px;
  6343.   display: block;
  6344.   position: absolute;
  6345.   top: 10px;
  6346.   left: 0;
  6347. }
  6348. .product-grid .product-discount-label {
  6349.   background-color: #333;
  6350.   left: auto;
  6351.   right: 0;
  6352. }
  6353. .product-grid .rating {
  6354.   color: #FFD200;
  6355.   font-size: 12px;
  6356.   padding: 12px 0 0;
  6357.   margin: 0;
  6358.   list-style: none;
  6359.   position: relative;
  6360.   z-index: -1;
  6361. }
  6362. .product-grid .rating li.disable {
  6363.   color: rgba(0, 0, 0, 0.2);
  6364. }
  6365. .product-grid .product-content {
  6366.   background-color: #fff;
  6367.   text-align: center;
  6368.   padding: 12px 0;
  6369.   margin: 0 auto;
  6370.   position: absolute;
  6371.   left: 0;
  6372.   right: 0;
  6373.   bottom: -27px;
  6374.   z-index: 1;
  6375.   -webkit-transition: all .3s;
  6376.   transition: all .3s;
  6377. }
  6378. .product-grid:hover .product-content {
  6379.   bottom: 0;
  6380. }
  6381. .product-grid .title {
  6382.   font-size: 13px;
  6383.   font-weight: 400;
  6384.   letter-spacing: .5px;
  6385.   text-transform: capitalize;
  6386.   margin: 0 0 10px;
  6387.   -webkit-transition: all .3s ease 0s;
  6388.   transition: all .3s ease 0s;
  6389. }
  6390. .product-grid .title a {
  6391.   color: #828282;
  6392. }
  6393. .product-grid .title a:hover {
  6394.   color: #ef5777;
  6395. }
  6396. .product-grid:hover .title a {
  6397.   color: #ef5777;
  6398. }
  6399. .product-grid .price {
  6400.   color: #333;
  6401.   font-size: 17px;
  6402.   font-family: Montserrat,sans-serif;
  6403.   font-weight: 700;
  6404.   letter-spacing: .6px;
  6405.   margin-bottom: 8px;
  6406.   text-align: center;
  6407.   -webkit-transition: all .3s;
  6408.   transition: all .3s;
  6409. }
  6410. .product-grid .price span {
  6411.   color: #999;
  6412.   font-size: 13px;
  6413.   font-weight: 400;
  6414.   text-decoration: line-through;
  6415.   margin-left: 3px;
  6416.   display: inline-block;
  6417. }
  6418. .product-grid .add-to-cart {
  6419.   color: #000;
  6420.   font-size: 13px;
  6421.   font-weight: 600;
  6422. }
  6424. @media only screen and (max-width: 990px) {
  6425.   .product-grid {
  6426.     margin-bottom: 30px;
  6427.   }
  6428. }
  6429. /********************* Shopping Demo-2 **********************/
  6430. .demo {
  6431.   padding: 45px 0;
  6432. }
  6434. .product-grid2 {
  6435.   font-family: 'Open Sans',sans-serif;
  6436.   position: relative;
  6437. }
  6438. .product-grid2 .product-image2 {
  6439.   overflow: hidden;
  6440.   position: relative;
  6441. }
  6442. .product-grid2 .product-image2 a {
  6443.   display: block;
  6444. }
  6445. .product-grid2 .product-image2 img {
  6446.   width: 100%;
  6447.   height: auto;
  6448. }
  6450. .product-image2 .pic-1 {
  6451.   opacity: 1;
  6452.   -webkit-transition: all .5s;
  6453.   transition: all .5s;
  6454. }
  6456. .product-grid2:hover .product-image2 .pic-1 {
  6457.   opacity: 0;
  6458. }
  6460. .product-image2 .pic-2 {
  6461.   width: 100%;
  6462.   height: 100%;
  6463.   opacity: 0;
  6464.   position: absolute;
  6465.   top: 0;
  6466.   left: 0;
  6467.   -webkit-transition: all .5s;
  6468.   transition: all .5s;
  6469. }
  6471. .product-grid2:hover .product-image2 .pic-2 {
  6472.   opacity: 1;
  6473. }
  6474. .product-grid2 .social {
  6475.   padding: 0;
  6476.   margin: 0;
  6477.   position: absolute;
  6478.   bottom: 50px;
  6479.   right: 25px;
  6480.   z-index: 1;
  6481. }
  6482. .product-grid2 .social li {
  6483.   margin: 0 0 10px;
  6484.   display: block;
  6485.   -webkit-transform: translateX(100px);
  6486.           transform: translateX(100px);
  6487.   -webkit-transition: all .5s;
  6488.   transition: all .5s;
  6489. }
  6490. .product-grid2:hover .social li {
  6491.   -webkit-transform: translateX(0);
  6492.           transform: translateX(0);
  6493. }
  6494. .product-grid2:hover .social li:nth-child(2) {
  6495.   -webkit-transition-delay: .15s;
  6496.           transition-delay: .15s;
  6497. }
  6498. .product-grid2:hover .social li:nth-child(3) {
  6499.   -webkit-transition-delay: .25s;
  6500.           transition-delay: .25s;
  6501. }
  6502. .product-grid2 .social li a {
  6503.   color: #505050;
  6504.   background-color: #fff;
  6505.   font-size: 17px;
  6506.   line-height: 45px;
  6507.   text-align: center;
  6508.   height: 45px;
  6509.   width: 45px;
  6510.   border-radius: 50%;
  6511.   display: block;
  6512.   -webkit-transition: all .3s ease 0s;
  6513.   transition: all .3s ease 0s;
  6514. }
  6515. .product-grid2 .social li a:hover {
  6516.   color: #fff;
  6517.   background-color: #3498db;
  6518.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  6519. }
  6520. .product-grid2 .social li a:after, .product-grid2 .social li a:before {
  6521.   content: attr(data-tip);
  6522.   color: #fff;
  6523.   background-color: #000;
  6524.   font-size: 12px;
  6525.   line-height: 22px;
  6526.   border-radius: 3px;
  6527.   padding: 0 5px;
  6528.   white-space: nowrap;
  6529.   opacity: 0;
  6530.   -webkit-transform: translateX(-50%);
  6531.           transform: translateX(-50%);
  6532.   position: absolute;
  6533.   left: 50%;
  6534.   top: -30px;
  6535. }
  6536. .product-grid2 .social li a:after {
  6537.   content: '';
  6538.   height: 15px;
  6539.   width: 15px;
  6540.   border-radius: 0;
  6541.   -webkit-transform: translateX(-50%) rotate(45deg);
  6542.           transform: translateX(-50%) rotate(45deg);
  6543.   top: -22px;
  6544.   z-index: -1;
  6545. }
  6546. .product-grid2 .social li a:hover:after, .product-grid2 .social li a:hover:before {
  6547.   opacity: 1;
  6548. }
  6549. .product-grid2 .add-to-cart {
  6550.   color: #fff;
  6551.   background-color: #404040;
  6552.   font-size: 15px;
  6553.   text-align: center;
  6554.   width: 100%;
  6555.   padding: 10px 0;
  6556.   display: block;
  6557.   position: absolute;
  6558.   left: 0;
  6559.   bottom: -100%;
  6560.   -webkit-transition: all .3s;
  6561.   transition: all .3s;
  6562. }
  6563. .product-grid2 .add-to-cart:hover {
  6564.   background-color: #3498db;
  6565.   text-decoration: none;
  6566. }
  6567. .product-grid2:hover .add-to-cart {
  6568.   bottom: 0;
  6569. }
  6570. .product-grid2 .product-new-label {
  6571.   background-color: #3498db;
  6572.   color: #fff;
  6573.   font-size: 17px;
  6574.   padding: 5px 10px;
  6575.   position: absolute;
  6576.   right: 0;
  6577.   top: 0;
  6578.   -webkit-transition: all .3s;
  6579.   transition: all .3s;
  6580. }
  6581. .product-grid2:hover .product-new-label {
  6582.   opacity: 0;
  6583. }
  6584. .product-grid2 .product-content {
  6585.   padding: 20px 10px;
  6586.   text-align: center;
  6587. }
  6588. .product-grid2 .title {
  6589.   font-size: 17px;
  6590.   margin: 0 0 7px;
  6591. }
  6592. .product-grid2 .title a {
  6593.   color: #303030;
  6594. }
  6595. .product-grid2 .title a:hover {
  6596.   color: #3498db;
  6597. }
  6598. .product-grid2 .price {
  6599.   color: #303030;
  6600.   font-size: 15px;
  6601. }
  6603. @media screen and (max-width: 990px) {
  6604.   .product-grid2 {
  6605.     margin-bottom: 30px;
  6606.   }
  6607. }
  6608. /********************* Shopping Demo-3 **********************/
  6609. .product-grid3 {
  6610.   font-family: Roboto,sans-serif;
  6611.   text-align: center;
  6612.   position: relative;
  6613.   z-index: 1;
  6614. }
  6615. .product-grid3:before {
  6616.   content: \"\";
  6617.   height: 81%;
  6618.   width: 100%;
  6619.   background: #fff;
  6620.   border: 1px solid rgba(0, 0, 0, 0.1);
  6621.   opacity: 0;
  6622.   position: absolute;
  6623.   top: 0;
  6624.   left: 0;
  6625.   z-index: -1;
  6626.   -webkit-transition: all .5s ease 0s;
  6627.   transition: all .5s ease 0s;
  6628. }
  6629. .product-grid3:hover:before {
  6630.   opacity: 1;
  6631.   height: 100%;
  6632. }
  6633. .product-grid3 .product-image3 {
  6634.   position: relative;
  6635. }
  6636. .product-grid3 .product-image3 a {
  6637.   display: block;
  6638. }
  6639. .product-grid3 .product-image3 img {
  6640.   width: 100%;
  6641.   height: auto;
  6642. }
  6643. .product-grid3 .pic-1 {
  6644.   opacity: 1;
  6645.   -webkit-transition: all .5s ease-out 0s;
  6646.   transition: all .5s ease-out 0s;
  6647. }
  6648. .product-grid3:hover .pic-1 {
  6649.   opacity: 0;
  6650. }
  6651. .product-grid3 .pic-2 {
  6652.   position: absolute;
  6653.   top: 0;
  6654.   left: 0;
  6655.   opacity: 0;
  6656.   -webkit-transition: all .5s ease-out 0s;
  6657.   transition: all .5s ease-out 0s;
  6658. }
  6659. .product-grid3:hover .pic-2 {
  6660.   opacity: 1;
  6661. }
  6662. .product-grid3 .social {
  6663.   width: 120px;
  6664.   padding: 0;
  6665.   margin: 0 auto;
  6666.   list-style: none;
  6667.   opacity: 0;
  6668.   position: absolute;
  6669.   right: 0;
  6670.   left: 0;
  6671.   bottom: -23px;
  6672.   -webkit-transform: scale(0);
  6673.           transform: scale(0);
  6674.   -webkit-transition: all .3s ease 0s;
  6675.   transition: all .3s ease 0s;
  6676. }
  6677. .product-grid3:hover .social {
  6678.   opacity: 1;
  6679.   -webkit-transform: scale(1);
  6680.           transform: scale(1);
  6681. }
  6682. .product-grid3:hover .product-discount-label, .product-grid3:hover .product-new-label, .product-grid3:hover .title {
  6683.   opacity: 0;
  6684. }
  6685. .product-grid3 .social li {
  6686.   display: inline-block;
  6687. }
  6688. .product-grid3 .social li a {
  6689.   color: #e67e22;
  6690.   background: #fff;
  6691.   font-size: 18px;
  6692.   line-height: 50px;
  6693.   width: 50px;
  6694.   height: 50px;
  6695.   border: 1px solid rgba(0, 0, 0, 0.1);
  6696.   border-radius: 50%;
  6697.   margin: 0 2px;
  6698.   display: block;
  6699.   -webkit-transition: all .3s ease 0s;
  6700.   transition: all .3s ease 0s;
  6701. }
  6702. .product-grid3 .social li a:hover {
  6703.   background: #e67e22;
  6704.   color: #fff;
  6705. }
  6706. .product-grid3 .product-discount-label, .product-grid3 .product-new-label {
  6707.   background-color: #e67e22;
  6708.   color: #fff;
  6709.   font-size: 17px;
  6710.   padding: 2px 10px;
  6711.   position: absolute;
  6712.   right: 10px;
  6713.   top: 10px;
  6714.   -webkit-transition: all .3s;
  6715.   transition: all .3s;
  6716. }
  6717. .product-grid3 .product-content {
  6718.   z-index: -1;
  6719.   padding: 15px;
  6720.   text-align: left;
  6721. }
  6722. .product-grid3 .title {
  6723.   font-size: 14px;
  6724.   text-transform: capitalize;
  6725.   margin: 0 0 7px;
  6726.   -webkit-transition: all .3s ease 0s;
  6727.   transition: all .3s ease 0s;
  6728. }
  6729. .product-grid3 .title a {
  6730.   color: #414141;
  6731. }
  6732. .product-grid3 .price {
  6733.   color: #000;
  6734.   font-size: 16px;
  6735.   letter-spacing: 1px;
  6736.   font-weight: 600;
  6737.   margin-right: 2px;
  6738.   display: inline-block;
  6739. }
  6740. .product-grid3 .price span {
  6741.   color: #909090;
  6742.   font-size: 14px;
  6743.   font-weight: 500;
  6744.   letter-spacing: 0;
  6745.   text-decoration: line-through;
  6746.   text-align: left;
  6747.   display: inline-block;
  6748.   margin-top: -2px;
  6749. }
  6750. .product-grid3 .rating {
  6751.   padding: 0;
  6752.   margin: -22px 0 0;
  6753.   list-style: none;
  6754.   text-align: right;
  6755.   display: block;
  6756. }
  6757. .product-grid3 .rating li {
  6758.   color: #ffd200;
  6759.   font-size: 13px;
  6760.   display: inline-block;
  6761. }
  6762. .product-grid3 .rating li.disable {
  6763.   color: #dcdcdc;
  6764. }
  6766. @media only screen and (max-width: 1200px) {
  6767.   .product-grid3 .rating {
  6768.     margin: 0;
  6769.   }
  6770. }
  6771. @media only screen and (max-width: 990px) {
  6772.   .product-grid3 {
  6773.     margin-bottom: 30px;
  6774.   }
  6775.   .product-grid3 .rating {
  6776.     margin: -22px 0 0;
  6777.   }
  6778. }
  6779. @media only screen and (max-width: 359px) {
  6780.   .product-grid3 .rating {
  6781.     margin: 0;
  6782.   }
  6783. }
  6786. /********************* Shopping Demo-4 **********************/
  6787. .product-grid4 {
  6788.   position: relative;
  6789.   font-family: Poppins,sans-serif;
  6790.   text-align: center;
  6791.   border-radius: 5px;
  6792.   overflow: hidden;
  6793.   z-index: 1;
  6794.   -webkit-transition: all .3s ease 0s;
  6795.   transition: all .3s ease 0s;
  6796.   box-shadow:0 4px 10px -6px #0005;
  6797. }
  6798. .product-grid4 .product-image4 {
  6799.   position: relative;
  6800. }
  6801. .product-grid4:hover {
  6802.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  6803. }
  6804. .product-grid4 .product-image4 a {
  6805.   display: block;
  6806. }
  6807. .product-grid4 .product-image4 img {
  6808.   width: 100%;
  6809.   height: auto;
  6810. }
  6811. .product-grid4 .pic-1 {
  6812.   opacity: 1;
  6813.   -webkit-transition: all .5s ease-out 0s;
  6814.   transition: all .5s ease-out 0s;
  6815. }
  6816. .product-grid4:hover .pic-1 {
  6817.   opacity: 0;
  6818. }
  6819. .product-grid4 .pic-2 {
  6820.   position: absolute;
  6821.   top: 0;
  6822.   left: 0;
  6823.   opacity: 0;
  6824.   -webkit-transition: all .5s ease-out 0s;
  6825.   transition: all .5s ease-out 0s;
  6826. }
  6827. .product-grid4:hover .pic-2 {
  6828.   opacity: 1;
  6829. }
  6830. .product-grid4 .social {
  6831.   width: 180px;
  6832.   padding: 0;
  6833.   margin: 0 auto;
  6834.   list-style: none;
  6835.   position: absolute;
  6836.   right: 0;
  6837.   left: 0;
  6838.   top: 50%;
  6839.   -webkit-transform: translateY(-50%);
  6840.           transform: translateY(-50%);
  6841.   -webkit-transition: all .3s ease 0s;
  6842.   transition: all .3s ease 0s;
  6843. }
  6844. .product-grid4 .social li {
  6845.   display: inline-block;
  6846.   opacity: 0;
  6847.   -webkit-transition: all .7s;
  6848.   transition: all .7s;
  6849. }
  6850. .product-grid4 .social li:nth-child(1) {
  6851.   -webkit-transition-delay: .15s;
  6852.           transition-delay: .15s;
  6853. }
  6854. .product-grid4 .social li:nth-child(2) {
  6855.   -webkit-transition-delay: .3s;
  6856.           transition-delay: .3s;
  6857. }
  6858. .product-grid4 .social li:nth-child(3) {
  6859.   -webkit-transition-delay: .45s;
  6860.           transition-delay: .45s;
  6861. }
  6862. .product-grid4:hover .social li {
  6863.   opacity: 1;
  6864. }
  6865. .product-grid4 .social li a {
  6866.   color: #222;
  6867.   background: #fff;
  6868.   font-size: 17px;
  6869.   line-height: 36px;
  6870.   width: 40px;
  6871.   height: 36px;
  6872.   border-radius: 2px;
  6873.   margin: 0 5px;
  6874.   display: block;
  6875.   -webkit-transition: all .3s ease 0s;
  6876.   transition: all .3s ease 0s;
  6877. }
  6878. .product-grid4 .social li a:hover {
  6879.   color: #fff;
  6880.   background: #16a085;
  6881. }
  6882. .product-grid4 .social li a:after, .product-grid4 .social li a:before {
  6883.   content: attr(data-tip);
  6884.   color: #fff;
  6885.   background-color: #000;
  6886.   font-size: 12px;
  6887.   line-height: 20px;
  6888.   border-radius: 3px;
  6889.   padding: 0 5px;
  6890.   white-space: nowrap;
  6891.   opacity: 0;
  6892.   -webkit-transform: translateX(-50%);
  6893.           transform: translateX(-50%);
  6894.   position: absolute;
  6895.   left: 50%;
  6896.   top: -30px;
  6897. }
  6898. .product-grid4 .social li a:after {
  6899.   content: '';
  6900.   height: 15px;
  6901.   width: 15px;
  6902.   border-radius: 0;
  6903.   -webkit-transform: translateX(-50%) rotate(45deg);
  6904.           transform: translateX(-50%) rotate(45deg);
  6905.   top: -22px;
  6906.   z-index: -1;
  6907. }
  6908. .product-grid4 .social li a:hover:after, .product-grid4 .social li a:hover:before {
  6909.   opacity: 1;
  6910. }
  6911. .product-grid4 .product-discount-label, .product-grid4 .product-new-label {
  6912.   color: #fff;
  6913.   background-color: #16a085;
  6914.   font-size: 13px;
  6915.   font-weight: 800;
  6916.   text-transform: uppercase;
  6917.   line-height: 45px;
  6918.   height: 45px;
  6919.   width: 45px;
  6920.   border-radius: 50%;
  6921.   position: absolute;
  6922.   left: 10px;
  6923.   top: 15px;
  6924.   -webkit-transition: all .3s;
  6925.   transition: all .3s;
  6926. }
  6927. .product-grid4 .product-discount-label {
  6928.   left: auto;
  6929.   right: 10px;
  6930.   background-color: #d7292a;
  6931. }
  6932. .product-grid4:hover .product-new-label {
  6933.   opacity: 0;
  6934. }
  6935. .product-grid4 .product-content {
  6936.   padding: 25px;
  6937. }
  6938. .product-grid4 .title {
  6939.   font-size: 15px;
  6940.   font-weight: 400;
  6941.   text-transform: capitalize;
  6942.   margin: 0 0 7px;
  6943.   -webkit-transition: all .3s ease 0s;
  6944.   transition: all .3s ease 0s;
  6945. }
  6946. .product-grid4 .title a {
  6947.   color: #222;
  6948. }
  6949. .product-grid4 .title a:hover {
  6950.   color: #16a085;
  6951. }
  6952. .product-grid4 .price {
  6953.   color: #16a085;
  6954.   font-size: 17px;
  6955.   font-weight: 700;
  6956.   margin: 0 2px 15px 0;
  6957.   display: block;
  6958. }
  6959. .product-grid4 .price span {
  6960.   color: #909090;
  6961.   font-size: 13px;
  6962.   font-weight: 400;
  6963.   letter-spacing: 0;
  6964.   text-decoration: line-through;
  6965.   text-align: left;
  6966.   vertical-align: middle;
  6967.   display: inline-block;
  6968. }
  6969. .product-grid4 .add-to-cart {
  6970.   border: 1px solid #e5e5e5;
  6971.   display: inline-block;
  6972.   padding: 10px 20px;
  6973.   color: #888;
  6974.   font-weight: 600;
  6975.   font-size: 14px;
  6976.   border-radius: 4px;
  6977.   -webkit-transition: all .3s;
  6978.   transition: all .3s;
  6979. }
  6980. .product-grid4:hover .add-to-cart {
  6981.   border: 1px solid transparent;
  6982.   background: #16a085;
  6983.   color: #fff;
  6984. }
  6985. .product-grid4 .add-to-cart:hover {
  6986.   background-color: #505050;
  6987.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  6988. }
  6990. @media only screen and (max-width: 990px) {
  6991.   .product-grid4 {
  6992.     margin-bottom: 30px;
  6993.   }
  6994. }
  6995. /********************* Shopping Demo-5 **********************/
  6996. .product-image5 .pic-1, .product-image5 .pic-2 {
  6997.   -webkit-backface-visibility: hidden;
  6998.           backface-visibility: hidden;
  6999.   -webkit-transition: all .5s ease 0s;
  7000.   transition: all .5s ease 0s;
  7001. }
  7003. .product-grid5 {
  7004.   font-family: Poppins,sans-serif;
  7005.   position: relative;
  7006. }
  7007. .product-grid5 .product-image5 {
  7008.   overflow: hidden;
  7009.   position: relative;
  7010. }
  7011. .product-grid5 .product-image5 a {
  7012.   display: block;
  7013. }
  7014. .product-grid5 .product-image5 img {
  7015.   width: 100%;
  7016.   height: auto;
  7017. }
  7019. .product-image5 .pic-1 {
  7020.   opacity: 1;
  7021. }
  7023. .product-grid5:hover .product-image5 .pic-1 {
  7024.   opacity: 0;
  7025. }
  7027. .product-image5 .pic-2 {
  7028.   width: 100%;
  7029.   height: 100%;
  7030.   opacity: 0;
  7031.   position: absolute;
  7032.   top: 0;
  7033.   left: 0;
  7034. }
  7036. .product-grid5:hover .product-image5 .pic-2 {
  7037.   opacity: 1;
  7038. }
  7039. .product-grid5 .social {
  7040.   padding: 0;
  7041.   margin: 0;
  7042.   position: absolute;
  7043.   top: 10px;
  7044.   right: 10px;
  7045. }
  7046. .product-grid5 .social li {
  7047.   display: block;
  7048.   margin: 0 0 10px;
  7049.   -webkit-transition: all .5s;
  7050.   transition: all .5s;
  7051. }
  7052. .product-grid5 .social li:nth-child(2) {
  7053.   opacity: 0;
  7054.   -webkit-transform: translateY(-50px);
  7055.           transform: translateY(-50px);
  7056. }
  7057. .product-grid5:hover .social li:nth-child(2) {
  7058.   opacity: 1;
  7059.   -webkit-transform: translateY(0);
  7060.           transform: translateY(0);
  7061. }
  7062. .product-grid5 .social li:nth-child(3) {
  7063.   opacity: 0;
  7064.   -webkit-transform: translateY(-50px);
  7065.           transform: translateY(-50px);
  7066. }
  7067. .product-grid5:hover .social li:nth-child(3) {
  7068.   opacity: 1;
  7069.   -webkit-transform: translateY(0);
  7070.           transform: translateY(0);
  7071.   -webkit-transition-delay: .2s;
  7072.           transition-delay: .2s;
  7073. }
  7074. .product-grid5 .social li a {
  7075.   color: #888;
  7076.   background: #fff;
  7077.   font-size: 14px;
  7078.   text-align: center;
  7079.   line-height: 40px;
  7080.   height: 40px;
  7081.   width: 40px;
  7082.   border-radius: 50%;
  7083.   display: block;
  7084.   -webkit-transition: .5s ease 0s;
  7085.   transition: .5s ease 0s;
  7086. }
  7087. .product-grid5 .social li a:hover {
  7088.   color: #fff;
  7089.   background: #1e3799;
  7090. }
  7091. .product-grid5 .select-options {
  7092.   color: #777;
  7093.   background-color: #fff;
  7094.   font-size: 13px;
  7095.   font-weight: 400;
  7096.   text-align: center;
  7097.   text-transform: uppercase;
  7098.   padding: 15px 5px;
  7099.   margin: 0 auto;
  7100.   opacity: 0;
  7101.   display: block;
  7102.   position: absolute;
  7103.   width: 92%;
  7104.   left: 0;
  7105.   bottom: -100px;
  7106.   right: 0;
  7107.   -webkit-transition: .5s ease 0s;
  7108.   transition: .5s ease 0s;
  7109. }
  7110. .product-grid5 .select-options:hover {
  7111.   color: #fff;
  7112.   background-color: #1e3799;
  7113.   text-decoration: none;
  7114. }
  7115. .product-grid5:hover .select-options {
  7116.   opacity: 1;
  7117.   bottom: 10px;
  7118. }
  7119. .product-grid5 .product-content {
  7120.   padding: 20px 10px;
  7121. }
  7122. .product-grid5 .title {
  7123.   font-size: 15px;
  7124.   font-weight: 600;
  7125.   text-transform: capitalize;
  7126.   margin: 0 0 10px;
  7127.   -webkit-transition: all .3s ease 0s;
  7128.   transition: all .3s ease 0s;
  7129. }
  7130. .product-grid5 .title a {
  7131.   color: #222;
  7132. }
  7133. .product-grid5 .title a:hover {
  7134.   color: #1e3799;
  7135. }
  7136. .product-grid5 .price {
  7137.   color: #222;
  7138.   font-size: 13px;
  7139.   font-weight: 500;
  7140.   letter-spacing: 1px;
  7141. }
  7143. @media only screen and (max-width: 990px) {
  7144.   .product-grid5 {
  7145.     margin-bottom: 30px;
  7146.   }
  7147. }
  7148. /********************* Shopping Demo-6 **********************/
  7149. .product-grid6 {
  7150.   overflow: hidden;
  7151.   font-family: 'Open Sans',sans-serif;
  7152.   text-align: center;
  7153.   position: relative;
  7154.   -webkit-transition: all .5s ease 0s;
  7155.   transition: all .5s ease 0s;
  7156. }
  7157. .product-grid6 .product-image6 {
  7158.   overflow: hidden;
  7159. }
  7160. .product-grid6:hover {
  7161.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  7162. }
  7163. .product-grid6 .product-image6 a {
  7164.   display: block;
  7165. }
  7166. .product-grid6 .product-image6 img {
  7167.   width: 100%;
  7168.   height: auto;
  7169.   -webkit-transition: all .5s ease 0s;
  7170.   transition: all .5s ease 0s;
  7171. }
  7172. .product-grid6:hover .product-image6 img {
  7173.   -webkit-transform: scale(1.1);
  7174.           transform: scale(1.1);
  7175. }
  7176. .product-grid6 .product-content {
  7177.   padding: 12px 12px 15px;
  7178.   -webkit-transition: all .5s ease 0s;
  7179.   transition: all .5s ease 0s;
  7180. }
  7181. .product-grid6:hover .product-content {
  7182.   opacity: 0;
  7183. }
  7184. .product-grid6 .title {
  7185.   font-size: 20px;
  7186.   font-weight: 600;
  7187.   text-transform: capitalize;
  7188.   margin: 0 0 10px;
  7189.   -webkit-transition: all .3s ease 0s;
  7190.   transition: all .3s ease 0s;
  7191. }
  7192. .product-grid6 .title a {
  7193.   color: #000;
  7194. }
  7195. .product-grid6 .title a:hover {
  7196.   color: #2e86de;
  7197. }
  7198. .product-grid6 .price {
  7199.   font-size: 18px;
  7200.   font-weight: 600;
  7201.   color: #2e86de;
  7202. }
  7203. .product-grid6 .price span {
  7204.   color: #999;
  7205.   font-size: 15px;
  7206.   font-weight: 400;
  7207.   text-decoration: line-through;
  7208.   margin-left: 7px;
  7209.   display: inline-block;
  7210. }
  7211. .product-grid6 .social {
  7212.   background-color: #fff;
  7213.   width: 100%;
  7214.   padding: 0;
  7215.   margin: 0;
  7216.   list-style: none;
  7217.   opacity: 0;
  7218.   -webkit-transform: translateX(-50%);
  7219.           transform: translateX(-50%);
  7220.   position: absolute;
  7221.   bottom: -50%;
  7222.   left: 50%;
  7223.   z-index: 1;
  7224.   -webkit-transition: all .5s ease 0s;
  7225.   transition: all .5s ease 0s;
  7226. }
  7227. .product-grid6:hover .social {
  7228.   opacity: 1;
  7229.   bottom: 20px;
  7230. }
  7231. .product-grid6 .social li {
  7232.   display: inline-block;
  7233. }
  7234. .product-grid6 .social li a {
  7235.   color: #909090;
  7236.   font-size: 16px;
  7237.   line-height: 45px;
  7238.   text-align: center;
  7239.   height: 45px;
  7240.   width: 45px;
  7241.   margin: 0 7px;
  7242.   border: 1px solid #909090;
  7243.   border-radius: 50px;
  7244.   display: block;
  7245.   position: relative;
  7246.   -webkit-transition: all .3s ease-in-out;
  7247.   transition: all .3s ease-in-out;
  7248. }
  7249. .product-grid6 .social li a:hover {
  7250.   color: #fff;
  7251.   background-color: #2e86de;
  7252.   width: 80px;
  7253. }
  7254. .product-grid6 .social li a:after, .product-grid6 .social li a:before {
  7255.   content: attr(data-tip);
  7256.   color: #fff;
  7257.   background-color: #2e86de;
  7258.   font-size: 12px;
  7259.   letter-spacing: 1px;
  7260.   line-height: 20px;
  7261.   padding: 1px 5px;
  7262.   border-radius: 5px;
  7263.   white-space: nowrap;
  7264.   opacity: 0;
  7265.   -webkit-transform: translateX(-50%);
  7266.           transform: translateX(-50%);
  7267.   position: absolute;
  7268.   left: 50%;
  7269.   top: -30px;
  7270. }
  7271. .product-grid6 .social li a:after {
  7272.   content: '';
  7273.   height: 15px;
  7274.   width: 15px;
  7275.   border-radius: 0;
  7276.   -webkit-transform: translateX(-50%) rotate(45deg);
  7277.           transform: translateX(-50%) rotate(45deg);
  7278.   top: -20px;
  7279.   z-index: -1;
  7280. }
  7281. .product-grid6 .social li a:hover:after, .product-grid6 .social li a:hover:before {
  7282.   opacity: 1;
  7283. }
  7285. @media only screen and (max-width: 990px) {
  7286.   .product-grid6 {
  7287.     margin-bottom: 30px;
  7288.   }
  7289. }
  7290. /********************* Shopping Demo-7 **********************/
  7291. .product-grid7 {
  7292.   font-family: 'Roboto Slab',serif;
  7293.   position: relative;
  7294.   z-index: 1;
  7295. }
  7296. .product-grid7 .product-image7 {
  7297.   border: 1px solid rgba(0, 0, 0, 0.1);
  7298.   overflow: hidden;
  7299.   -webkit-perspective: 1500px;
  7300.           perspective: 1500px;
  7301.   position: relative;
  7302.   -webkit-transition: all .3s ease 0s;
  7303.   transition: all .3s ease 0s;
  7304. }
  7305. .product-grid7 .product-image7 a {
  7306.   display: block;
  7307. }
  7308. .product-grid7 .product-image7 img {
  7309.   width: 100%;
  7310.   height: auto;
  7311. }
  7312. .product-grid7 .pic-1 {
  7313.   opacity: 1;
  7314.   -webkit-transition: all .5s ease-out 0s;
  7315.   transition: all .5s ease-out 0s;
  7316. }
  7317. .product-grid7 .pic-2 {
  7318.   opacity: 0;
  7319.   -webkit-transform: rotateY(-90deg);
  7320.           transform: rotateY(-90deg);
  7321.   position: absolute;
  7322.   top: 0;
  7323.   left: 0;
  7324.   -webkit-transition: all .5s ease-out 0s;
  7325.   transition: all .5s ease-out 0s;
  7326. }
  7327. .product-grid7:hover .pic-2 {
  7328.   opacity: 1;
  7329.   -webkit-transform: rotateY(0);
  7330.           transform: rotateY(0);
  7331. }
  7332. .product-grid7 .social {
  7333.   padding: 0;
  7334.   margin: 0;
  7335.   list-style: none;
  7336.   position: absolute;
  7337.   bottom: 3px;
  7338.   left: -20%;
  7339.   z-index: 1;
  7340.   -webkit-transition: all .5s ease 0s;
  7341.   transition: all .5s ease 0s;
  7342. }
  7343. .product-grid7:hover .social {
  7344.   left: 17px;
  7345. }
  7346. .product-grid7 .social li a {
  7347.   color: #fff;
  7348.   background-color: #333;
  7349.   font-size: 16px;
  7350.   line-height: 40px;
  7351.   text-align: center;
  7352.   height: 40px;
  7353.   width: 40px;
  7354.   margin: 15px 0;
  7355.   border-radius: 50%;
  7356.   display: block;
  7357.   -webkit-transition: all .5s ease-in-out;
  7358.   transition: all .5s ease-in-out;
  7359. }
  7360. .product-grid7 .social li a:hover {
  7361.   color: #fff;
  7362.   background-color: #78e08f;
  7363. }
  7364. .product-grid7 .product-new-label {
  7365.   color: #fff;
  7366.   background-color: #333;
  7367.   padding: 5px 10px;
  7368.   border-radius: 5px;
  7369.   display: block;
  7370.   position: absolute;
  7371.   top: 10px;
  7372.   left: 10px;
  7373. }
  7374. .product-grid7 .product-content {
  7375.   text-align: center;
  7376.   padding: 20px 0 0;
  7377. }
  7378. .product-grid7 .title {
  7379.   font-size: 15px;
  7380.   font-weight: 600;
  7381.   text-transform: capitalize;
  7382.   margin: 0 0 10px;
  7383.   -webkit-transition: all .3s ease 0s;
  7384.   transition: all .3s ease 0s;
  7385. }
  7386. .product-grid7 .title a {
  7387.   color: #333;
  7388. }
  7389. .product-grid7 .title a:hover {
  7390.   color: #78e08f;
  7391. }
  7392. .product-grid7 .rating {
  7393.   color: #78e08f;
  7394.   font-size: 12px;
  7395.   padding: 0;
  7396.   margin: 0 0 10px;
  7397.   list-style: none;
  7398. }
  7399. .product-grid7 .price {
  7400.   color: #333;
  7401.   font-size: 20px;
  7402.   font-family: Lora,serif;
  7403.   font-weight: 700;
  7404.   margin-bottom: 8px;
  7405.   text-align: center;
  7406.   -webkit-transition: all .3s;
  7407.   transition: all .3s;
  7408. }
  7409. .product-grid7 .price span {
  7410.   color: #999;
  7411.   font-size: 14px;
  7412.   font-weight: 700;
  7413.   text-decoration: line-through;
  7414.   margin-left: 7px;
  7415.   display: inline-block;
  7416. }
  7418. @media only screen and (max-width: 990px) {
  7419.   .product-grid7 {
  7420.     margin-bottom: 30px;
  7421.   }
  7422. }
  7423. /********************* Shopping Demo-8 **********************/
  7424. .product-grid8 {
  7425.   font-family: Poppins,sans-serif;
  7426.   position: relative;
  7427.   z-index: 1;
  7428. }
  7429. .product-grid8 .product-image8 {
  7430.   border: 1px solid #e4e9ef;
  7431.   position: relative;
  7432.   -webkit-transition: all .3s ease 0s;
  7433.   transition: all .3s ease 0s;
  7434. }
  7435. .product-grid8:hover .product-image8 {
  7436.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  7437. }
  7438. .product-grid8 .product-image8 a {
  7439.   display: block;
  7440. }
  7441. .product-grid8 .product-image8 img {
  7442.   width: 100%;
  7443.   height: auto;
  7444. }
  7445. .product-grid8 .pic-1 {
  7446.   opacity: 1;
  7447.   -webkit-transition: all .5s ease-out 0s;
  7448.   transition: all .5s ease-out 0s;
  7449. }
  7450. .product-grid8:hover .pic-1 {
  7451.   opacity: 0;
  7452. }
  7453. .product-grid8 .pic-2 {
  7454.   opacity: 0;
  7455.   position: absolute;
  7456.   top: 0;
  7457.   left: 0;
  7458.   -webkit-transition: all .5s ease-out 0s;
  7459.   transition: all .5s ease-out 0s;
  7460. }
  7461. .product-grid8:hover .pic-2 {
  7462.   opacity: 1;
  7463. }
  7464. .product-grid8 .social {
  7465.   padding: 0;
  7466.   margin: 0;
  7467.   list-style: none;
  7468.   position: absolute;
  7469.   bottom: 13px;
  7470.   right: 13px;
  7471.   z-index: 1;
  7472. }
  7473. .product-grid8 .social li {
  7474.   opacity: 0;
  7475.   -webkit-transform: translateY(3px);
  7476.           transform: translateY(3px);
  7477.   -webkit-transition: all .5s ease 0s;
  7478.   transition: all .5s ease 0s;
  7479. }
  7480. .product-grid8:hover .social li {
  7481.   margin: 0 0 10px;
  7482.   opacity: 1;
  7483.   -webkit-transform: translateY(0);
  7484.           transform: translateY(0);
  7485. }
  7486. .product-grid8:hover .social li:nth-child(1) {
  7487.   -webkit-transition-delay: .1s;
  7488.           transition-delay: .1s;
  7489. }
  7490. .product-grid8:hover .social li:nth-child(2) {
  7491.   -webkit-transition-delay: .2s;
  7492.           transition-delay: .2s;
  7493. }
  7494. .product-grid8:hover .social li:nth-child(3) {
  7495.   -webkit-transition-delay: .4s;
  7496.           transition-delay: .4s;
  7497. }
  7498. .product-grid8 .social li a {
  7499.   color: grey;
  7500.   font-size: 17px;
  7501.   line-height: 40px;
  7502.   text-align: center;
  7503.   height: 40px;
  7504.   width: 40px;
  7505.   border: 1px solid grey;
  7506.   display: block;
  7507.   -webkit-transition: all .5s ease-in-out;
  7508.   transition: all .5s ease-in-out;
  7509. }
  7510. .product-grid8 .social li a:hover {
  7511.   color: #000;
  7512.   border-color: #000;
  7513. }
  7514. .product-grid8 .product-discount-label {
  7515.   display: block;
  7516.   padding: 4px 15px 4px 30px;
  7517.   color: #fff;
  7518.   background-color: #0081c2;
  7519.   position: absolute;
  7520.   top: 10px;
  7521.   right: 0;
  7522.   -webkit-clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
  7523.   clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
  7524. }
  7525. .product-grid8 .product-content {
  7526.   padding: 20px 0 0;
  7527. }
  7528. .product-grid8 .price {
  7529.   color: #000;
  7530.   font-size: 19px;
  7531.   font-weight: 400;
  7532.   margin-bottom: 8px;
  7533.   text-align: left;
  7534.   -webkit-transition: all .3s;
  7535.   transition: all .3s;
  7536. }
  7537. .product-grid8 .price span {
  7538.   color: #999;
  7539.   font-size: 14px;
  7540.   font-weight: 500;
  7541.   text-decoration: line-through;
  7542.   margin-left: 7px;
  7543.   display: inline-block;
  7544. }
  7545. .product-grid8 .product-shipping {
  7546.   color: rgba(0, 0, 0, 0.5);
  7547.   font-size: 15px;
  7548.   padding-left: 35px;
  7549.   margin: 0 0 15px;
  7550.   display: block;
  7551.   position: relative;
  7552. }
  7553. .product-grid8 .product-shipping:before {
  7554.   content: '';
  7555.   height: 1px;
  7556.   width: 25px;
  7557.   background-color: rgba(0, 0, 0, 0.5);
  7558.   -webkit-transform: translateY(-50%);
  7559.           transform: translateY(-50%);
  7560.   position: absolute;
  7561.   top: 50%;
  7562.   left: 0;
  7563. }
  7564. .product-grid8 .title {
  7565.   font-size: 16px;
  7566.   font-weight: 400;
  7567.   text-transform: capitalize;
  7568.   margin: 0 0 30px;
  7569.   -webkit-transition: all .3s ease 0s;
  7570.   transition: all .3s ease 0s;
  7571. }
  7572. .product-grid8 .title a {
  7573.   color: #000;
  7574. }
  7575. .product-grid8 .title a:hover {
  7576.   color: #0081c2;
  7577. }
  7578. .product-grid8 .all-deals {
  7579.   display: block;
  7580.   color: #fff;
  7581.   background-color: #2e353b;
  7582.   font-size: 15px;
  7583.   letter-spacing: 1px;
  7584.   text-align: center;
  7585.   text-transform: uppercase;
  7586.   padding: 22px 5px;
  7587.   -webkit-transition: all .5s ease 0s;
  7588.   transition: all .5s ease 0s;
  7589. }
  7590. .product-grid8 .all-deals .icon {
  7591.   margin-left: 7px;
  7592. }
  7593. .product-grid8 .all-deals:hover {
  7594.   background-color: #0081c2;
  7595. }
  7597. @media only screen and (max-width: 990px) {
  7598.   .product-grid8 {
  7599.     margin-bottom: 30px;
  7600.   }
  7601. }
  7602. /********************* Shopping Demo-9 **********************/
  7603. .product-grid9 {
  7604.   position: relative;
  7605.   font-family: Poppins,sans-serif;
  7606.   z-index: 1;
  7607. }
  7608. .product-grid9 .product-image9 {
  7609.   position: relative;
  7610. }
  7611. .product-grid9 .product-image9 a {
  7612.   display: block;
  7613. }
  7614. .product-grid9 .product-image9 img {
  7615.   width: 100%;
  7616.   height: auto;
  7617. }
  7618. .product-grid9 .pic-1 {
  7619.   opacity: 1;
  7620.   -webkit-transition: all .5s ease-out 0s;
  7621.   transition: all .5s ease-out 0s;
  7622. }
  7623. .product-grid9:hover .pic-1 {
  7624.   opacity: 0;
  7625. }
  7626. .product-grid9 .pic-2 {
  7627.   position: absolute;
  7628.   top: 0;
  7629.   left: 0;
  7630.   opacity: 0;
  7631.   -webkit-transition: all .5s ease-out 0s;
  7632.   transition: all .5s ease-out 0s;
  7633. }
  7634. .product-grid9:hover .pic-2 {
  7635.   opacity: 1;
  7636. }
  7637. .product-grid9 .product-full-view {
  7638.   color: #505050;
  7639.   background-color: #fff;
  7640.   font-size: 16px;
  7641.   height: 45px;
  7642.   width: 45px;
  7643.   padding: 18px;
  7644.   border-radius: 100px 0 0;
  7645.   display: block;
  7646.   opacity: 0;
  7647.   position: absolute;
  7648.   right: 0;
  7649.   bottom: 0;
  7650.   -webkit-transition: all .3s ease 0s;
  7651.   transition: all .3s ease 0s;
  7652. }
  7653. .product-grid9 .product-full-view:hover {
  7654.   color: #c0392b;
  7655. }
  7656. .product-grid9:hover .product-full-view {
  7657.   opacity: 1;
  7658. }
  7659. .product-grid9 .product-content {
  7660.   padding: 12px 12px 0;
  7661.   overflow: hidden;
  7662.   position: relative;
  7663. }
  7665. .product-content .rating {
  7666.   padding: 0;
  7667.   margin: 0 0 7px;
  7668.   list-style: none;
  7669. }
  7671. .product-grid9 .rating li {
  7672.   font-size: 12px;
  7673.   color: #ffd200;
  7674.   -webkit-transition: all .3s ease 0s;
  7675.   transition: all .3s ease 0s;
  7676. }
  7677. .product-grid9 .rating li.disable {
  7678.   color: rgba(0, 0, 0, 0.2);
  7679. }
  7680. .product-grid9 .title {
  7681.   font-size: 16px;
  7682.   font-weight: 400;
  7683.   text-transform: capitalize;
  7684.   margin: 0 0 3px;
  7685.   -webkit-transition: all .3s ease 0s;
  7686.   transition: all .3s ease 0s;
  7687. }
  7688. .product-grid9 .title a {
  7689.   color: rgba(0, 0, 0, 0.5);
  7690. }
  7691. .product-grid9 .title a:hover {
  7692.   color: #c0392b;
  7693. }
  7694. .product-grid9 .price {
  7695.   color: #000;
  7696.   font-size: 17px;
  7697.   margin: 0;
  7698.   display: block;
  7699.   -webkit-transition: all .5s ease 0s;
  7700.   transition: all .5s ease 0s;
  7701. }
  7702. .product-grid9:hover .price {
  7703.   opacity: 0;
  7704. }
  7705. .product-grid9 .add-to-cart {
  7706.   display: block;
  7707.   color: #c0392b;
  7708.   font-weight: 600;
  7709.   font-size: 14px;
  7710.   opacity: 0;
  7711.   position: absolute;
  7712.   left: 10px;
  7713.   bottom: -20px;
  7714.   -webkit-transition: all .5s ease 0s;
  7715.   transition: all .5s ease 0s;
  7716. }
  7717. .product-grid9:hover .add-to-cart {
  7718.   opacity: 1;
  7719.   bottom: 0;
  7720. }
  7722. @media only screen and (max-width: 990px) {
  7723.   .product-grid9 {
  7724.     margin-bottom: 30px;
  7725.   }
  7726. }
  7729. .dropdown-btn {
  7730.   position: relative;
  7731.   display: inline-block;
  7732.   z-index: 10;
  7733.   width: 100%; height: 100%; cursor: pointer;
  7734.   color: #333;
  7735.   padding-top: 3px;
  7736. }
  7738. .dropdown__menu {
  7739.   display: none;
  7740.   position: absolute;
  7741.   top: 100%;
  7742.   right: 0;
  7743.   min-width: 200px;
  7744.   background: #fff;
  7745.   margin-top: 10px;
  7746.   border: 1px solid #F4F5F7;
  7747.   border-radius: 4px;
  7748.   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  7749.   text-align: left!important;
  7750. }
  7751. .dropdown__menu--active {
  7752.   display: block;
  7753. }
  7754. .dropdown__option {
  7755.   display: block;
  7756.   padding: 10px 15px;
  7757.   text-decoration: none;
  7758.   color: #000;
  7759.   transition: all .2s ease-in-out;
  7760.   line-height: 13px;
  7761.   text-transform: capitalize;
  7762. }
  7763. .dropdown__option:hover {
  7764.   background: #F4F5F7;
  7765.   padding-left: 20px !important;
  7766. }
  7767. .dropdown__option:not(:last-child) {
  7768.   border-bottom: 1px solid #F4F5F7;
  7769. }
  7770. .product-discount-label{
  7771.   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);
  7772.   transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  7773. }
  7776. .flex-container {
  7777.   display: flex;
  7778.   justify-content: center;
  7779.   flex-direction: column;
  7780.   align-items: center;
  7781. }
  7783. .flex-container > div {
  7784. padding-top:10px;
  7785. }
  7786. .paginate-ctn{
  7787.     display: flex;
  7788. }
  7789. .round-effect{
  7790.   color:#DD4124;
  7791.   cursor:pointer;
  7792. \t/*   border:1px solid red; */
  7794.   font-size:16px;
  7795.   text-align:center;
  7796.   padding-left:10px;
  7797.   padding-right:10px;
  7798.   padding-top:9px;
  7799.   border-radius: 50%;
  7800.   height: 40px;
  7801.   width: 40px;
  7802.   margin:5px;
  7803.   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  7804.    text-decoration: none;
  7805. }
  7807. .round-effect:hover{
  7808.   text-decoration: none;
  7809.   background:#DD4124;
  7810.   color:#FFF;
  7811. }
  7812. .round-effect:hover a {
  7813.   text-decoration: none;
  7814.   color:#FFF;
  7815. }
  7817. .activepage{
  7818.   background:#DD4124;
  7819.   color:#FFF!important;
  7820. }
  7822. .header-wave {
  7823.   position: relative;
  7824.   min-height: 200px;
  7825.   background: transparent;
  7826.   background-image: linear-gradient(155deg, #f4f4f4 0%, #f4f4f4 50%, #f4f4f4 100%);
  7827. }
  7829. .header-wave h1 {
  7830.   color: white;
  7831. }
  7833. .svg-wave {
  7834.   position: absolute;
  7835.   bottom: 0;
  7836.   width: 100%;
  7837.   height: auto;
  7838. }
  7840. .section-wave{
  7841. \tposition: relative;
  7842. \tmargin: 0;
  7843. \tpadding: 0;
  7844. \tbackground: white;
  7845. \twidth: 100%;
  7846. \theight: 200px;
  7847. }
  7849. #worf{
  7850. \tposition: absolute;
  7851. \tbottom: 0;
  7852. \twidth: 100%;
  7853. \tz-index: 1;
  7854. }
  7856. #worf path{
  7857.   fill: url(#grad1)
  7858. }
  7860. section.section-2{
  7861. \twidth: 100%;
  7862. \theight: 200px;
  7863. \tbackground: linear-gradient(to right, #dffdgg 0%,#f2f2f2 100%);
  7864. }
  7868. #client-logos .item {
  7869. \tmargin: 1px;
  7870. }
  7871. .cover-wrapper {
  7872. \tpadding: 5px 0px;
  7873. }
  7874. .client-inners img {
  7875. \theight: 100%;
  7876. \tobject-fit: contain;
  7877. }
  7878. .client-inners{
  7879. \tborder: 1px solid #ccc;
  7880. \theight: 90px;
  7881. \ttext-align: center;
  7882. \tpadding: 0px;
  7883. }
  7884. .owl-nav img {
  7885. \twidth: 34px;
  7886. }
  7887. .owl-prev img {
  7888. \tposition: absolute;
  7889. \tleft: -38px;
  7890. \ttop: 40px;
  7891. }
  7892. .owl-next img {
  7893. \tposition: absolute;
  7894. \tright: -38px;
  7895. \ttop: 40px;
  7896. }
  7897. .item-inner:hover{
  7898. \tbackground: #f8f8f8;
  7899. \tbox-shadow: 0px 0px 3px 1px #333;
  7900. }
  7901. .theme-bg-light{
  7902. border: 1px  #CCC solid;
  7904. box-shadow:
  7905. inset 0px 11px 8px -10px #CCC,
  7906. inset 0px -11px 8px -10px #CCC;
  7907. }
  7909. .logo-partner .owl-stage-outer{
  7910. \tmax-height: 150px!important;
  7911. }
  7912. .item{
  7913. \tborder: none;
  7914. \tmin-height: 100px;
  7915. }
  7916. #client-logos .item{
  7917. \t/*box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)!important;*/
  7918. }
  7919. .item:hover{
  7920. \tbackground: #f7f7f7;
  7921. }
  7922. .owl-dots{
  7923. \tdisplay: none;
  7924. }
  7926. .info-popop-home{
  7927. \tbackground: #d7d7d7; width: 25px; padding-top: 6px; color: #fff; height: 25px; border-radius: 50%;display: inline-block;
  7928. }
  7930. .go-corner {
  7931.   display: -webkit-box;
  7932.   display: flex;
  7933.   -webkit-box-align: center;
  7934. \t\t  align-items: center;
  7935.   -webkit-box-pack: center;
  7936. \t\t  justify-content: center;
  7937.   position: absolute;
  7938.   width: 32px;
  7939.   height: 32px;
  7940.   overflow: hidden;
  7941.   top: 0;
  7942.   right: 0;
  7943.   background-color: #00838d;
  7944.   border-radius: 0 4px 0 32px;
  7945. }
  7947. .go-arrow {
  7948.   margin-top: -4px;
  7949.   margin-right: -4px;
  7950.   color: white;
  7951.   font-family: courier, sans;
  7952. }
  7953. .card4 {
  7954.   display: block;
  7955.   top: 0px;
  7956.   position: relative;
  7957.   width: 100%!important;
  7958.   min-height: 200px;PPM
  7959.   background-color: #ffffff;
  7960.   border-radius: 4px;
  7961.   padding: 32px 24px;
  7962.   margin: 15px 0px 0px 0px;
  7963.   text-decoration: none;
  7964.   overflow: hidden;
  7965.   border: 1px solid #cccccc;
  7966.   box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075) !important;
  7967. }
  7968. .card4 .go-corner {
  7969.   background-color: #00838d;
  7970.   height: 100%;
  7971.   width: 16px;
  7972.   padding-right: 9px;
  7973.   border-radius: 0;
  7974.   -webkit-transform: skew(6deg);
  7975. \t\t  transform: skew(6deg);
  7976.   margin-right: -36px;
  7977.   -webkit-box-align: start;
  7978. \t\t  align-items: start;
  7979.   background-image: linear-gradient(-45deg, #8F479A 1%, #DC2A74 100%);
  7980. }
  7981. .card4 .go-arrow {
  7982.   -webkit-transform: skew(-6deg);
  7983. \t\t  transform: skew(-6deg);
  7984.   margin-left: -2px;
  7985.   margin-top: 9px;
  7986.   opacity: 0;
  7987. }
  7988. .card4:hover {
  7989.   border: 1px solid #CD3D73;
  7990. }
  7991. .card4 h3 {
  7992.   margin-top: 8px;
  7993. }
  7995. .card4:hover .go-corner {
  7996.   margin-right: -12px;
  7997. }
  7998. .card4:hover .go-arrow {
  7999.   opacity: 1;
  8000. }
  8001. .divider{
  8002. \tborder-top: 2px dashed #999;
  8003. }
  8005. .basis-member.staff {
  8007. }
  8009. .basis-member.staff .member-box {
  8010.     position: relative;
  8011.     border-radius: 5px;
  8012.     overflow: hidden;
  8013.     margin-bottom: 30px;
  8014. }
  8016. .basis-member.staff .member-box .card-body {
  8017.     position: relative;
  8018.     height: 150px
  8019. }
  8021. .shadow-lg:hover{
  8022. \tbox-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  8023.   transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  8024. }
  8026. .basis-member.staff .member-box .shape {
  8027.     width: 200px;
  8028.     height: 200px;
  8029.     background: var(--primary);
  8030.     opacity: 0.2;
  8031.     position: absolute;
  8032.     top: 0;
  8033.     right: -100px;
  8034.     transform: rotate(45deg);
  8035. }
  8037. .basis-member.staff .member-box .card-img-top {
  8038.     position: relative;
  8039.     width: 150px;
  8040.     height: 150px;
  8041.     border-radius: 50%;
  8042.     border-top-left-radius: 0;
  8043.     border-bottom: 5px solid var(--primary);
  8044. }
  8046. .basis-member.staff .member-box .member-title {
  8047.     font-size: 20px;
  8048.     font-weight: 600;
  8049.     letter-spacing: -0.025em;
  8050. }
  8052. .header.shop .list-main span {
  8053. \tdisplay: inline-block;
  8054. \tcolor: #333;
  8055. \tfont-size: 13px;
  8056. \tfont-weight: 500;
  8057. \tborder-right: 1px solid #f0f0f0;
  8058. \tpadding: 0px 13px;
  8059. }
  8060. .header.shop .list-main span i {
  8061. \tdisplay: inline-block;
  8062. \tmargin-right: 4px;
  8063. \tfont-size: 15px;
  8064. \tcolor: #F7941D;
  8065. \tposition: relative;
  8066. \ttop: 1px;
  8067. }
  8068. .header.shop .list-main span:last-child{
  8069. \tpadding-right:0;
  8070. \tborder:none;
  8071. }
  8072. .header.shop .list-main span a{
  8073. \tcolor:#333;
  8074. }
  8075. .header.shop .list-main span a:hover{
  8076. \tcolor:#F7941D;
  8077. }
  8079. .feature_box_col_one{
  8080. \tdisplay: inline-block;
  8081. \ttext-decoration: none;
  8082. \tcolor: inherit;
  8083. }
  8085. .cardop-item {
  8086. \tbackground: #fff;
  8087. \ttext-align: center;
  8088. \tpadding: 30px 25px;
  8089. \t-webkit-box-shadow:0 0px 25px rgba(0, 0, 0, 0.07);
  8090. \tbox-shadow:0 0px 25px rgba(0, 0, 0, 0.07);
  8091. \tborder-radius: 0px;
  8092. \tmargin-bottom: 30px;
  8093. \t-webkit-transition: all .5s ease 0;
  8094. \ttransition: all .5s ease 0;
  8095. \ttransition: all 0.5s ease 0s;
  8096. \tdisplay: block;
  8097. }
  8098. .cardop-item:hover{
  8099. \tbackground:#fff;
  8100. \tbox-shadow:0 8px 20px 0px rgba(0, 0, 0, 0.2);
  8101. \t-webkit-transition: all .5s ease 0;
  8102. \ttransition: all .5s ease 0;
  8103. \ttransition: all 0.5s ease 0s;
  8104. \tcursor: pointer;
  8105. \tdisplay: block;
  8106. }
  8107. .cardop-item:hover .cardop-item, .cardop-item:hover span.icon{
  8108. \tbackground: #f4f4f4;
  8109. \tborder-radius:10px;
  8110. \t-webkit-transition: all .5s ease 0;
  8111. \ttransition: all .5s ease 0;
  8112. \ttransition: all 0.5s ease 0s;
  8113. }
  8114. .cardop-item:hover h6, .cardop-item:hover p{
  8115. \tcolor:#333;
  8116. \t-webkit-transition: all .5s ease 0;
  8117. \ttransition: all .5s ease 0;
  8118. \ttransition: all 0.5s ease 0s;
  8119. }
  8120. .logo:hover span.icon{
  8121. \tbackground: green;
  8122. \tborder-radius:10px;
  8123. \t-webkit-transition: all .5s ease 0;
  8124. \ttransition: all .5s ease 0;
  8125. \ttransition: all 0.5s ease 0s;
  8126. \tcolor: #fff;
  8127. }
  8128. .logo .icon{
  8129. \tfont-size: 40px;
  8130. \tcolor: #f91942;
  8131. \twidth: 70px;
  8132. \theight: 70px;
  8133. \tpadding-top: 15px;
  8134. \tborder-radius: 50%;
  8135. \tbackground: #f4f4f4;
  8136. }
  8138. .cardop-item .icon{
  8139. \tfont-size: 40px;
  8140. \tmargin-bottom:25px;
  8141. \tcolor: #f91942;
  8142. \twidth: 90px;
  8143. \theight: 90px;
  8144. \tline-height: 96px;
  8145. \tborder-radius: 50px;
  8146. }
  8148. .cardop-item .feature_box_col_one{
  8149. \tbackground:rgba(247, 198, 5, 0.20);
  8150. \tcolor: #3565ae;
  8151. }
  8152. .cardop-item h6{
  8153. \tfont-weight: bold;
  8154. \tmargin-bottom: 7px;
  8155. }
  8157. .menucell {
  8158.     width: 100%;
  8159. }
  8160. .menu-container {
  8161.   margin: 0 auto;
  8162.   background: #3565ae;
  8163. }
  8164. .menucell a.logo {
  8165.     display: inline-block;
  8166.     padding: 1.5em 3em;
  8167.     width: 19%;
  8168.     float: left;
  8169. }
  8170. .menucell img {
  8171.     max-width: 100%;
  8172. }
  8173. .menu-mobile {
  8174.   display: none;
  8175.   padding: 20px;
  8176. }
  8177. .menu-mobile:after {
  8178.   content: \"\\f394\";
  8179.   font-family: \"Ionicons\";
  8180.   font-size: 2.5rem;
  8181.   padding: 0;
  8182.   float: right;
  8183.   position: relative;
  8184.   top: 50%;
  8185.   -webkit-transform: translateY(-25%);
  8186.           transform: translateY(-25%);
  8187. }
  8188. .menu-dropdown-icon:before {
  8189.   content: \"\\f489\";
  8190.   font-family: \"Ionicons\";
  8191.   display: none;
  8192.   cursor: pointer;
  8193.   float: right;
  8194.   padding: 1.5em 2em;
  8195.   background: #fff;
  8196.   color: #333;
  8197. }
  8198. .menucell > ul {
  8199.   margin: 0 auto;
  8200.   width: 100%;
  8201.   list-style: none;
  8202.   padding: 0;
  8203.   position: relative;
  8204.   /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
  8206. }
  8207. .menucell > ul:before,
  8208. .menucell > ul:after {
  8209.   content: \"\";
  8210.   display: table;
  8211. }
  8212. .menucell > ul:after {
  8213.   clear: both;
  8214. }
  8215. .menucell > ul > li {
  8216.   border-right: 1px solid #fff;
  8217.   background: #fff;
  8218.   padding: 0;
  8219.   margin: 0;
  8220. }
  8221. .menucell > ul > li a {
  8222.   text-decoration: none;
  8223.   display: block;
  8224.   padding: 7px 2px;
  8225. }
  8226. .menucell > ul > li:hover {
  8227.   background: #fff;
  8228.   text-align: left;
  8229.   border-right: 1px solid #ddd;
  8230. }
  8231. .menucell > ul > li > ul {
  8232.   display: none;
  8233.   width: 100%;
  8234.   background: #fff;
  8235.   padding: 20px;
  8236.   position: absolute;
  8237.   z-index: 99;
  8238.   right: 0;
  8239.   margin: 0;
  8240.   list-style: none;
  8241.   box-sizing: border-box;
  8242.   box-shadow: 0 4px 4px rgba(0,0,0,0.4);
  8243. }
  8244. .menucell > ul > li > ul:before,
  8245. .menucell > ul > li > ul:after {
  8246.   content: \"\";
  8247.   display: table;
  8248. }
  8249. .menucell > ul > li > ul:after {
  8250.   clear: both;
  8251. }
  8252. .menucell > ul > li > ul > li {
  8253.   margin: 0;
  8254.   padding-bottom: 0;
  8255.   list-style: none;
  8256.   width: 25%;
  8257.   background: none;
  8258.   float: left;
  8259. }
  8260. .menucell > ul > li > ul > li a {
  8261.   color: #777;
  8262.   padding: .2em 0;
  8263.   width: 95%;
  8264.   display: block;
  8265.   border-bottom: 1px solid #ccc;
  8266. }
  8267. .menucell > ul > li > ul > li a:hover{
  8268. \tcolor:#03a9f4;
  8269. }
  8270. .menucell > ul > li > ul > li > ul {
  8271.   display: block;
  8272.   padding: 0;
  8273.   margin: 10px 0 0;
  8274.   list-style: none;
  8275.   box-sizing: border-box;
  8276. }
  8277. .menucell > ul > li > ul > li > ul:before,
  8278. .menucell > ul > li > ul > li > ul:after {
  8279.   content: \"\";
  8280.   display: table;
  8281. }
  8282. .menucell > ul > li > ul > li > ul:after {
  8283.   clear: both;
  8284. }
  8285. .menucell > ul > li > ul > li > ul > li {
  8286.   float: left;
  8287.   width: 100%;
  8288.   padding: 10px 0;
  8289.   margin: 0;
  8290.   font-size: .8em;
  8291. }
  8292. .menucell > ul > li > ul > li > ul > li a {
  8293.   border: 0;
  8294.   font-size: 14px;
  8295. }
  8296. .menucell > ul > li > ul.normal-sub {
  8297.   width: 300px;
  8298.   left: auto;
  8299.   padding: 10px 20px;
  8300. }
  8301. .menucell > ul > li > ul.normal-sub > li {
  8302.   width: 100%;
  8303. }
  8304. .menucell > ul > li > ul.normal-sub > li a {
  8305.   border: 0;
  8306.   padding: 1em 0;
  8307. }
  8309. .menucell > ul > li a{
  8310. \tcolor: #333;
  8311. }
  8312. .menucell > ul > li a:hover{
  8313. \tcolor: #777;
  8314. }
  8316. .menucell ul li{
  8317. margin-top: 0px!important;
  8318. }
  8321. #demo {
  8322.   margin: 20px auto;
  8323.   max-width: 960px;
  8324. }
  8325. #demo h1 {
  8326.   font-size: 2.4rem;
  8327.   line-height: 3.2rem;
  8328.   letter-spacing: 0;
  8329.   font-weight: 300;
  8330.   color: #212121;
  8331.   text-transform: inherit;
  8332.   margin-bottom: 1rem;
  8333.   text-align: center;
  8334. }
  8335. #demo h2 {
  8336.   font-size: 1.5rem;
  8337.   line-height: 2.8rem;
  8338.   letter-spacing: 0.01rem;
  8339.   font-weight: 400;
  8340.   color: #212121;
  8341.   text-align: center;
  8342. }
  8343. .shadow-z-1 {
  8344.   -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
  8345.   -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
  8346.   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  8347. }
  8348. /* -- Material Design Table style -------------- */
  8349. .table {
  8350.   width: 100%;
  8351.   max-width: 100%;
  8352.   margin-bottom: 2rem;
  8353.   background-color: #fff;
  8354. }
  8355. .table > thead > tr,
  8356. .table > tbody > tr,
  8357. .table > tfoot > tr {
  8358.   -webkit-transition: all 0.3s ease;
  8359.   -o-transition: all 0.3s ease;
  8360.   transition: all 0.3s ease;
  8361. }
  8362. .table > thead > tr > th,
  8363. .table > tbody > tr > th,
  8364. .table > tfoot > tr > th,
  8365. .table > thead > tr > td,
  8366. .table > tbody > tr > td,
  8367. .table > tfoot > tr > td {
  8368.   text-align: left;
  8369.   padding: 1.6rem;
  8370.   vertical-align: top;
  8371.   border-top: 0;
  8372.   -webkit-transition: all 0.3s ease;
  8373.   -o-transition: all 0.3s ease;
  8374.   transition: all 0.3s ease;
  8375. }
  8376. .table > thead > tr > th {
  8377.   font-weight: 400;
  8378.   color: #757575;
  8379.   vertical-align: bottom;
  8380.   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  8381. }
  8382. .table > caption + thead > tr:first-child > th,
  8383. .table > colgroup + thead > tr:first-child > th,
  8384. .table > thead:first-child > tr:first-child > th,
  8385. .table > caption + thead > tr:first-child > td,
  8386. .table > colgroup + thead > tr:first-child > td,
  8387. .table > thead:first-child > tr:first-child > td {
  8388.   border-top: 0;
  8389. }
  8390. .table > tbody + tbody {
  8391.   border-top: 1px solid rgba(0, 0, 0, 0.12);
  8392. }
  8393. .table .table {
  8394.   background-color: #fff;
  8395. }
  8396. .table .no-border {
  8397.   border: 0;
  8398. }
  8399. .table-condensed > thead > tr > th,
  8400. .table-condensed > tbody > tr > th,
  8401. .table-condensed > tfoot > tr > th,
  8402. .table-condensed > thead > tr > td,
  8403. .table-condensed > tbody > tr > td,
  8404. .table-condensed > tfoot > tr > td {
  8405.   padding: 0.8rem;
  8406. }
  8407. .table-bordered {
  8408.   border: 0;
  8409. }
  8410. .table-bordered > thead > tr > th,
  8411. .table-bordered > tbody > tr > th,
  8412. .table-bordered > tfoot > tr > th,
  8413. .table-bordered > thead > tr > td,
  8414. .table-bordered > tbody > tr > td,
  8415. .table-bordered > tfoot > tr > td {
  8416.   border: 0;
  8417.   border-bottom: 1px solid #e0e0e0;
  8418. }
  8419. .table-bordered > thead > tr > th,
  8420. .table-bordered > thead > tr > td {
  8421.   border-bottom-width: 2px;
  8422. }
  8423. .table-striped > tbody > tr:nth-child(odd) > td,
  8424. .table-striped > tbody > tr:nth-child(odd) > th {
  8425.   background-color: #f5f5f5;
  8426. }
  8427. .table-hover > tbody > tr:hover > td,
  8428. .table-hover > tbody > tr:hover > th {
  8429.   background-color: rgba(0, 0, 0, 0.12);
  8430. }
  8431. @media screen and (max-width: 768px) {
  8432.   .table-responsive-vertical > .table {
  8433. \tmargin-bottom: 0;
  8434. \tbackground-color: transparent;
  8435.   }
  8436.   .table-responsive-vertical > .table > thead,
  8437.   .table-responsive-vertical > .table > tfoot {
  8438. \tdisplay: none;
  8439.   }
  8440.   .table-responsive-vertical > .table > tbody {
  8441. \tdisplay: block;
  8442.   }
  8443.   .table-responsive-vertical > .table > tbody > tr {
  8444. \tdisplay: block;
  8445. \tborder: 1px solid #e0e0e0;
  8446. \tborder-radius: 2px;
  8447. \tmargin-bottom: 1.6rem;
  8448.   }
  8449.   .table-responsive-vertical > .table > tbody > tr > td {
  8450. \tbackground-color: #fff;
  8451. \tdisplay: block;
  8452. \tvertical-align: middle;
  8453. \ttext-align: right;
  8454.   }
  8455.   .table-responsive-vertical > .table > tbody > tr > td[data-title]:before {
  8456. \tcontent: attr(data-title);
  8457. \tfloat: left;
  8458. \tfont-size: inherit;
  8459. \tfont-weight: 400;
  8460. \tcolor: #757575;
  8461.   }
  8462.   .table-responsive-vertical.shadow-z-1 {
  8463. \t-webkit-box-shadow: none;
  8464. \t-moz-box-shadow: none;
  8465. \tbox-shadow: none;
  8466.   }
  8467.   .table-responsive-vertical.shadow-z-1 > .table > tbody > tr {
  8468. \tborder: none;
  8469. \t-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  8470. \t-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  8471. \tbox-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  8472.   }
  8473.   .table-responsive-vertical > .table-bordered {
  8474. \tborder: 0;
  8475.   }
  8476.   .table-responsive-vertical > .table-bordered > tbody > tr > td {
  8477. \tborder: 0;
  8478. \tborder-bottom: 1px solid #e0e0e0;
  8479.   }
  8480.   .table-responsive-vertical > .table-bordered > tbody > tr > td:last-child {
  8481. \tborder-bottom: 0;
  8482.   }
  8483.   .table-responsive-vertical > .table-striped > tbody > tr > td,
  8484.   .table-responsive-vertical > .table-striped > tbody > tr:nth-child(odd) {
  8485. \tbackground-color: #fff;
  8486.   }
  8487.   .table-responsive-vertical > .table-striped > tbody > tr > td:nth-child(odd) {
  8488. \tbackground-color: #f5f5f5;
  8489.   }
  8490.   .table-responsive-vertical > .table-hover > tbody > tr:hover > td,
  8491.   .table-responsive-vertical > .table-hover > tbody > tr:hover {
  8492. \tbackground-color: #fff;
  8493.   }
  8494.   .table-responsive-vertical > .table-hover > tbody > tr > td:hover {
  8495. \tbackground-color: rgba(0, 0, 0, 0.12);
  8496.   }
  8497. }
  8498. .table-striped.table-mc-red > tbody > tr:nth-child(odd) > td,
  8499. .table-striped.table-mc-red > tbody > tr:nth-child(odd) > th {
  8500.   background-color: #fde0dc;
  8501. }
  8502. .table-hover.table-mc-red > tbody > tr:hover > td,
  8503. .table-hover.table-mc-red > tbody > tr:hover > th {
  8504.   background-color: #f9bdbb;
  8505. }
  8506. @media screen and (max-width: 767px) {
  8507.   .table-responsive-vertical .table-striped.table-mc-red > tbody > tr > td,
  8508.   .table-responsive-vertical .table-striped.table-mc-red > tbody > tr:nth-child(odd) {
  8509. \tbackground-color: #fff;
  8510.   }
  8511.   .table-responsive-vertical .table-striped.table-mc-red > tbody > tr > td:nth-child(odd) {
  8512. \tbackground-color: #fde0dc;
  8513.   }
  8514.   .table-responsive-vertical .table-hover.table-mc-red > tbody > tr:hover > td,
  8515.   .table-responsive-vertical .table-hover.table-mc-red > tbody > tr:hover {
  8516. \tbackground-color: #fff;
  8517.   }
  8518.   .table-responsive-vertical .table-hover.table-mc-red > tbody > tr > td:hover {
  8519. \tbackground-color: #f9bdbb;
  8520.   }
  8521. }
  8522. .table-striped.table-mc-pink > tbody > tr:nth-child(odd) > td,
  8523. .table-striped.table-mc-pink > tbody > tr:nth-child(odd) > th {
  8524.   background-color: #fce4ec;
  8525. }
  8526. .table-hover.table-mc-pink > tbody > tr:hover > td,
  8527. .table-hover.table-mc-pink > tbody > tr:hover > th {
  8528.   background-color: #f8bbd0;
  8529. }
  8530. @media screen and (max-width: 767px) {
  8531.   .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr > td,
  8532.   .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr:nth-child(odd) {
  8533. \tbackground-color: #fff;
  8534.   }
  8535.   .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr > td:nth-child(odd) {
  8536. \tbackground-color: #fce4ec;
  8537.   }
  8538.   .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr:hover > td,
  8539.   .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr:hover {
  8540. \tbackground-color: #fff;
  8541.   }
  8542.   .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr > td:hover {
  8543. \tbackground-color: #f8bbd0;
  8544.   }
  8545. }
  8546. .table-striped.table-mc-purple > tbody > tr:nth-child(odd) > td,
  8547. .table-striped.table-mc-purple > tbody > tr:nth-child(odd) > th {
  8548.   background-color: #f3e5f5;
  8549. }
  8550. .table-hover.table-mc-purple > tbody > tr:hover > td,
  8551. .table-hover.table-mc-purple > tbody > tr:hover > th {
  8552.   background-color: #e1bee7;
  8553. }
  8554. @media screen and (max-width: 767px) {
  8555.   .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr > td,
  8556.   .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr:nth-child(odd) {
  8557. \tbackground-color: #fff;
  8558.   }
  8559.   .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr > td:nth-child(odd) {
  8560. \tbackground-color: #f3e5f5;
  8561.   }
  8562.   .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr:hover > td,
  8563.   .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr:hover {
  8564. \tbackground-color: #fff;
  8565.   }
  8566.   .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr > td:hover {
  8567. \tbackground-color: #e1bee7;
  8568.   }
  8569. }
  8570. .table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) > td,
  8571. .table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) > th {
  8572.   background-color: #ede7f6;
  8573. }
  8574. .table-hover.table-mc-deep-purple > tbody > tr:hover > td,
  8575. .table-hover.table-mc-deep-purple > tbody > tr:hover > th {
  8576.   background-color: #d1c4e9;
  8577. }
  8578. @media screen and (max-width: 767px) {
  8579.   .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr > td,
  8580.   .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) {
  8581. \tbackground-color: #fff;
  8582.   }
  8583.   .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr > td:nth-child(odd) {
  8584. \tbackground-color: #ede7f6;
  8585.   }
  8586.   .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr:hover > td,
  8587.   .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr:hover {
  8588. \tbackground-color: #fff;
  8589.   }
  8590.   .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr > td:hover {
  8591. \tbackground-color: #d1c4e9;
  8592.   }
  8593. }
  8594. .table-striped.table-mc-indigo > tbody > tr:nth-child(odd) > td,
  8595. .table-striped.table-mc-indigo > tbody > tr:nth-child(odd) > th {
  8596.   background-color: #e8eaf6;
  8597. }
  8598. .table-hover.table-mc-indigo > tbody > tr:hover > td,
  8599. .table-hover.table-mc-indigo > tbody > tr:hover > th {
  8600.   background-color: #c5cae9;
  8601. }
  8602. @media screen and (max-width: 767px) {
  8603.   .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr > td,
  8604.   .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr:nth-child(odd) {
  8605. \tbackground-color: #fff;
  8606.   }
  8607.   .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr > td:nth-child(odd) {
  8608. \tbackground-color: #e8eaf6;
  8609.   }
  8610.   .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr:hover > td,
  8611.   .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr:hover {
  8612. \tbackground-color: #fff;
  8613.   }
  8614.   .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr > td:hover {
  8615. \tbackground-color: #c5cae9;
  8616.   }
  8617. }
  8618. .table-striped.table-mc-blue > tbody > tr:nth-child(odd) > td,
  8619. .table-striped.table-mc-blue > tbody > tr:nth-child(odd) > th {
  8620.   background-color: #e7e9fd;
  8621. }
  8622. .table-hover.table-mc-blue > tbody > tr:hover > td,
  8623. .table-hover.table-mc-blue > tbody > tr:hover > th {
  8624.   background-color: #d0d9ff;
  8625. }
  8626. @media screen and (max-width: 767px) {
  8627.   .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr > td,
  8628.   .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr:nth-child(odd) {
  8629. \tbackground-color: #fff;
  8630.   }
  8631.   .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr > td:nth-child(odd) {
  8632. \tbackground-color: #e7e9fd;
  8633.   }
  8634.   .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr:hover > td,
  8635.   .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr:hover {
  8636. \tbackground-color: #fff;
  8637.   }
  8638.   .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr > td:hover {
  8639. \tbackground-color: #d0d9ff;
  8640.   }
  8641. }
  8642. .table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) > td,
  8643. .table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) > th {
  8644.   background-color: #e1f5fe;
  8645. }
  8646. .table-hover.table-mc-light-blue > tbody > tr:hover > td,
  8647. .table-hover.table-mc-light-blue > tbody > tr:hover > th {
  8648.   background-color: #b3e5fc;
  8649. }
  8650. @media screen and (max-width: 767px) {
  8651.   .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr > td,
  8652.   .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) {
  8653. \tbackground-color: #fff;
  8654.   }
  8655.   .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr > td:nth-child(odd) {
  8656. \tbackground-color: #e1f5fe;
  8657.   }
  8658.   .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr:hover > td,
  8659.   .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr:hover {
  8660. \tbackground-color: #fff;
  8661.   }
  8662.   .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr > td:hover {
  8663. \tbackground-color: #b3e5fc;
  8664.   }
  8665. }
  8666. .table-striped.table-mc-cyan > tbody > tr:nth-child(odd) > td,
  8667. .table-striped.table-mc-cyan > tbody > tr:nth-child(odd) > th {
  8668.   background-color: #e0f7fa;
  8669. }
  8670. .table-hover.table-mc-cyan > tbody > tr:hover > td,
  8671. .table-hover.table-mc-cyan > tbody > tr:hover > th {
  8672.   background-color: #b2ebf2;
  8673. }
  8674. @media screen and (max-width: 767px) {
  8675.   .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr > td,
  8676.   .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr:nth-child(odd) {
  8677. \tbackground-color: #fff;
  8678.   }
  8679.   .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr > td:nth-child(odd) {
  8680. \tbackground-color: #e0f7fa;
  8681.   }
  8682.   .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr:hover > td,
  8683.   .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr:hover {
  8684. \tbackground-color: #fff;
  8685.   }
  8686.   .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr > td:hover {
  8687. \tbackground-color: #b2ebf2;
  8688.   }
  8689. }
  8690. .table-striped.table-mc-teal > tbody > tr:nth-child(odd) > td,
  8691. .table-striped.table-mc-teal > tbody > tr:nth-child(odd) > th {
  8692.   background-color: #e0f2f1;
  8693. }
  8694. .table-hover.table-mc-teal > tbody > tr:hover > td,
  8695. .table-hover.table-mc-teal > tbody > tr:hover > th {
  8696.   background-color: #b2dfdb;
  8697. }
  8698. @media screen and (max-width: 767px) {
  8699.   .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr > td,
  8700.   .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr:nth-child(odd) {
  8701. \tbackground-color: #fff;
  8702.   }
  8703.   .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr > td:nth-child(odd) {
  8704. \tbackground-color: #e0f2f1;
  8705.   }
  8706.   .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr:hover > td,
  8707.   .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr:hover {
  8708. \tbackground-color: #fff;
  8709.   }
  8710.   .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr > td:hover {
  8711. \tbackground-color: #b2dfdb;
  8712.   }
  8713. }
  8714. .table-striped.table-mc-green > tbody > tr:nth-child(odd) > td,
  8715. .table-striped.table-mc-green > tbody > tr:nth-child(odd) > th {
  8716.   background-color: #d0f8ce;
  8717. }
  8718. .table-hover.table-mc-green > tbody > tr:hover > td,
  8719. .table-hover.table-mc-green > tbody > tr:hover > th {
  8720.   background-color: #a3e9a4;
  8721. }
  8722. @media screen and (max-width: 767px) {
  8723.   .table-responsive-vertical .table-striped.table-mc-green > tbody > tr > td,
  8724.   .table-responsive-vertical .table-striped.table-mc-green > tbody > tr:nth-child(odd) {
  8725. \tbackground-color: #fff;
  8726.   }
  8727.   .table-responsive-vertical .table-striped.table-mc-green > tbody > tr > td:nth-child(odd) {
  8728. \tbackground-color: #d0f8ce;
  8729.   }
  8730.   .table-responsive-vertical .table-hover.table-mc-green > tbody > tr:hover > td,
  8731.   .table-responsive-vertical .table-hover.table-mc-green > tbody > tr:hover {
  8732. \tbackground-color: #fff;
  8733.   }
  8734.   .table-responsive-vertical .table-hover.table-mc-green > tbody > tr > td:hover {
  8735. \tbackground-color: #a3e9a4;
  8736.   }
  8737. }
  8738. .table-striped.table-mc-light-green > tbody > tr:nth-child(odd) > td,
  8739. .table-striped.table-mc-light-green > tbody > tr:nth-child(odd) > th {
  8740.   background-color: #f1f8e9;
  8741. }
  8742. .table-hover.table-mc-light-green > tbody > tr:hover > td,
  8743. .table-hover.table-mc-light-green > tbody > tr:hover > th {
  8744.   background-color: #dcedc8;
  8745. }
  8746. @media screen and (max-width: 767px) {
  8747.   .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr > td,
  8748.   .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr:nth-child(odd) {
  8749. \tbackground-color: #fff;
  8750.   }
  8751.   .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr > td:nth-child(odd) {
  8752. \tbackground-color: #f1f8e9;
  8753.   }
  8754.   .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr:hover > td,
  8755.   .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr:hover {
  8756. \tbackground-color: #fff;
  8757.   }
  8758.   .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr > td:hover {
  8759. \tbackground-color: #dcedc8;
  8760.   }
  8761. }
  8762. .table-striped.table-mc-lime > tbody > tr:nth-child(odd) > td,
  8763. .table-striped.table-mc-lime > tbody > tr:nth-child(odd) > th {
  8764.   background-color: #f9fbe7;
  8765. }
  8766. .table-hover.table-mc-lime > tbody > tr:hover > td,
  8767. .table-hover.table-mc-lime > tbody > tr:hover > th {
  8768.   background-color: #f0f4c3;
  8769. }
  8770. @media screen and (max-width: 767px) {
  8771.   .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr > td,
  8772.   .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr:nth-child(odd) {
  8773. \tbackground-color: #fff;
  8774.   }
  8775.   .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr > td:nth-child(odd) {
  8776. \tbackground-color: #f9fbe7;
  8777.   }
  8778.   .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr:hover > td,
  8779.   .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr:hover {
  8780. \tbackground-color: #fff;
  8781.   }
  8782.   .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr > td:hover {
  8783. \tbackground-color: #f0f4c3;
  8784.   }
  8785. }
  8786. .table-striped.table-mc-yellow > tbody > tr:nth-child(odd) > td,
  8787. .table-striped.table-mc-yellow > tbody > tr:nth-child(odd) > th {
  8788.   background-color: #fffde7;
  8789. }
  8790. .table-hover.table-mc-yellow > tbody > tr:hover > td,
  8791. .table-hover.table-mc-yellow > tbody > tr:hover > th {
  8792.   background-color: #fff9c4;
  8793. }
  8794. @media screen and (max-width: 767px) {
  8795.   .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr > td,
  8796.   .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr:nth-child(odd) {
  8797. \tbackground-color: #fff;
  8798.   }
  8799.   .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr > td:nth-child(odd) {
  8800. \tbackground-color: #fffde7;
  8801.   }
  8802.   .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr:hover > td,
  8803.   .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr:hover {
  8804. \tbackground-color: #fff;
  8805.   }
  8806.   .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr > td:hover {
  8807. \tbackground-color: #fff9c4;
  8808.   }
  8809. }
  8810. .table-striped.table-mc-amber > tbody > tr:nth-child(odd) > td,
  8811. .table-striped.table-mc-amber > tbody > tr:nth-child(odd) > th {
  8812.   background-color: #fff8e1;
  8813. }
  8814. .table-hover.table-mc-amber > tbody > tr:hover > td,
  8815. .table-hover.table-mc-amber > tbody > tr:hover > th {
  8816.   background-color: #ffecb3;
  8817. }
  8818. @media screen and (max-width: 767px) {
  8819.   .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr > td,
  8820.   .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr:nth-child(odd) {
  8821. \tbackground-color: #fff;
  8822.   }
  8823.   .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr > td:nth-child(odd) {
  8824. \tbackground-color: #fff8e1;
  8825.   }
  8826.   .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr:hover > td,
  8827.   .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr:hover {
  8828. \tbackground-color: #fff;
  8829.   }
  8830.   .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr > td:hover {
  8831. \tbackground-color: #ffecb3;
  8832.   }
  8833. }
  8834. .table-striped.table-mc-orange > tbody > tr:nth-child(odd) > td,
  8835. .table-striped.table-mc-orange > tbody > tr:nth-child(odd) > th {
  8836.   background-color: #fff3e0;
  8837. }
  8838. .table-hover.table-mc-orange > tbody > tr:hover > td,
  8839. .table-hover.table-mc-orange > tbody > tr:hover > th {
  8840.   background-color: #ffe0b2;
  8841. }
  8842. @media screen and (max-width: 767px) {
  8843.   .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr > td,
  8844.   .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr:nth-child(odd) {
  8845. \tbackground-color: #fff;
  8846.   }
  8847.   .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr > td:nth-child(odd) {
  8848. \tbackground-color: #fff3e0;
  8849.   }
  8850.   .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr:hover > td,
  8851.   .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr:hover {
  8852. \tbackground-color: #fff;
  8853.   }
  8854.   .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr > td:hover {
  8855. \tbackground-color: #ffe0b2;
  8856.   }
  8857. }
  8858. .table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) > td,
  8859. .table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) > th {
  8860.   background-color: #fbe9e7;
  8861. }
  8862. .table-hover.table-mc-deep-orange > tbody > tr:hover > td,
  8863. .table-hover.table-mc-deep-orange > tbody > tr:hover > th {
  8864.   background-color: #ffccbc;
  8865. }
  8866. @media screen and (max-width: 767px) {
  8867.   .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr > td,
  8868.   .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) {
  8869. \tbackground-color: #fff;
  8870.   }
  8871.   .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr > td:nth-child(odd) {
  8872. \tbackground-color: #fbe9e7;
  8873.   }
  8874.   .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr:hover > td,
  8875.   .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr:hover {
  8876. \tbackground-color: #fff;
  8877.   }
  8878.   .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr > td:hover {
  8879. \tbackground-color: #ffccbc;
  8880.   }
  8881. }
  8883. .flat-busness, .button-flat {
  8884.     padding: 10px;
  8885.     outline: none;
  8886.     text-decoration: none;
  8887.     text-align: center;
  8888.     border-radius: 40px;
  8889.     background: #fff;
  8890.     border: 2px solid #1e499b;
  8891.     color: #1e499b;
  8892.     letter-spacing: 1px;
  8893.     text-shadow: 0;
  8894.     font-size: 12px;
  8895.     font-weight: bold;
  8896.     cursor: pointer;
  8897.     transition: all 0.25s ease;
  8898. \tmargin-top: 3px;
  8899. }
  8900. .flat-busness:hover, .button-flat:hover{
  8901. \tbackground: #f7941d;
  8902. \tcolor: #fff;
  8903. }
  8905. @media only screen and (min-width: 1100px){
  8906. \t.header.shop .search-bar {
  8907. \t\twidth: 660px!important;
  8908. \t}
  8909. \t.header.shop .search-bar input {
  8910. \t\twidth: 450px!important;
  8911. \t\tmargin-left: -60px;
  8912. \t}
  8913. }
  8914. .nice-select .list {
  8915. \tz-index: 1000!important;
  8916. }
  8918. .button--anchor {
  8919.   background: none;
  8920.   border: none;
  8921.   padding: 0;
  8922.   margin: 0;
  8923. }
  8924. .button--anchor:hover {
  8925.   text-decoration: underline;
  8926. }
  8928. .button--primary {
  8929.   box-sizing: border-box;
  8930.   border: 1px solid #c49530;
  8931.   border-radius: 3px;
  8932.   box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.2);
  8933.   background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #fee045), to(#fecb2a));
  8934.   background: linear-gradient(to bottom, #fee045 5%, #fecb2a 100%);
  8935.   height: 37px;
  8936.   font-weight: bold;
  8937.   font-size: 13px;
  8938.   text-align: center;
  8939.   padding: 7px;
  8940. }
  8942. .button--blue {
  8943.   color: #1471da;
  8944. }
  8946. .hr-line {
  8947.   display: flex;
  8948. }
  8950. .hr-line:before,
  8951. .hr-line:after {
  8952.   content: '';
  8953.   flex: 1;
  8954.   border-bottom: 1px solid;
  8955.   margin: auto 0.25em;
  8956. }
  8957. .btn-nav-search {
  8958.     font-size: 12px;
  8959.     border: 3px solid #ddd;
  8960.     margin-right: -2px;
  8961.     font-family: 'Montserrat', sans-serif!important;
  8962.     text-align: center;
  8963.     color: #030303;
  8964.     background: linear-gradient(#FFFFFF,#E6E6E6);
  8965.     border: 1px solid #CDCDCD;
  8966.     border-radius: 3px;
  8967.     display: inline-block;
  8968. \tpadding: 5px 10px;
  8969. \tfont-weight: bold;
  8970. }
  8972. input[type=\"checkbox\"] {
  8973.   -webkit-appearance: none;
  8974.      -moz-appearance: none;
  8975.           appearance: none;
  8976.   background-color: white;
  8977.   border: 0.125rem #808080 solid;
  8978.   border-radius: 4px;
  8979.   cursor: pointer;
  8980.   display: inline-block;
  8981.   height: 1.25rem;
  8982.   margin-right: 0.25rem;
  8983.   position: relative;
  8984.   -webkit-transition: all 0.25s;
  8985.   transition: all 0.25s;
  8986.   vertical-align: middle;
  8987.   width: 1.25rem;
  8988. }
  8989. input[type=\"checkbox\"]::after {
  8990.   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\");
  8991.   background-position: center center;
  8992.   background-repeat: no-repeat;
  8993.   background-size: 0.75rem 0.75rem;
  8994.   content: \"\";
  8995.   height: 1rem;
  8996.   left: 0;
  8997.   opacity: 0;
  8998.   position: absolute;
  8999.   top: 0;
  9000.   -webkit-transition: opacity 0.25s;
  9001.   transition: opacity 0.25s;
  9002.   width: 1rem;
  9003. }
  9004. input[type=\"checkbox\"]:hover {
  9005.   background-color: #bfdde1;
  9006.   border: 0.125rem #007788 solid;
  9007.   -webkit-transform: scale(1.1);
  9008.           transform: scale(1.1);
  9009. }
  9010. input[type=\"checkbox\"]:focus {
  9011.   outline: none;
  9012.   box-shadow: 0px 0px 8px rgba(0, 119, 136, 0.75);
  9013. }
  9014. input[type=\"checkbox\"]:checked {
  9015.   background-color: #007788;
  9016.   border: 0.125rem #007788 solid;
  9017. }
  9018. input[type=\"checkbox\"]:checked::after {
  9019.   opacity: 1;
  9020. }
  9021. label {
  9022.   display: inline-block;
  9023.   vertical-align: middle;
  9024. }
  9026. .mbill-border{
  9027. \tbackground: #fff; border: 1px solid #ddd; margin-top: 15px; padding: 4px; border-radius: 5px;
  9028. }
  9029. .modal-dialog .modal-content .modal-body {
  9030.     padding: 0px;
  9031.     overflow-y: auto;
  9032.     max-height: 510px;
  9033.     height: auto;
  9034. }
  9037. /** Début style Offres spéciales **/
  9039. .kapsayici{
  9040. \twidth:100%;
  9041. \theight:auto;
  9042. \tposition:relative;
  9043. \tmargin-left:auto;
  9044. \tmargin-right:auto;
  9045. \tdisplay:block;
  9046. }
  9047. .kapsayici a{
  9048. \tcolor:#fff;
  9049. \ttext-decoration:none;
  9050. \tbackground-color:#000;
  9051. \tfont-family: 'Roboto', sans-serif;
  9052. }
  9053. .kapsayici a:hover{
  9054. \tcolor:#fff;
  9055. \ttext-decoration:none;
  9056. }
  9058. .slid3{
  9059. \twidth:100%;
  9060. \theight:250px;
  9061. \tbackground-color:#ccc;
  9062. \tdisplay:block;
  9063. \tposition:relative;
  9064. \tz-index:1;
  9065. }
  9067. .resim3{
  9068. \twidth:100%;
  9069. \theight:100%;
  9070. \tdisplay:block;
  9071. \tposition:absolute;
  9072. \ttransition:0.5s;
  9073. \tvertical-align: middle;
  9074. \tz-index:2;
  9075. }
  9076. .resim3:after{
  9077. \tposition: absolute;
  9078. \tcontent:\"\";
  9079. \theight:100%;
  9080. \twidth:100%;
  9081. \ttop:0;
  9082. \tleft:0;
  9083. \topacity:0.9;
  9084. \tbackground: linear-gradient(to bottom, transparent 40%,#000 90%);
  9085. }
  9086. .resim3 img{
  9087. \twidth:100%;
  9088. \theight:100%;
  9089. \tobject-fit: cover;
  9090. \tobject-position: 50% 15%;
  9091. }
  9092. .resim3 h2{
  9093. \tposition:absolute;
  9094. \tbottom:0px;
  9095. \tpadding:10px;
  9096. \tword-wrap: break-word;
  9097. \ttext-shadow: 6px 4px 12px #000;
  9098. \tfont-weight:900;
  9099. \tfont-size:24px;
  9100. \tz-index:222;
  9101. \ttransition:0.4s;
  9102. }
  9103. .resim3 p{
  9104. \tposition:absolute;
  9105. \tbottom:2px;
  9106. \tvisibility:hidden;
  9107. \tpadding:10px;
  9108. \tz-index:11;
  9109. \tword-wrap: break-word;
  9110. \ttext-shadow: 6px 4px 12px #000;
  9111. \tfont-size:16px;
  9112. \tcolor:#fff;
  9113. \twidth: 90%;
  9114. \ttransition:0.2s;
  9115. \toverflow: hidden;
  9116. \twhite-space: nowrap;
  9117. \ttext-overflow: ellipsis;
  9118. }
  9119. .emoji{
  9120. \ttop:-10px;
  9121. \tleft:-20px;
  9122. \tposition:absolute;
  9123. \tz-index:222;
  9124. }
  9125. .emoji img{
  9126. \twidth:55px;
  9127. \theight:55px;
  9128. \tpadding:4px;
  9129. }
  9130. .slid3  span.yazar3 img{
  9131. \tdisplay:inline;
  9132. \tborder-radius:100%;
  9133. \twidth:30px;
  9134. \theight:30px;
  9135. \tvertical-align:middle;
  9136. \tpadding-right:5px;
  9137. \tz-index:999;
  9138. }
  9139. .slid3 a:hover  .resim3 h2{ bottom:30px; transition:0.4s;}
  9140. .slid3 a:hover .resim3 p{visibility: visible; z-index:222; transition:0.6s;}
  9141. .slid3 a:hover .resim3:after{ opacity:1;background: linear-gradient(to bottom, transparent 0%,#000 100%);}
  9143. .panel-offer{
  9144. \tborder: 1px solid #ddd; padding-top: 15px; padding-bottom: 15px;
  9145. }
  9146. .panel-offer:hover{
  9147. \tbackground: #f4f4f4;
  9148. }
  9150. /** Début File Input */
  9152. .file-input {
  9153.   display: inline-block;
  9154.   text-align: left;
  9155.   background: #fff;
  9156.   padding: 16px;
  9157.   width: 450px;
  9158.   position: relative;
  9159.   border-radius: 3px;
  9160. }
  9162. .file-input > [type='file'] {
  9163.   position: absolute;
  9164.   top: 0;
  9165.   left: 0;
  9166.   width: 100%;
  9167.   height: 100%;
  9168.   opacity: 0;
  9169.   z-index: 10;
  9170.   cursor: pointer;
  9171. }
  9173. .file-input > .button {
  9174.   display: inline-block;
  9175.   cursor: pointer;
  9176.   background: #eee;
  9177.   padding: 8px 16px;
  9178.   border-radius: 2px;
  9179.   margin-right: 8px;
  9180. }
  9182. .file-input:hover > .button {
  9183.   background: dodgerblue;
  9184.   color: white;
  9185. }
  9187. .file-input > .label {
  9188.   color: #333;
  9189.   white-space: nowrap;
  9190.   opacity: .3;
  9191. }
  9193. .file-input.-chosen > .label {
  9194.   opacity: 1;
  9195. }
  9198. /* responsive Search, Pagine & Filter Table */
  9200. .dataTables_filter {
  9201.   float: right;
  9202. }
  9204. .table-hover > tbody > tr:hover {
  9205.   background-color: #ccffff;
  9206. }
  9208. @media only screen and (min-width: 768px) {
  9209.   .tablefilter {
  9210.     width: 100% !important;
  9211. \tmargin: 15px 0px;
  9212.   }
  9213. }
  9215. thead {
  9216.   background: #f4f4f4;
  9217.   border-radius: 10px 10px 0px 0px!important;
  9218. }
  9219. tfoot {
  9220.   background: #f4f4f4;
  9221.   border-radius: 0px 10px!important;
  9222. }
  9223. tr{
  9224. \tborder: 1px solid rgba(0,0,0,0.1)!important;
  9225. }
  9226. .table td:nth-child(2) {
  9227.   overflow: hidden;
  9228.   text-overflow: ellipsis;
  9229. }
  9231. .highlight {
  9232.   background: #ffff99;
  9233. }
  9235. @media only screen and (max-width: 767px) {
  9236.   /* Force table to not be like tables anymore */
  9237.   .tablefilter,
  9238.   .tablefilter thead,
  9239.   .tablefilter tbody,
  9240.   .tablefilter th,
  9241.   .tablefilter td,
  9242.   .tablefilter tr {
  9243.     display: block;
  9244.   }
  9246.   /* Hide table headers (but not display: none;, for accessibility) */
  9247.   .tablefilter thead tr,
  9248.   .tablefilter tfoot tr {
  9249.     position: absolute;
  9250.     top: -9999px;
  9251.     left: -9999px;
  9252.   }
  9254.   .tablefilter td {
  9255.     /* Behave  like a \"row\" */
  9256.     border: none;
  9257.     border-bottom: 1px solid #eee;
  9258.     position: relative;
  9259.     padding-left: 50% !important;
  9260.   }
  9262.   .tablefilter td:before {
  9263.     /* Now like a table header */
  9264.     position: absolute;
  9265.     /* Top/left values mimic padding */
  9266.     top: 6px;
  9267.     left: 6px;
  9268.     width: 45%;
  9269.     padding-right: 10px;
  9270.     white-space: nowrap;
  9271.   }
  9273.   .tablefilter td:nth-child(1) {
  9274.     background: #ccc;
  9275.     height: 100%;
  9276.     top: 0;
  9277.     left: 0;
  9278.     font-weight: bold;
  9279.   }
  9280. }
  9282. .dt-bootstrap .row{
  9283. \twidth: 100%!important;
  9284. \tmargin-top: 5px;
  9285. \tmargin-bottom: 5px;
  9286. }
  9287. .dataTables_paginate ul li{
  9288. \tdisplay: inline!important;
  9289. }
  9290. .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}
  9291. table.dataTable thead .sorting:after{
  9292.     opacity: 0.5;
  9293.     content: \"\\f0dc\"!important;
  9294.     font-family: \"FontAwesome\"!important;
  9295. }
  9296. table.dataTable thead .sorting_asc:after{
  9297. \topacity: 0.5;
  9298.     content: \"\\f0dc\"!important;
  9299.     font-family: \"FontAwesome\"!important;
  9300. }
  9301. table.dataTable thead .sorting_desc:after{
  9302. \topacity: 0.5;
  9303.     content: \"\\f0dc\"!important;
  9304.     font-family: \"FontAwesome\"!important;
  9305. }
  9306. .tablefilter > thead > tr > th, .tablefilter > tbody > tr > th, .tablefilter > tfoot > tr > th, .tablefilter > thead > tr > td, .tablefilter > tbody > tr > td, .tablefilter > tfoot > tr > td {
  9307.    padding: 7px 3px;
  9308. }
  9309. .tablefilter > tbody > tr > td {
  9310. \tborder-bottom: 1px solid #ddd!important;
  9311. \ttext-weight: normal!important;
  9312. \tborder-bottom-width: 1!important;
  9313. }
  9315. .star-ratings-css {
  9316.   unicode-bidi: bidi-override;
  9317.   color: #c5c5c5;
  9318.   font-size: 25px;
  9319.   height: 25px;
  9320.   width: 100px;
  9321.   margin: 0 auto;
  9322.   position: relative;
  9323.   padding: 0;
  9324.   text-shadow: 0px 1px 0 #a2a2a2;
  9325. }
  9326. .star-ratings-css-top {
  9327.   color: #e7711b;
  9328.   padding: 0;
  9329.   position: absolute;
  9330.   z-index: 0;
  9331.   display: block;
  9332.   top: 0;
  9333.   left: 0;
  9334.   overflow: hidden;
  9335. }
  9336. .star-ratings-css-bottom {
  9337.   padding: -1;
  9338.   display: block;
  9339.   z-index: 0;
  9340. }
  9341. .star-ratings-sprite {
  9342.   background: url(\"{{ asset('template/images/star-rating-sprite.png') }}\") repeat-x;
  9343.   font-size: 0;
  9344.   height: 21px;
  9345.   line-height: 0;
  9346.   overflow: hidden;
  9347.   text-indent: -999em;
  9348.   width: 110px;
  9349.   margin: 0 auto;
  9350. }
  9351. .star-ratings-sprite-rating {
  9352.   background: url(\"{{ asset('template/images/star-rating-sprite.png') }}\") repeat-x;
  9353.   background-position: 0 100%;
  9354.   float: left;
  9355.   height: 21px;
  9356.   display: block;
  9357. }
  9358. em {
  9359.   font-style: italic;
  9360. }
  9362. .topic{
  9363.   padding:20px;
  9364.   padding-top:0px;
  9365.   padding-bottom:0px;
  9366.   border-bottom:solid 1px #ebebeb;
  9367.   width: 100%;
  9368. }
  9369. .topic .open{
  9370.   cursor:pointer;
  9371.   display:block;
  9372.   padding:0px;
  9373. }
  9374. .topic .open:hover{
  9375.   opacity:0.7;
  9376. }
  9377. .expanded{
  9378.   background-color:#f5f5f5;
  9379.   transition: all .3s ease-in-out;
  9380. }
  9381. .question{
  9382.   padding-top:30px;
  9383.   padding-right: 40px;
  9384.   padding-bottom:20px;
  9385.   font-size: 18px;
  9386.   font-weight:500;
  9387.   color: #526ee4;
  9388. }
  9389. .answer{
  9390.   font-size:16px;
  9391.   line-height:26px;
  9392.   display:none;
  9393.   margin-bottom:30px;
  9394.   text-align:justify;
  9395.   padding-left:20px;
  9396.   padding-right:20px;
  9397. }
  9398. .faq-t{
  9399.   -moz-transform: rotate(-45deg);
  9400.   -ms-transform: rotate(-45deg);
  9401.   -webkit-transform: rotate(-45deg);
  9402.   transform: rotate(-45deg);
  9403.   display: inline-block;
  9404.   float:right;
  9405.   position:relative;
  9406.   top:-55px;
  9407.   right:10px;
  9408.   width: 10px;
  9409.   height: 10px;
  9410.   background: transparent;
  9411.   border-left: 2px solid #ccc;
  9412.   border-bottom: 2px solid #ccc;
  9413.   transition: all .3s ease-in-out;
  9414. }
  9415. .faq-o{
  9416.   top:-50px;
  9417.    -moz-transform: rotate(-224deg);
  9418.   -ms-transform: rotate(-224deg);
  9419.   -webkit-transform: rotate(-224deg);
  9420.   transform: rotate(-224deg);
  9421. }
  9422. @media only screen and (max-width: 480px) {
  9423.   .faq-t{display:none;}
  9424.   .question{
  9425.   padding-right: 0px;
  9426. }
  9427.   main{
  9428.   padding:10px;
  9429. }
  9430.   .answer{
  9431.   margin-bottom:30px;
  9432.   padding-left:0px;
  9433.   padding-right:0px;
  9434. }
  9435. }
  9437. .theme-bg-light{
  9438. \tborder: 1px  #CCC solid;
  9439. \tbox-shadow: inset 0px 11px 8px -10px #CCC, inset 0px -11px 8px -10px #CCC;
  9440. }
  9442. .flat-btn {
  9443. \tdisplay: inline-block;
  9444. \tpadding: 15px 20px;
  9445. \tfont-size: 13px;
  9446. \tfont-weight: 600;
  9447. \ttext-align: center;
  9448. \ttext-decoration: none;
  9449. \tborder-radius: 50px;
  9450. \tborder: 1px solid #E5DFEF;
  9451. \tcolor: #231A3B;
  9452. \ttransition: background .2s ease-in-out;
  9453. \tmargin-top: 15px;
  9454. }
  9456. .flat-btn:hover {
  9457. \tbackground: #E5DFEF;
  9458. \tcursor: pointer;
  9459. }
  9461. @media (min-width:576px) {
  9462.     .modal-dialog {
  9463.         max-width: 500px!important;
  9464.         margin: 30px auto
  9465.     }
  9466.     .modal-sm {
  9467.         max-width: 300px!important;
  9468.     }
  9469. }
  9471. @media (min-width:992px) {
  9472.     .modal-lg {
  9473.         max-width: 800px!important;
  9474.     }
  9475. }
  9477. .white-text-shadow{
  9478. \tcolor: #666;
  9479.     /*text-shadow: 1px 1px 2px #000000;*/
  9480.     margin-bottom: 10px;
  9481. \ttext-align: center;
  9482. \tdisplay: inline-block;
  9483. }
  9484. .white-text-shadow:hover{
  9485. \ttext-decoration: underline;
  9486. }
  9489. @media only screen and (max-width: 767px){
  9490. .slicknav_btn {
  9491.     background: transparent;
  9492.     padding: 0;
  9493.     margin: 5px 15px 0px 0px;
  9494. \tposition: absolute;
  9495.     right: 0px;
  9496.     top: 0px;
  9497. }
  9499. .m-text-center{
  9500. \ttext-align: center!important;
  9501. }
  9502. .logo-small a img{
  9503. \theight: 50px;
  9504. \tmargin-top: -10px;
  9505. }
  9506. .open-menu{
  9507. \tposition: absolute;
  9508. \tleft: -15px!important; top: -7px!important;
  9509. }
  9511. .hero-slider .single-slider {
  9512. \theight: auto!important;
  9513. \tmin-height: 510px!important;
  9514. }
  9515. .hero-slider{
  9516. \theight: auto!important;
  9517. }
  9518. }
  9520. @media only screen and (min-width: 767px){
  9521. .m-text-center{
  9522. \ttext-align: left;
  9523. }
  9524. .open-menu{
  9525. \tdisplay: none!important;
  9526. }
  9527. .logo-small a img{
  9528. \theight: 80px;
  9529. \tmargin-top: -10px;
  9530. }
  9531. .hero-slider .single-slider {
  9532. \theight: 510px!important;
  9533. }
  9534. .hero-slider{
  9535. \theight: auto!important;
  9536. }
  9537. }
  9539. .menu-mob{
  9540.     height: 100%!important;
  9541.     width: 300px;
  9542.     position: fixed;
  9543.     left: -350px;
  9544. \ttop: 0px;
  9545.     z-index: 1001;
  9546.     background: #fff;
  9547.     overflow: hidden;
  9548.     text-align: left;
  9549.   -webkit-transition: -webkit-transform 250ms ease-in-out;
  9550.   transition: transform 250ms ease-in-out;
  9551. }
  9553. .activebtn {
  9554.     -webkit-transform: translateX(350px);
  9555.     -moz-transform: translateX(350px);
  9556.     -o-transform: translateX(350px);
  9557.     -ms-transform: translateX(350px);
  9558.     transform: translateX(350px);
  9559.     box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  9560.     -moz-box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  9561.     -webkit-box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  9562. }
  9564. .open-menu{
  9565.     display: inline-block;
  9566. }
  9568. .open-menu button{
  9569.     display: inline;
  9570.     z-index: 0;
  9571.     background: transparent;
  9572.     border: none;
  9573.     margin-top: 10px;
  9574.     margin-left: 25px;
  9575.     padding: 0px;
  9576.     cursor: pointer;
  9577. }
  9579. .open-menu img{
  9580.     width: 30px;
  9581.     height: 30px;
  9582. }
  9584. .header-menu{
  9585.     height: 60px;
  9586.     background: #f4f4f4;
  9587. \tmargin-bottom: 7px;
  9588. \tpadding: 7px 10px;
  9589. }
  9591. .header-menu button {
  9592.     position: absolute;
  9593.     background: transparent;
  9594.     border: none;
  9595.     padding: 0px;
  9596.     cursor: pointer;
  9597. \tfloat: right;
  9598. \ttop: 7px;
  9599. \tright: 7px;
  9600. }
  9602. .header-menu img {
  9603.     width: 40px;
  9604.     height: 40px;
  9605. }
  9607. .top-menu {
  9608.     margin-top: 35px;
  9609. }
  9611. .top-menu a {
  9612.     text-decoration: none;
  9613.     color: black;
  9614.     font-weight: 500;
  9615.     font-size: 16rem;
  9616.     display: block;
  9617.     line-height: 40px;
  9618.     padding-left: 35px;
  9619. \t transition: .2s;
  9620. }
  9622. /* Dropdown Button */
  9623. .dropbtn-prfl {
  9624. background-color: #4CAF50;
  9625. color: white;
  9626. padding: 16px;
  9627. font-size: 16px;
  9628. border: none;
  9629. }
  9631. /* The container <div> - needed to position the dropdown content */
  9632. .dropdown-prfl {
  9633. position: relative;
  9634. display: inline-block;
  9635. }
  9637. /* Dropdown Content (Hidden by Default) */
  9638. .dropdown-content-prfl {
  9639. display: none;
  9640. position: absolute;
  9641. background-color: #fff;
  9642. min-width: 160px;
  9643. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  9644. z-index: 1;
  9645. border-radius: 10px;
  9646. }
  9648. /* Links inside the dropdown */
  9649. .dropdown-content-prfl a {
  9650. color: black;
  9651. padding: 12px 16px;
  9652. text-decoration: none;
  9653. display: block;
  9654. }
  9656. /* Change color of dropdown links on hover */
  9657. .dropdown-content-prfl a:hover {background-color: #ddd;}
  9659. /* Show the dropdown menu on hover */
  9660. .dropdown-prfl:hover .dropdown-content-prfl {display: block;}
  9662. /* Change the background color of the dropdown button when the dropdown content is shown */
  9663. .dropdown-prfl:hover .dropbtn-prfl {background-color: #3e8e41;}
  9665. .menu-mob .dropdown-toggle::after {
  9666.     display: inline-block;
  9667.     width: 0;
  9668.     height: 0;
  9669.     float: right;
  9670.     position: absolute;
  9671.     top: 15px;
  9672.     right: 7px;
  9673.     content: \"\";
  9674.     border-top: .3em solid;
  9675.     border-right: .3em solid transparent;
  9676.     border-bottom: 0;
  9677.     border-left: .3em solid transparent;
  9678. }
  9680. aside{
  9681.   position: fixed;
  9682.   width: 100%;
  9683.   top: 0;
  9684.   left: 0;
  9685.   background: #f4f4f4;
  9686.   opacity: 0;
  9687.   visibility: hidden;
  9688.   transition: all .5s ease;
  9689.   z-index: 90000!important;
  9690. }
  9691. .open {
  9692.   opacity: 1;
  9693.   visibility: visible;
  9694. }
  9697. .close-nav {
  9698.   position: fixed;
  9699.   top: 20px;
  9700.   left: 15px;
  9701.   color: white;
  9702.   z-index: 3;
  9703.   cursor: pointer;
  9704.   font-family: sans-serif;
  9705.   box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
  9706. }
  9707. .close-nav:hover{
  9708. \tbackground: red!important;
  9709. \tcolor: #fff!important;
  9710. }
  9711. .hiden-scroll-bar-body{
  9712. \theight: 400px;
  9713. \toverflow-y: hidden;
  9714. }
  9715. .close-nav span,
  9716. .close-nav span:before,
  9717. .close-nav span:after {
  9718.   border-radius: 4px;
  9719.   height: 5px;
  9720.   width: 35px;
  9721.   background: white;
  9722.   position: absolute;
  9723.   display: block;
  9724.   content: '';
  9725. }
  9726. .close-nav span {
  9727.   background: transparent;
  9728. }
  9729. .close-nav span:before {
  9730.   -webkit-transform: rotate(45deg);
  9731. \t\t  transform: rotate(45deg);
  9732. }
  9733. .close-nav span:after {
  9734.   -webkit-transform: rotate(-45deg);
  9735. \t\t  transform: rotate(-45deg);
  9736. }
  9738. .outer-close {
  9739.   position: absolute;
  9740.   right: 0;
  9741.   top: 0;
  9742.   width: 85px;
  9743.   height: 85px;
  9744.   cursor: pointer;
  9745. }
  9748. .position-current-user, .position-current-user p{
  9749. \tbackground: #3565ae!important;
  9750. \tcolor: #fff!important;
  9751. }
  9752. .bg-struct{
  9753. \tbackground: #3565ae!important;
  9754. \tcolor: #fff!important;
  9755. }
  9759. .silly_scrollbar {
  9760. \theight:700px;
  9761. \t-webkit-box-shadow:0 0 3px #333;
  9762. \t-webkit-box-sizing: border-box;
  9763. \tpadding:0 14px;
  9764. \toverflow:auto;
  9765. }
  9767. .silly_scrollbar::-webkit-scrollbar {
  9768. \twidth: 12px;
  9769. }
  9771. .silly_scrollbar::-webkit-scrollbar-track {
  9772. \t-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  9773. \tborder-radius: 10px;
  9774. }
  9776. .silly_scrollbar::-webkit-scrollbar-thumb {
  9777. \tborder-radius: 10px;
  9778. \t-webkit-box-shadow: inset 0 0 6px red;
  9779. }
  9781. .silly_scrollbar::-webkit-scrollbar-thumb:hover {
  9782. \t-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
  9783. }
  9785. /* The container  - needed to position the dropdown content */
  9786. .dropdown-prfl {
  9787. position: relative;
  9788. display: inline-block;
  9789. }
  9791. /* Dropdown Content (Hidden by Default) */
  9792. .dropdown-content-prfl {
  9793. display: none;
  9794. position: absolute;
  9795. background-color: #fff;
  9796. min-width: 160px;
  9797. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  9798. margin-top: -5px; z-index: 50000;
  9799. }
  9801. /* Links inside the dropdown */
  9802. .dropdown-content-prfl a {
  9803. color: black;
  9804. padding: 12px 16px;
  9805. text-decoration: none;
  9806. display: block;
  9807. }
  9809. /* Change color of dropdown links on hover */
  9810. .dropdown-content-prfl a:hover {background-color: #ddd;}
  9812. /* Show the dropdown menu on hover */
  9813. .dropdown-prfl:hover .dropdown-content-prfl {display: block;}
  9815. /* Change the background color of the dropdown button when the dropdown content is shown */
  9816. .dropdown-prfl:hover .dropbtn-prfl {background-color: #3e8e41;}
  9818. .button-hover, .button-hover:hover, .button-hover:active, .button-hover:visited, .button-hover:focus {
  9819.   outline: 0;
  9820. }
  9822. .button-hover:not(.btn-lang-footer):not(.btn-send-footer):not(.homepage-seecourses):not(.module-btn):not(.btn-download):not(.dropbtn12) {
  9823.   height: 45px;
  9824.   width: auto;
  9825.   padding: 0 35px;
  9826.   border-radius: 4px;
  9827.   color: #6c6c6c;
  9828.   border: 1px solid #c6c6c6;
  9829.   text-transform: uppercase;
  9830.   font-family: 'Montserrat';
  9831.   font-size: 14px;
  9832.   font-weight: bold;
  9833.   line-height: 22px;
  9834.   text-align: center;
  9835.   transition: 0.3s cubic-bezier(0.25, 0.8, 0.95, 1);
  9836.   transition: padding 0s;
  9837.   background: transparent;
  9838. }
  9839. .button-hover:not(.btn-lang-footer):not(.btn-send-footer):not(.homepage-seecourses):not(.module-btn):not(.btn-download):hover {
  9840.   background: linear-gradient(216.73deg, #7B00B9 0%, #7323DC 100%);
  9841.   color: #fff;
  9842.   border: 1px solid #7B00B9;
  9843. }
  9844. @media (min-width: 320px) and (max-width: 768px) {
  9845.   .button-hover:not(.btn-lang-footer):not(.btn-send-footer):not(.homepage-seecourses):not(.module-btn):not(.btn-download):hover {
  9846. \tbackground: transparent;
  9847. \tcolor: #6c6c6c;
  9848. \tborder: 1px solid #c6c6c6;
  9849.   }
  9850. }
  9853. /*
  9854. \t---------------------------------------------
  9855. \tStart Modal SPP
  9856. \t-------------------------------------------------
  9857. \t*/
  9858. \thtml.sppmodal-active, body.sppmodal-active {
  9859. \toverflow: hidden;
  9860. \t}
  9861. \t.sppmodal-container {
  9862. \tposition: fixed;  /*Mettre à fixed si la classe sppmodal-active est appliqué à l'élément body*/
  9863. \tdisplay: table;
  9864. \theight:100%;
  9865. \twidth: 100%;
  9866. \ttop: 0;
  9867. \tleft: 0;
  9868. \ttransform: scale(0);
  9869. \tz-index: 1000;
  9870. \t}
  9871. \t.sppmodal-container.one {
  9872. \ttransform: scaleY(0.01) scaleX(0);
  9873. \tanimation: unfoldIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  9874. \t}
  9875. \t.sppmodal-container.one .sppmodal-background .sppmodal {
  9876. \ttransform: scale(0);
  9877. \tanimation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  9878. \t}
  9879. \t.sppmodal-container.one.out {
  9880. \ttransform: scale(1);
  9881. \tanimation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  9882. \t}
  9883. \t.sppmodal-container.one.out .sppmodal-background .sppmodal {
  9884. \tanimation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  9885. \t}
  9887. \t.sppmodal-container .sppmodal-background {
  9888. \tdisplay: table-cell;
  9889. \tbackground: rgba(247, 248, 251,0.8)!important;
  9890. \ttext-align: center;
  9891. \tvertical-align: middle;
  9892. \t}
  9893. \t.sppmodal-container .sppmodal-background .sppmodal {
  9894. \tpadding: 10px;
  9895. \tdisplay: inline-block;
  9896. \tposition: relative;
  9897. \t\twidth: 600px;
  9898. \theight: auto;
  9899. \tmax-width: 100%!important;
  9900. \theight: 750px;
  9901. \toverflow-y: auto;
  9902. \toverflow-x: hidden;
  9903. \tpadding-bottom: 40px;
  9906. \t\tfont-family: Arial;
  9907. \t\tfont-size: 13px;
  9908. \t\tfont-weight: 400;
  9909. \t\ttext-align: center;
  9910. \t\tline-height: 18px;
  9911. \t\tcolor:  #FFFFFF;
  9912. \t\tbackground-color: #FFFFFF;
  9913. \t\tbackground-repeat: repeat;
  9914. \t\tbackground-position: left top;
  9915. \t\tborder: 1px solid  #F1F3F9;
  9916. \t\tborder-radius: 4px;
  9917. \t\tbox-shadow: 0px 2px 5px 1px  #999999;
  9918. \t}
  9920. \t.sppmodal-container .sppmodal-background .sppmodal h2 {
  9921. \tfont-size: 25px;
  9922. \tline-height: 25px;
  9923. \tmargin-bottom: 15px;
  9924. \t}
  9925. \t.sppmodal-container .sppmodal-background .sppmodal p {
  9926. \tfont-size: 18px;
  9927. \tline-height: 22px;
  9928. \t}
  9929. \t.sppmodal-container .sppmodal-background .sppmodal .sppmodal-svg {
  9930. \tposition: absolute;
  9931. \ttop: 0;
  9932. \tleft: 0;
  9933. \theight: 100%;
  9934. \twidth: 100%;
  9935. \tborder-radius: 3px;
  9936. \t}
  9937. \t.sppmodal-container .sppmodal-background .sppmodal .sppmodal-svg rect {
  9938. \tstroke: #fff;
  9939. \tstroke-width: 2px;
  9940. \tstroke-dasharray: 778;
  9941. \tstroke-dashoffset: 778;
  9942. \t}
  9945. \t@keyframes unfoldIn {
  9946. \t0% {
  9947. \t\ttransform: scaleY(0.005) scaleX(0);
  9948. \t}
  9949. \t50% {
  9950. \t\ttransform: scaleY(0.005) scaleX(1);
  9951. \t}
  9952. \t100% {
  9953. \t\ttransform: scaleY(1) scaleX(1);
  9954. \t}
  9955. \t}
  9956. \t@keyframes unfoldOut {
  9957. \t0% {
  9958. \t\ttransform: scaleY(1) scaleX(1);
  9959. \t}
  9960. \t50% {
  9961. \t\ttransform: scaleY(0.005) scaleX(1);
  9962. \t}
  9963. \t100% {
  9964. \t\ttransform: scaleY(0.005) scaleX(0);
  9965. \t}
  9966. \t}
  9967. \t@keyframes zoomIn {
  9968. \t0% {
  9969. \t\ttransform: scale(0);
  9970. \t}
  9971. \t100% {
  9972. \t\ttransform: scale(1);
  9973. \t}
  9974. \t}
  9975. \t@keyframes zoomOut {
  9976. \t0% {
  9977. \t\ttransform: scale(1);
  9978. \t}
  9979. \t100% {
  9980. \t\ttransform: scale(0);
  9981. \t}
  9982. \t}
  9983.   .form-alert-top{
  9984.     z-index: 2; position: absolute; background: #caf3f7; border-top: 1px solid #ddd; bottom: 0px; width: 100%; left: 0px; height: 70px;
  9985.   }
  9986.   @media (max-width: 720px){
  9987.     .sppmodal-container .sppmodal-background .sppmodal{
  9988.       width: 100%!important;
  9989.       height: calc(100vh)!important;
  9990.     }
  9991.     .form-alert-top{
  9992.       display: none;
  9993.     }
  9994.   }
  9995. \t/*
  9996. \t--------------------------------------
  9997. \tEnd Modal SPP
  9998. \t--------------------------------------
  9999. \t*/
  10001.   .btn-home {
  10002.   font-family: \"Barlow\", sans-serif;
  10003.   font-weight: 700;
  10004.   font-size: 18px;
  10005.   padding: 15px 40px;
  10006.   background: #fff;
  10007.   border: none;
  10008.   cursor: pointer;
  10009.   transition: 0.4s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
  10010.   position: relative;
  10011.   z-index: 2;
  10012.   border-radius: 50px;
  10013.   overflow: hidden;
  10014. }
  10015. .btn-home:after {
  10016.   content: \"\";
  10017.   position: absolute;
  10018.   transition: 0.4s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
  10019. }
  10021. .btn-4 {
  10022.   color: #252D4A;
  10023.   border: 2px solid currentColor;
  10024. }
  10025. .btn-4:after {
  10026.   border: solid #5568AA;
  10027.   border-width: 0 2px 2px 0;
  10028.   display: inline-block;
  10029.   padding: 4px;
  10030.   transform: rotate(-45deg) translateY(-48%);
  10031.   top: 48%;
  10032.   right: 27%;
  10033.   opacity: 0;
  10034.   visibility: hidden;
  10035.   z-index: -1;
  10036. }
  10037. .btn-4:hover, .btn-4:focus {
  10038.   color: #5568AA;
  10039.   border: 2px solid transparent;
  10040.   padding: 15px 70px;
  10041. }
  10042. .btn-4:hover:after, .btn-4:focus:after {
  10043.   opacity: 1;
  10044.   visibility: visible;
  10045.   right: 18%;
  10046. }
  10047. .btn-4:focus {
  10048.   border-color: currentColor;
  10049. }
  10050. .btn-4:hover{
  10051.   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  10052. }
  10053. form.formmodal_inscription_newletter .nice-select {
  10054.     width: 100%!important;
  10055. }
  10056. .nice-select .list {
  10057.     max-height: 250px!important;
  10058.     overflow: auto!important;
  10059. }
  10060. .white-text-shadow{
  10061.   color: white;
  10062.   text-shadow: 2px 2px 4px #000000;
  10063. }
  10067. /* toggle-switch-1 */
  10068. .toggle-switch-1{
  10069.   --width: 70px;
  10070.   --height: 25px;
  10071.   position: relative;
  10072.   width: var(--width);
  10073.   height: var(--height);
  10074.   cursor: pointer;
  10075. }
  10076. .toggle-switch-1 input[type=checkbox]{
  10077.   opacity: 0!important;
  10078. }
  10079. .toggle-switch-1 input{
  10080.   position: relative;
  10081.   z-index: 1;
  10082.   appearance: none;
  10083. }
  10084. .toggle-switch-1 span{
  10085.   position: absolute;
  10086.   top: 0;
  10087.   left: 0;
  10088.   width: 100%;
  10089.   height: 100%;
  10090.   background: #313237;
  10091.   border-radius: var(--height);
  10092.   transition: 0.5;
  10093.   box-shadow: 0 1px 1px #313237;
  10094. }
  10095. .toggle-switch-1 input:checked ~ span{
  10096.   background: #0a58ca;
  10097.   box-shadow: 0 1px 1px #05be0566;
  10098. }
  10099. .toggle-switch-1 span i {
  10100.   position: absolute;
  10101.   width: 30px;
  10102. \theight: 18px;
  10103.   aspect-ratio: 1;
  10104.   background: #fff;
  10105.   border-radius: 10px;
  10106.   left: 4px;
  10107.   top: 3px;
  10108. }
  10109. .toggle-switch-1 span i:before {
  10110.   content: \"Non\";
  10111.   position: absolute;
  10112.   top: 50%;
  10113.   left: 50%;
  10114.   transform: translate(-50%, -50%);
  10115.   color: #333;
  10116.   text-transform: uppercase;
  10117.   font-weight: 900;
  10118.   font-style: normal;
  10119.   font-size: 8px;
  10120.   transition: 0.5s;
  10121. }
  10122. .toggle-switch-1 input:checked ~ span i{
  10123.   left: 36px;
  10124. }
  10125. .toggle-switch-1 input:checked ~ span i:before{
  10126.   content: \"Oui\";
  10127.   color: #007FFF;
  10128. }
  10129. /*-----------End checkbox----------------*/
  10131. /*------------------ Begin Stepper Souscriptio ---------------------*/
  10133. .stepper {
  10134.   clear: left;
  10135.   float: left;
  10136.   margin: 20px;
  10137. }
  10139. .stepper .step {
  10140.   float: left;
  10141.   font-size: 15px;
  10142.   margin: 0 12px;
  10143. }
  10145. .stepper .divider1 {
  10146.   border-bottom: 1px solid #cfcfcf;
  10147.   float: left;
  10148.   height: 12px;
  10149.   margin: 0 12px;
  10150.   width: 45px;
  10151. }
  10153. .stepper .circle {
  10154.   background: #cfcfcf;
  10155.   border-radius: 50%;
  10156.   color: #ffffff;
  10157.   float: left;
  10158.   font-size: 13px;
  10159.   height: 24px;
  10160.   line-height: 24px;
  10161.   text-align: center;
  10162.   width: 24px;
  10163. }
  10165. .stepper .label {
  10166.   color: #cfcfcf;
  10167.   float: left;
  10168.   line-height: 24px;
  10169.   margin-left: 8px;
  10170. }
  10172. .stepper .active .circle {
  10173.   background: #ef7521;
  10174. }
  10176. .stepper .active .label {
  10177.   color: #5b5b5b;
  10178.   font-weight: 400;
  10179. }
  10181. .stepper .complete .circle {
  10182.   background: #ef7521;
  10183. }
  10185. .stepper .complete .icon {
  10186.   font-size: 30px;
  10187.   position: relative;
  10188.   top: -3px;
  10189. }
  10191. .stepper .complete .label {
  10192.   color: #5b5b5b;
  10193.   font-weight: 400;
  10194. }
  10195. /*-----------------End stepper souscription ------------------*/
  10197. .animate__animated.animate__fadeIn {
  10198.   --animate-duration: 0.3s;
  10199. }
  10202. .main_card {
  10203.   transform: scale(0.9);
  10204.   border-radius: 10px;
  10205.   background: #fff;
  10206. }
  10207. .main_card h3 {
  10208.   font-family: Mulish;
  10209.   font-style: normal;
  10210.   font-weight: bold;
  10211.   font-size: 22px;
  10212.   line-height: 28px;
  10213.   /* identical to box height */
  10214.   color: #1A1B38;
  10215. }
  10216. .main_card .select-cards {
  10217.   height: auto;
  10218. }
  10219. .main_card .select-cards .select {
  10220.   width: 100%;
  10221.   height: 95px;
  10222.   background: #FFFFFF;
  10223.   border: 1px solid #EAEAEA;
  10224.   border-radius: 5px;
  10225.   margin-bottom: 10px;
  10226.   display: flex;
  10227.   align-items: center;
  10228.   cursor: pointer;
  10229.   transition: 0.3s;
  10230. }
  10231. .main_card .select-cards .select .titles {
  10232.   margin-left: 15px;
  10233. }
  10234. .main_card .select-cards .select .titles h4 {
  10235.   font-family: Mulish;
  10236.   font-style: normal;
  10237.   font-weight: bold;
  10238.   font-size: 16px;
  10239.   line-height: 20px;
  10240.   /* identical to box height */
  10241.   color: #1A1B38;
  10242. }
  10243. .main_card .select-cards .select .titles h5 {
  10244.   font-family: Mulish;
  10245.   font-style: normal;
  10246.   font-weight: normal;
  10247.   font-size: 16px;
  10248.   line-height: 20px;
  10249.   /* identical to box height */
  10250.   color: #1A1B38;
  10251.   margin-top: 1px;
  10252. }
  10253. .main_card .select-cards .select .check-box {
  10254.   width: 33px;
  10255.   height: 33px;
  10256.   background: #FFFFFF;
  10257.   border: 2px solid #BCBCBC;
  10258.   border-radius: 50%;
  10259.   margin-left: 25px;
  10260.   display: flex;
  10261.   align-items: center;
  10262.   justify-content: center;
  10263.   transition: 0.3s;
  10264. }
  10265. .main_card .select-cards .select .check-box .check-dot {
  10266.   width: 15px;
  10267.   height: 15px;
  10268.   background: #fff;
  10269.   border-radius: 50%;
  10270.   transition: 0.3s;
  10271.   transform: scale(0);
  10272. }
  10273. .main_card .select-cards .select[data-selected=true] {
  10274.   border-color: #000000;
  10275. }
  10276. .main_card .select-cards .select[data-selected=true] .check-box {
  10277.   background: #000000;
  10278.   border-color: #000;
  10279.   background: #1d3cc6;
  10280.   border-color: #1d3cc6;
  10281. }
  10282. .main_card .select-cards .select[data-selected=true] .check-box .check-dot {
  10283.   width: 15px;
  10284.   height: 15px;
  10285.   transform: scale(1);
  10286. }
  10287. .main_card .select-btn {
  10288.   height: 95px;
  10289.   background: #1d3cc6;
  10290.   border-radius: 5px;
  10291.   font-family: Mulish;
  10292.   font-style: normal;
  10293.   font-weight: bold;
  10294.   font-size: 18px;
  10295.   line-height: 23px;
  10296.   cursor: pointer;
  10297.   /* identical to box height */
  10298.   text-align: center;
  10299.   color: #FFFFFF;
  10300.   display: flex;
  10301.   align-items: center;
  10302.   justify-content: center;
  10303. }
  10304. .stepper-item-1{
  10305.   display: block;
  10306. }
  10307. .stepper-item-2{
  10308.   display: none;
  10309. }
  10311. </style>
  10312. {% endblock %}
  10314. </head>
  10315. <body class=\"js\">
  10317.   <!-- Preloader -->
  10318. \t<div class=\"preloader\">
  10319. \t\t<div class=\"preloader-inner\">
  10320. \t\t\t<div class=\"preloader-icon\">
  10321. \t\t\t\t<span></span>
  10322. \t\t\t\t<span></span>
  10323. \t\t\t</div>
  10324. \t\t</div>
  10325. \t</div>
  10327.   {{ render(controller(\"App\\\\Controller\\\\General\\\\Template\\\\MenuController:menubare\", {'position': 'accueil', 'menudisplay': menudisplay|default(1) })) }}
  10329.   {% block body %}
  10331.   {% endblock %}
  10333.   
  10334. <div id=\"sppmodal-container-newsletter\" class=\"sppmodal-container\">
  10335. \t<div class=\"sppmodal-background\">
  10336. \t\t<div class=\"sppmodal\">
  10337. \t\t\t<div class=\"row\">
  10338. \t\t\t\t<div class=\"col-md-12\">
  10339. \t\t\t\t\t<a href=\"#!\" class=\"pull-right close-sppmodal-newsletter\" data-original-title=\"\" title=\"\">
  10340. \t\t\t\t\t\t<img src=\"{{ asset('template/images/close.svg') }}\" class=\"img-size-15\" style=\"height: 15px;\">
  10341. \t\t\t\t\t</a>
  10342. \t\t\t\t\t<h3 class=\"text-left\" style=\"font-family: OpenSans-Bold; color: #333; padding: 0px;margin: 0px;\">Services {{ site }}</h3>
  10343. \t\t\t\t</div>
  10344. \t\t\t\t<div class=\"col-md-12\">
  10345. \t\t\t\t\t<hr style=\"margin-bottom: 0px;\">
  10346. \t\t\t\t</div>
  10348.         <div class=\"col-md-12\">
  10349.           <div class=\"stepper\">
  10350.             <div class=\"step complete\">
  10351.               <div class=\"circle\"> 
  10352.                 <div class=\"bi bi-check2\"></div>
  10353.               </div>
  10354.               <div class=\"label\">Etape 1</div>
  10355.             </div>
  10356.             <div class=\"divider1\"></div>
  10357.             <div class=\"step active\" id=\"stepper-indicator-1\">
  10358.               <div class=\"circle\">2</div>
  10359.               <div class=\"label\">Etape 2</div>
  10360.             </div>
  10361.             <div class=\"divider1\"></div>
  10362.             <div class=\"step\" id=\"stepper-indicator-2\">
  10363.               <div class=\"circle\">3</div>
  10364.               <div class=\"label\">Etape 3</div>
  10365.             </div>
  10366.           </div>
  10367.         </div>
  10369. \t\t\t\t<div class=\"col-md-12\">
  10370.           <div class=\"stepper-item-1\">
  10371. \t\t\t\t\t<div class=\"row text-left\">
  10372. \t\t\t\t\t\t<div class=\"col-sm-12 offset-md-1 col-md-10\">
  10374.                 <div class=\"main_card\">
  10375.   
  10376.                   <h3> Chosissez un service</h3>
  10377.                   
  10378.                   <div class=\"select-cards\">
  10379.                     
  10380.                       <div class=\"select\" id=\"item-discovery-online\" value=\"discovery\">
  10381.                         <div class=\"check-box\"><div class=\"check-dot\"></div></div>
  10382.                         <div class=\"titles\">
  10383.                           <h4>Souscription <strong>DISCOVERY Online</strong></h4>
  10384.                           <h5>3000 {{ devise }}/mois</h5>
  10385.                         </div>
  10386.                       </div>
  10387.   
  10388.                       <div class=\"select\" id=\"item-professional-desktop\" data-selected=\"true\" value=\"professional\">
  10389.                         <div class=\"check-box\"><div class=\"check-dot\"></div></div>
  10390.                         <div class=\"titles\">
  10391.                           <h4>Souscription <strong>PROFESSIONAL Desktop</strong></h4>
  10392.                         <h5>12 500 {{ devise }}/mois</h5>
  10393.                         </div>
  10394.                       </div>
  10395.                       
  10396.                       <div class=\"select\" id=\"item-premium-desktop\" value=\"premium\">
  10397.                         <div class=\"check-box\"><div class=\"check-dot\"></div></div>
  10398.                         <div class=\"titles\">
  10399.                           
  10400.                         <h4>Souscription <strong>PREMIUM Desktop</strong></h4>
  10401.                         <h5>22 500 {{ devise }}/mois</h5>
  10402.                         </div>
  10403.                       </div>
  10404.   
  10405.                       <!-- div class=\"select\" id=\"item-contact\" value=\"contact\">
  10406.                         <div class=\"check-box\"><div class=\"check-dot\"></div></div>
  10407.                         <div class=\"titles\">
  10408.                           
  10409.                         <h4>Contacter le service client</h4>
  10410.                         <h5>Appel, Email & Whatsapp</h5>
  10411.                         </div>
  10412.                       </div -->
  10413.   
  10414.                   </div>
  10415.                   
  10416.                 </div>
  10417.               </div>
  10418.             </div>
  10420.             <div class=\"row\" style=\"margin-top: 120px;\">
  10421.               <div class=\"col-md-6 col-6 text-left\">
  10422.                 <button type=\"button\" class=\"button-hover\" name=\"button\" disabled=\"\"><span class=\"fa fa-arrow-left\"></span> Précédent </button>
  10423.               </div>
  10424.               <div class=\"col-md-6 col-6 text-right\">
  10425.                 <button type=\"button\" class=\"button-hover\" id=\"submit-service-choice\" name=\"button\"> Enregistrer <span class=\"fa fa-arrow-right\"></span></button>
  10426.               </div>
  10427.             </div>
  10428.           </div>
  10431.               <div class=\"stepper-item-2\">
  10432.                 <div class=\"row text-left\">
  10433.                 
  10434.                 <div class=\"col-sm-12 offset-md-1 col-md-10\">
  10435. \t\t\t\t\t\t    <form method=\"post\" action=\"#!\" class=\"formmodal_inscription_newletter\" style=\"color: #333;\">
  10436.                   <div id=\"sommaire_commande\">
  10437.                     <h2>Souscription Offre Premium - 22 500 XAF/mois</h2>
  10438.                     <input type=\"hidden\" name=\"offreClient\" id=\"\"/>
  10439.                   </div>
  10440.                 <div class=\"row\" style=\"margin: 0px -15px;\">
  10441.                     <div class=\"col-md-6\">
  10442.                       <div class=\"form-group\">
  10443.                         <input type=\"text\" class=\"form-control\" name=\"usernom\" id=\"prenom_client\" placeholder=\"Nom\" required=\"\">
  10444.                       </div>
  10445.                     </div>
  10446.                     <div  class=\"col-md-6\">
  10447.                       <div class=\"form-group\">
  10448.                         <input type=\"text\" class=\"form-control\" name=\"userprenom\" id=\"prenom_client\" placeholder=\"Prenom\" required=\"\">
  10449.                       </div>
  10450.                     </div>
  10451.                 </div>
  10453.                 <div class=\"form-group\">
  10454.                   <input type=\"email\" class=\"form-control\" name=\"email\" id=\"email_client\" placeholder=\"Votre E-mail\" required=\"\">
  10455.                 </div>
  10457.                 <div class=\"form-group\">
  10458.                   <label for=\"number_client\">Téléphone avec code indicatif: ex: +237 658 45 52 41</label>
  10459.                   <input type=\"text\" class=\"form-control\" name=\"number\" id=\"number_client\" placeholder=\"Numéro de Téléphone\" required=\"\">
  10460.                 </div>
  10462.                 <div class=\"form-group\">
  10463.                   <label for=\"typecontact_client\">Comment souhaitez-vous être contacter</label>
  10464.                   <select class=\"form-control\" name=\"typeContact\"  id=\"typecontact_client\" style=\"width: 100%;\">
  10465.                     <option value=\"appelonly\">Appel Uniquement</option>
  10466.                     <option value=\"emailonly\">Email Uniquement</option>
  10467.                   </select>
  10468.                 </div>
  10470.                 <div class=\"form-group\">
  10471.                   <label for=\"calldate_client\">Quand souhaitez vous être contactez ?</label>
  10472.                   <div class=\"row\" style=\"margin: 0px -15px;\">
  10473.                     <div class=\"col-md-6\">
  10474.                       <input type=\"date\" class=\"form-control\" name=\"calldate\" id=\"calldate_client\" required=\"\">
  10475.                     </div>
  10476.                     <div class=\"col-md-6\">
  10477.                       <input type=\"time\" class=\"form-control\" name=\"calltime\" id=\"calldate_client\" required=\"\">
  10478.                     </div>
  10479.                   </div>
  10480.                 </div>
  10482.                 <div class=\"form-group mb-3\">
  10483.                   <textarea class=\"form-control\" name=\"website\" rows=\"3\" placeholder=\"Que pouvons nous faire pour vous ?\"></textarea>
  10484.                 </div>
  10486.                 <!--div class=\"form-group text-center\">
  10487.                   <button class=\"btn-home btn-4 btn-mulberry\">
  10488.                     C'est parti
  10489.                   </button>
  10490.                 </div -->
  10492.                 <div class=\"row\">
  10493.                   <div class=\"col-md-6 col-6 text-left\" style=\"padding: 0px;\">
  10494.                     <button type=\"button\" class=\"button-hover\" name=\"button\" onclick=\"backOffertList()\"><span class=\"fa fa-arrow-left\"></span> Précédent </button>
  10495.                   </div>
  10496.                   <div class=\"col-md-6 col-6 text-right\" style=\"padding: 0px;\">
  10497.                     <button type=\"submit\" class=\"button-hover\" id=\"submit-service-choice\" name=\"button\"> Suivant <span class=\"fa fa-arrow-right\"></span></button>
  10498.                   </div>
  10499.                 </div>
  10500. \t\t\t\t\t\t
  10501. \t\t\t\t\t\t</form>
  10503. \t\t\t\t\t\t</div>
  10504. \t\t\t\t\t\t<div class=\"clearfix\"></div>
  10505. \t\t\t\t\t</div>
  10507. \t\t\t\t</div>
  10508.       </div>
  10510. \t\t\t\t<div style=\"col-md-12\">
  10511. \t\t\t\t\t<div class=\"text-center form-alert-top\" style=\"\">
  10512. \t\t\t\t\t\t<img src=\"{{ asset('template/images/images-newsletter.jpg') }}\" alt=\"\" style=\"height: 60px;\">
  10514. \t\t\t\t\t</div>
  10515. \t\t\t\t</div>
  10516. \t\t\t</div>
  10517. \t\t</div>
  10518. \t</div>
  10519. </div>
  10522. \t<div class=\"content-alert-action-market-user\" value=\"0\" name=\"0\" style=\"display: none;\"></div>
  10524. \t<div class=\"panel-result-action-market-user\" style=\"display: none; position: fixed; z-index: 90000; width: 100%; text-align: center; top: 40%;\">
  10525. \t\t<span style=\"display: inline-block; width: 80px; height: 80px; background: transparent; text-align: center; padding-top: 25px;\">
  10526. \t\t\t<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>
  10527. \t\t</span>
  10528. \t</div>
  10530.     {{ render(controller(\"App\\\\Controller\\\\General\\\\Template\\\\MenuController:cardmenu\")) }}
  10532.   <div class=\"modal fade\" data-backdrop=\"true\" id=\"modal-souscription-offert\">
  10533. \t<div class=\"modal-dialog modal-lg\" style=\"border-radius: 10px;\">
  10534. \t<div class=\"modal-content\" style=\"border-radius: 10px; margin: 0px;\">
  10535. \t
  10536.   {{ render(controller(\"App\\\\Controller\\\\General\\\\Template\\\\MenuController:headermodal\", {'title': ''})) }}
  10537. \t\t
  10538. \t\t<div class=\"modal-body\" style=\"background: #f5f7f8!important; padding: 15px 0px;\">
  10539. \t\t\t<div class=\"row\">
  10540. \t\t\t  <div class=\"col-md-12\">
  10541. \t\t\t\t<div class=\"wait-chargement-content-module\" style=\"text-align: center; padding-top: 30px;\">
  10542. \t\t\t\t<h5>
  10543. \t\t\t\t\tPatientez un moment pendant le chargement des données</br>
  10544. \t\t\t\t\t<img src=\"{{ asset('template/images/loader1.gif') }}\" alt=\"image\" style=\"height: 60px; width: 60px;\">
  10545.         </h5>
  10546. \t\t\t\t</div>
  10548. \t\t\t\t<div class=\"content-module-loading\" style=\"display: none;\">
  10550. \t\t\t\t</div>
  10551. \t\t\t  </div>
  10552. \t\t\t</div>
  10553. \t\t</div>
  10554. \t\t<div class=\"modal-footer color-top\" style=\"text-align: right; border-top: 4px solid #37c0fb; display: block;\">
  10555. \t\t\t{% include \"Theme/General/Template/Menu/social.html.twig\" %}
  10556. \t\t</div>
  10557. \t</div>
  10558. \t</div>
  10559. \t</div>
  10561. <aside>
  10562.   <div class=\"outer-close toggle-overlay\">
  10563. \t<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>
  10566.   <div style=\"position: fixed; z-index: 3; bottom: 0px; width: 100%; left: 0px; background: #fff; padding: 7px 10px;\">
  10567. \t<div style=\"font-size: 12px;\">© 2014 - {{ \"now\"|date('Y') }} - {{ site }}</div>
  10568.   </div>
  10569.   </div>
  10571.   <div class=\"row content-article-tech\">
  10573.   </div>
  10574. </aside>
  10576. {{ render(controller(\"App\\\\Controller\\\\General\\\\Template\\\\MenuController:footer\", {'position': 'accueil'})) }}
  10579. <!-- Jquery -->
  10580. <script src=\"{{ asset('template/js/jquery-migrate-3.0.0.js') }}\"></script>
  10582. <script src=\"{{ asset('template/js/jquery-ui.min.js') }}\"></script>
  10583. <!-- Popper JS -->
  10584. <script src=\"{{ asset('template/js/popper.min.js') }}\"></script>
  10585. <!-- Bootstrap JS -->
  10586. <script src=\"{{ asset('template/js/bootstrap.min.js') }}\"></script>
  10588. <!-- Slicknav JS -->
  10589. <script src=\"{{ asset('template/js/slicknav.min.js') }}\"></script>
  10591. <!-- Magnific Popup JS -->
  10592. <script src=\"{{ asset('template/js/magnific-popup.js') }}\"></script>
  10593. <!-- Waypoints JS -->
  10594. <script src=\"{{ asset('template/js/waypoints.min.js') }}\"></script>
  10595. <!-- Countdown JS -->
  10596. <script src=\"{{ asset('template/js/finalcountdown.min.js') }}\"></script>
  10597. <!-- Nice Select JS -->
  10598. <script src=\"{{ asset('template/js/nicesellect.js') }}\"></script>
  10599. <!-- Flex Slider JS -->
  10600. <script src=\"{{ asset('template/js/flex-slider.js') }}\"></script>
  10601. <!-- ScrollUp JS -->
  10602. <script src=\"{{ asset('template/js/scrollup.js') }}\"></script>
  10603. <!-- Onepage Nav JS -->
  10604. <script src=\"{{ asset('template/js/onepage-nav.min.js') }}\"></script>
  10605. <!-- Easing JS -->
  10606. <script src=\"{{ asset('template/js/easing.js') }}\"></script>
  10607. <!-- Active JS -->
  10608. <script src=\"{{ asset('template/js/active.js') }}\"></script>
  10609. <script src=\"{{ asset('autocomplete/js/jquery.auto-complete.js') }}\" type=\"text/javascript\"></script>
  10610. {% block srcjavascript %}
  10612. {% endblock %}
  10614. <script type=\"text/javascript\">
  10616. function modalSusccriptionSetting(itemsetting)
  10617. {
  10618.   \$('.select-cards .select').attr('data-selected', false);
  10619.   //alert(itemsetting)
  10621.   if(itemsetting == \"discovery\")
  10622.   {
  10623.     \$('#item-discovery-online').attr('data-selected', true);
  10624.     \$('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting(\"'+itemsetting+'\")');
  10626.     \$(\"#sommaire_commande h2\").html(\"Souscription Offre Discovery Online - 3000 {{ devise }}/mois\");
  10627.     \$(\"#sommaire_commande input\").attr(\"value\",\"discovery\");
  10628.   }else if(itemsetting == \"professional\")
  10629.   {
  10630.     \$('#item-professional-desktop').attr('data-selected', true);
  10631.     \$('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting(\"'+itemsetting+'\")');
  10633.     \$(\"#sommaire_commande h2\").html(\"Souscription Offre Professional Desktop - 12 500 {{ devise }}/mois\");
  10634.     \$(\"#sommaire_commande input\").attr(\"value\",\"professional\");
  10636.   }else if(itemsetting == \"premium\")
  10637.   {
  10638.     \$('#item-premium-desktop').attr('data-selected', true);
  10639.     \$('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting(\"'+itemsetting+'\")');
  10641.     \$(\"#sommaire_commande h2\").html(\"Souscription Offre Premium Desktop - 12 500 {{ devise }}/mois\");
  10642.     \$(\"#sommaire_commande input\").attr(\"value\",\"premium\");
  10644.   }else{
  10645.     //\$('#item-contact').attr('data-selected', true);
  10646.     //\$('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting(\"'+itemsetting+'\")');
  10648.     //\$(\"#sommaire_commande h2\").html(\"Contactez le service client\");
  10649.     //\$(\"#sommaire_commande input\").attr(\"value\",\"contact\");
  10651.     \$('#item-professional-desktop').attr('data-selected', true);
  10652.     \$('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting(\"professional\")');
  10654.     \$(\"#sommaire_commande h2\").html(\"Souscription Offre Professional Desktop - 12 500 {{ devise }}/mois\");
  10655.     \$(\"#sommaire_commande input\").attr(\"value\",\"professional\");
  10656.   }
  10657.   if(itemsetting != \"contact\")
  10658.   {
  10659.     \$(\".stepper-item-1\").hide();
  10660.     \$(\".stepper-item-2\").show();
  10661.     \$(\"#stepper-indicator-1\").removeClass(\"active\");
  10662.     \$(\"#stepper-indicator-2\").addClass(\"active\");
  10663.     \$(\"#stepper-indicator-1\").addClass(\"complete\");
  10664.   }
  10665. }
  10667. var select_card = document.querySelectorAll(\".select\");
  10669. var title = document.getElementById(\"title\");
  10670. var price = document.getElementById(\"price\");
  10672. var selected=2;
  10673. var reset = ()=>{
  10674. select_card.forEach((k)=>{
  10675.  k.setAttribute(\"data-selected\", \"false\");
  10676. })
  10677. }
  10679. select_card.forEach((a,i)=>{
  10680.   a.addEventListener(\"click\",(e)=>{
  10681.      reset();
  10682.    a.setAttribute(\"data-selected\", \"true\")
  10683.    var itemsetting = a.getAttribute('value');
  10684.    
  10685.    if(itemsetting == \"discovery\")
  10686.     {
  10687.       \$('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting(\"'+itemsetting+'\")');
  10688.     }else if(itemsetting == \"professional\")
  10689.     {
  10690.       \$('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting(\"'+itemsetting+'\")');
  10691.     }else if(itemsetting == \"premium\")
  10692.     {
  10693.       \$('#submit-service-choice').attr('onclick', 'modalSusccriptionSetting(\"'+itemsetting+'\")');
  10694.     }
  10695.     selected=i+1;
  10696.   })
  10697. })
  10699. function backOffertList(){
  10700.   \$(\".stepper-item-1\").show();
  10701.   \$(\".stepper-item-2\").hide();
  10703.   \$(\"#stepper-indicator-1\").addClass(\"active\");
  10704.   \$(\"#stepper-indicator-2\").removeClass(\"active\");
  10705.   \$(\"#stepper-indicator-1\").removeClass(\"complete\");
  10707. };
  10710. \t{% block javascript %}
  10712. \t{% endblock %}
  10714. \t\$(function(){
  10715. \t\t\$(\".dropdown-btn\").click(function(){
  10716. \t\t   var menu = \$(this).find('.dropdown__menu');
  10717. \t\t  if (menu) {
  10718. \t\t\tmenu.toggleClass(\"dropdown__menu--active\");
  10719. \t\t  }
  10720. \t\t});
  10721. \t\t
  10722. \t\t\$(\"form.update-method-paiement\").submit(function(){
  10723. \t\t\tvar email = \$(this).find('input').val();
  10724. \t\t\tif({{ regexmail }}.test(email))
  10725. \t\t\t{
  10726. \t\t\t\tvar height = (\$(window).height() + \$(window).scrollTop());
  10727. \t\t\t\tvar width = \$(window).width() + 100;
  10728. \t\t\t\tvar scrolltop = \$(window).scrollTop();
  10729. \t\t\t\t\$('.panel-result-action-market-user').show();
  10730. \t\t\t\t\$('.content-alert-action-market-user').show();
  10731. \t\t\t\t\$('.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>');
  10734. \t\t\t\t\$.post('{{ path('users_user_update_newsletter_list') }}', { email: email }, function(data){
  10735. \t\t\t\t  if(data == 0)
  10736. \t\t\t\t  {
  10737.             resetNotif();
  10738.             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>');
  10739. \t\t\t\t  }else if(data == 2){
  10740. \t\t\t\t\t  resetNotif();
  10741. \t\t\t\t\t  alertify.alert('<div style=\"margin-bottom: 20px;\"><span class=\"fa fa-frown-o\"></span> Echec, Cette adresse existe déjà !</div>');
  10742. \t\t\t\t  }else if(data == 3){
  10743. \t\t\t\t\t  resetNotif();
  10744. \t\t\t\t\t  alertify.alert('<div style=\"margin-bottom: 20px;\"><span class=\"fa fa-frown-o\"></span> Echec, L\\'adresse Email entrée est incorete !</div>');
  10745. \t\t\t\t  }else{
  10746.             resetNotif();
  10747.             alertify.alert('<div style=\"margin-bottom: 20px;\"><span class=\"fa fa-check\"></span> Opération effectuée avec succès !</div><div>'+data+'</div>');
  10748. \t\t\t\t  }
  10749. \t\t\t\t  \$('.panel-result-action-market-user').hide();
  10750. \t\t\t\t  \$('.content-alert-action-market-user').hide();
  10751. \t\t\t\t});
  10752. \t\t\t\t
  10753. \t\t\t}else{
  10754. \t\t\t\tresetNotif();
  10755. \t\t\t\talertify.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>');
  10756. \t\t\t}
  10757. \t\t\t
  10758. \t\t\treturn false;
  10759. \t\t});
  10762.     \$(\"form.formmodal_inscription_newletter\").submit(function(){
  10763. \t\t\tvar usernom = \$(this).find('input[name=\"usernom\"]').val();
  10764.       var userprenom = \$(this).find('input[name=\"userprenom\"]').val();
  10765.       var email = \$(this).find('input[name=\"email\"]').val();
  10766.       var website = \$(this).find('textarea[name=\"website\"]').val();
  10767.       var number = \$(this).find('input[name=\"number\"]').val();
  10768.       var offreClient = \$(this).find('input[name=\"offreClient\"]').val();
  10769.       var calldate = \$(this).find('input[name=\"calldate\"]').val();
  10770.       var calltime = \$(this).find('input[name=\"calltime\"]').val();
  10771.       var typeContact = \$(this).find('select[name=\"typeContact\"]').val();
  10773. \t\t\tif({{ regexmail }}.test(email))
  10774. \t\t\t{
  10775. \t\t\t\tvar height = (\$(window).height() + \$(window).scrollTop());
  10776. \t\t\t\tvar width = \$(window).width() + 100;
  10777. \t\t\t\tvar scrolltop = \$(window).scrollTop();
  10778. \t\t\t\t\$('.panel-result-action-market-user').show();
  10779. \t\t\t\t\$('.content-alert-action-market-user').show();
  10780. \t\t\t\t\$('.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>');
  10782. \t\t\t\t\$.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){
  10783. \t\t\t\t  if(data == 0)
  10784. \t\t\t\t  {
  10785. \t\t\t\t\tresetNotif();
  10786. \t\t\t\t\talertify.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>');
  10787. \t\t\t\t  }else{
  10788.             resetNotif();
  10789.             alertify.alert('<div style=\"margin-bottom: 20px;\"><span class=\"fa fa-check\"></span> Opération effectuée avec succès !</div>');
  10790.             \$('#sppmodal-container-newsletter').addClass('out');
  10791. \t\t\t      \$('body').removeClass('sppmodal-active');
  10792. \t\t\t\t  }
  10793. \t\t\t\t  \$('.panel-result-action-market-user').hide();
  10794. \t\t\t\t  \$('.content-alert-action-market-user').hide();
  10795. \t\t\t\t});
  10796. \t\t\t\t
  10797. \t\t\t}else{
  10798. \t\t\t\tresetNotif();
  10799. \t\t\t\talertify.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>');
  10800. \t\t\t}
  10801. \t\t\t
  10802. \t\t\treturn false;
  10803. \t\t});
  10805. \t\tvar box = \$('.menu-mob');
  10806. \t\tvar button = \$('.open-menu, .header-menu');
  10807. \t\tbutton.on('click', function(){
  10808. \t\t\tbox.toggleClass('activebtn');
  10809. \t\t});
  10811. \t\t\$(\"[data-toggle=popover]\").popover();
  10814. \t\tvar jsonresult =  {{ render(controller(\"App\\\\Controller\\\\Produit\\\\Produit\\\\ProduitController:autorechercheproduit\", { taille: 10})) }};
  10815.     
  10816. \t\tvar j = 0;
  10817. \t\tvar searchchoices = [];
  10818. \t\tfor(var n in jsonresult){
  10819. \t\t\tnom = jsonresult[n].nom;
  10820. \t\t\tdrapeau = jsonresult[n].drapeau;
  10821. \t\t\tslogan = jsonresult[n].slogan;
  10822. \t\t\trelation = jsonresult[n].relation;
  10823. \t\t\tlink = jsonresult[n].link;
  10824. \t\t\tnum = nom+\":\"+drapeau;
  10825. \t\t\tcourantelem = [nom,drapeau,slogan,relation,link];
  10826. \t\t\tsearchchoices[j] = courantelem;
  10827. \t\t\tj++;
  10828. \t\t}
  10830. \t\t\$('.recherche-plateforme').autoComplete({
  10831. \t\t\tminChars: 0,
  10832. \t\t\tsource: function(term, suggest){
  10833. \t\t\t\tterm = term.toLowerCase();
  10834. \t\t\t\tvar suggestions = [];
  10835. \t\t\t\tfor (i=0;i< searchchoices.length;i++)
  10836. \t\t\t\t\tif (~(searchchoices[i][0]+' '+searchchoices[i][1]).toLowerCase().indexOf(term)) suggestions.push(searchchoices[i]);
  10837. \t\t\t\tsuggest(suggestions);
  10838. \t\t\t},
  10839. \t\t\trenderItem: function (item, search){
  10840. \t\t\t\tsearch = search.replace(/[-\\/\\\\^\$*+?.()|[\\]{}]/g, '\\\\\$&');
  10841. \t\t\t\tvar re = new RegExp(\"(\" + search.split(' ').join('|') + \")\", \"gi\");
  10842. \t\t\t\treturn '<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>';
  10843. \t\t\t},
  10844. \t\t\tonSelect: function(e, term, item){
  10845. \t\t\t\t\$('.recherche-plateforme').val(item.data('langname'));
  10846. \t\t\t\tdocument.location.href= item.data('link');
  10847. \t\t\t},
  10848. \t\t\tcache: false
  10849. \t\t});
  10852. \t\tvar bloquerfunction = false;
  10853. \t\tfunction rechercheprojetanduser()
  10854. \t\t{
  10855. \t\tif( bloquerfunction == false && \$('.recherche-plateforme').val().length >= 1 )// on vérifier si l'utilisateur a entré plus de 5 caractères
  10856. \t\t{
  10857. \t\t  var libre = \$('.recherche-plateforme').attr('etat'); // on initialise la variable libre
  10858. \t\t  var donnee = \$('.recherche-plateforme').val();  //on récupère la donnée
  10859. \t\t  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
  10860. \t\t  \$('.recherche-plateforme').attr('etat',1); // on bloque d'autres recherches
  10861. \t\t  \$('.recherche-plateforme').attr('lastresult',donnee); // on enregistre la recherche effectuer.
  10862. \t\t\tsecondTimestamp = new Date().getTime();
  10863. \t\t\t\$.ajax({
  10864. \t\t\t\turl : '{{ path('produit_produit_auto_recherche_produits_andprojet_plateforme', {'taille': 300}) }}',
  10865. \t\t\t\ttype : 'POST',
  10866. \t\t\t\tdata : 'donnee='+ donnee +'&timestamp='+secondTimestamp+'',
  10867. \t\t\t\tdataType : 'json',
  10868. \t\t\t\tsuccess : function(data, statut){
  10869. \t\t\t\t\t  \$('.recherche-plateforme').attr('etat',0); // on libère d'autre recherches
  10870. \t\t\t\t\t  jsonresult = data;
  10871. \t\t\t\t\t\tj = 0;
  10872. \t\t\t\t\t\tsearchchoices = [];
  10873. \t\t\t\t\t\tfor(var n in jsonresult){
  10874. \t\t\t\t\t\t\tnom = jsonresult[n].nom;
  10875. \t\t\t\t\t\t\tdrapeau = jsonresult[n].drapeau;
  10876. \t\t\t\t\t\t\tslogan = jsonresult[n].slogan;
  10877. \t\t\t\t\t\t\trelation = jsonresult[n].relation;
  10878. \t\t\t\t\t\t\tlink = jsonresult[n].link;
  10879. \t\t\t\t\t\t\tnum = nom+\":\"+drapeau;
  10880. \t\t\t\t\t\t\tcourantelem = [nom,drapeau,slogan,relation,link];
  10881. \t\t\t\t\t\t\tsearchchoices[j] = courantelem;
  10882. \t\t\t\t\t\t\tj++;
  10883. \t\t\t\t\t\t}
  10884. \t\t\t\t\t  setTimeout(function() { rechercheprojetanduser(); }, 100);  // on relance la fonction après 200 ms.
  10885. \t\t\t\t}
  10886. \t\t\t});
  10888. \t\t  }else{
  10889. \t\t  setTimeout(function() { rechercheprojetanduser(); }, 100);
  10890. \t\t  }
  10891. \t\t}else{
  10892. \t\t\tsetTimeout(function() { rechercheprojetanduser(); }, 100);
  10893. \t\t}
  10894. \t\t}
  10896. \t\t\$('.recherche-plateforme').focus(function(){
  10897. \t\t\tbloquerfunction = false;
  10898. \t\t\trechercheprojetanduser();
  10899. \t\t});
  10901. \t\t\$('.open-scroll-bar-body').click(function(){
  10902. \t\t\t\$('aside').toggleClass('open');
  10903. \t\t\t\$('.content-article-tech').html('');
  10904. \t\t});
  10906. \t\t\$('.overlay-article-market').click(function(){
  10907. \t\t  var id = \$(this).attr('value');
  10909. \t\t  var height = (\$(window).height() + \$(window).scrollTop());
  10910. \t\t  var width = \$(window).width() + 100;
  10911. \t\t  var scrolltop = \$(window).scrollTop();
  10912. \t\t  \$('.panel-result-action-market-user').show();
  10913. \t\t  \$('.content-alert-action-market-user').show();
  10914. \t\t  \$('.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>');
  10916. \t\t  \$.post('{{ path('produit_service_detail_article_support') }}',{ id: id }, function(data){
  10917. \t\t\t  if(data != 0)
  10918. \t\t\t  {
  10919. \t\t\t\t  \$('.panel-result-action-market-user').hide();
  10920. \t\t\t\t  \$('.content-alert-action-market-user').hide();
  10922. \t\t\t\t  \$('.content-article-tech').html(data);
  10923. \t\t\t\t  \$('aside').toggleClass('open');
  10924. \t\t\t  }else{
  10925. \t\t\t\t  resetNotif();
  10926. \t\t\t\t  alertify.alert(\"Echec, Une erreur a été rencontrée lors de l\\'enregistrement de la commande.\");
  10927. \t\t\t\t  \$('.panel-result-action-market-user').hide();
  10928. \t\t\t\t  \$('.content-alert-action-market-user').hide();
  10929. \t\t\t  }
  10930. \t\t  });
  10931. \t\t});
  10933. \t});
  10934. </script>
  10937. <!-- Go to www.addthis.com/dashboard to customize your tools -->
  10938. <!--script type=\"text/javascript\" src=\"//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-595f8e9fdd98b073\"></script-->
  10939. <!--Start of Tawk.to Script-->
  10940. <script type=\"text/javascript\">
  10941. \tvar Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
  10942. \t(function(){
  10943. \tvar s1=document.createElement(\"script\"),s0=document.getElementsByTagName(\"script\")[0];
  10944.     s1.async=true;
  10945.     s1.src='https://embed.tawk.to/5f037606760b2b560e6fd915/default';
  10946.     s1.charset='UTF-8';
  10947.     s1.setAttribute('crossorigin','*');
  10948.     s0.parentNode.insertBefore(s1,s0);
  10949. \t})();
  10950. </script>
  10951. <!--End of Tawk.to Script-->
  10952. </body>
  10953. </html>
  10954. ", "Theme/layoutbase.html.twig", "/home/afhunt/domains/mbill.afhunt.com/public_html/market/templates/Theme/layoutbase.html.twig");
  10955.     }
  10956. }