templates/Theme/layoutoffert.html.twig line 1589

Open in your IDE?
  1. <!DOCTYPE HTML>
  2. <html class="windows x86 js win7up x64 is-modern-browser loaded" lang="fr" dir="ltr" data-latest-firefox="71.0" data-esr-versions="68.3.0" data-gtm-container-id="GTM-MW3R8V" data-gtm-page-id="Homepage" data-stub-attribution-rate="1.0">
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  5.   <meta name="viewport" content="width=device-width, initial-scale=1"/>
  6.   {% block meta %} {% endblock %}
  7.   <link rel="icon" type="image/png" sizes="196x196" href="https://www.mozilla.org/media/img/favicons/mozilla/favicon-196x196.2af054fea211.png"/>
  8.   <!-- For Windows Phone -->
  9.   <title>{% block title %}{{ site }}{% endblock %}</title>
  10.   {% block stylesheets %}
  11.   
  12.     <script type="text/javascript" src="{{ asset('templatehome/js/site.133e404d326d.js') }}" charset="utf-8"></script>
  13.     <script src="{{ asset('templatehome/js/jquery-3.4.1.min.js') }}"></script>
  14.     <script src="https://assets.website-files.com/5d76680dc57fa0f42dcfe0c5/js/lottieflow.b96c071c3.js" type="text/javascript"></script>
  15.     <link rel="icon" type="image/png" sizes="196x196" href="https://www.mozilla.org/media/img/favicons/mozilla/favicon-196x196.2af054fea211.png"/>
  16.     <link rel="stylesheet" type="text/css" href="{{ asset('template/css/fontsaps.css') }}" />
  17.     <link href="{{ asset('template/css/bootstrap.min.css') }}" rel="stylesheet"/>
  18.     <link href="{{ asset('template/css/font-awesome.min.css') }}" rel="stylesheet"/>
  19.     <link href="{{ asset('templatehome/css/protocol-core.f0fd276209f6.css') }}" rel="stylesheet" type="text/css"/>
  20.     <link href="{{ asset('templatehome/css/home-2018.1f2e7180ad73.css') }}" rel="stylesheet" type="text/css"/>
  21.     <!--===============================================================================================-->
  22.     <link rel="stylesheet" type="text/css" href="{{ asset('template/login/vendor/bootstrap/css/bootstrap.min.css') }}"/>
  23.     <style>
  24.         .my-fixed-nav{
  25.             position: fixed!important; top: 0px!important; z-index: 100; width: 100%!important;
  26.             box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  27.         }
  28.         .lightblue-fullback{background-color:#f7f9fc;border-top:1px solid #d9e1ed;border-bottom:1px solid #d9e1ed}
  29.         .minicallout span{padding:20px 0}
  30.         .minicallout span{display:block;margin:0 auto;padding:50px 0 50px 0;text-align:center}.minicallout span img{padding-right:10px}
  31.         
  32.         .c-navigation-breadcrumbs__directory {
  33.           display: flex;
  34.         }
  35.         .c-navigation-breadcrumbs__link:link {
  36.           color: #007c89;
  37.         }
  38.         .c-navigation-breadcrumbs__link:link:hover {
  39.           background-image: linear-gradient(currentColor, currentColor);
  40.           background-size: auto 1px;
  41.           background-repeat: repeat-x;
  42.           background-position: 0 calc(50% + 1ex);
  43.         }
  44.         @media (max-width: 500px) {
  45.           .c-navigation-breadcrumbs__item:not(:nth-last-child(2)) {
  46.             display: none;
  47.           }
  48.           .c-navigation-breadcrumbs__link:before {
  49.             display: inline-block;
  50.             content: '\200b';
  51.             background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23007c89' stroke-width='2' stroke-linecap='round' stroke-linejoin='round%5C'%3E%3Cline x1='19' y1='12' x2='5' y2='12'%3E%3C/line%3E%3Cpolyline points='12 19 5 12 12 5'%3E%3C/polyline%3E%3C/svg%3E") center/16px 16px no-repeat;
  52.             width: 16px;
  53.           }
  54.         }
  55.         @media (min-width: 501px) {
  56.           .c-navigation-breadcrumbs__item:nth-last-child(n+2):after {
  57.             display: inline-block;
  58.             content: '\200b';
  59.             background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round%5C'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") center/16px 16px no-repeat;
  60.             width: 16px;
  61.             margin: 0 8px;
  62.           }
  63.           .c-navigation-breadcrumbs__link {
  64.             display: block;
  65.             float: left;
  66.           }
  67.         }
  68.         .breadcrumbs {
  69.           list-style: none;
  70.           margin: 0px 0px 16px 0px;
  71.           padding: 0;
  72.         }
  73.         .breadcrumbs li {
  74.           list-style: none;
  75.           margin: 0;
  76.           padding: 0;
  77.           display: block;
  78.           float: left;
  79.           font-family: Montserrat,sans-serif;
  80.           text-transform: capitalize;
  81.           font-weight: 700;
  82.           letter-spacing: .05em;
  83.           line-height: 20px;
  84.           color: hsl(0, 0%, 30%);
  85.         }
  86.         .breadcrumbs li a {
  87.           display: block;
  88.           padding: 0 40px 0 0px;
  89.           color: hsl(0, 0%, 30%);
  90.           text-decoration: none;
  91.           height: 20px;
  92.           position: relative;
  93.           perspective: 700px;
  94.         }
  95.         .breadcrumbs li a:after {
  96.           content: '';
  97.           width: 20px;
  98.           height: 20px;
  99.           border-color: #333;
  100.           border-style: solid;
  101.           border-width: 1px 1px 0 0;
  102.           
  103.           -webkit-backface-visibility: hidden;
  104.           outline: 1px solid transparent;
  105.           
  106.           position: absolute;
  107.           right: 20px;
  108.           -webkit-transition: all .15s ease;
  109.              -moz-transition: all .15s ease;
  110.               -ms-transition: all .15s ease;
  111.                   transition: all .15s ease;
  112.           -webkit-transform: rotateZ(45deg) skew(10deg, 10deg);
  113.              -moz-transform: rotateZ(45deg) skew(10deg, 10deg);
  114.               -ms-transform: rotateZ(45deg) skew(10deg, 10deg);
  115.                   transform: rotateZ(45deg) skew(10deg, 10deg);
  116.         }
  117.         .breadcrumbs li a:hover:after {
  118.           right: 15px;
  119.           -webkit-transform: rotateZ(45deg) skew(-10deg, -10deg);
  120.              -moz-transform: rotateZ(45deg) skew(-10deg, -10deg);
  121.               -ms-transform: rotateZ(45deg) skew(-10deg, -10deg);
  122.                   transform: rotateZ(45deg) skew(-10deg, -10deg);
  123.         }
  124.         .list-group-item:hover{
  125.             background: #f2f2f2;
  126.             cursor: pointer;
  127.         }
  128.         
  129.     .my-svg {
  130.       position: absolute;
  131.     }
  132.     .demo {
  133.       height: 150px;
  134.       background: rgba(0,0,0,0.1);
  135.       margin-bottom: 20px;
  136.     }
  137.     .demo__buttons {
  138.       position: absolute;
  139.       top: 50%;
  140.       left: 50%;
  141.       width: 200px;
  142.       height: 200px;
  143.       -webkit-transform: translate(-100px, -100px);
  144.               transform: translate(-100px, -100px);
  145.       -webkit-filter: url("#goo");
  146.               filter: url("#goo");
  147.     }
  148.     .demo__buttons.step-0 .demo__social-btn-1, .demo__buttons.step-0 .demo__social-btn-2, .demo__buttons.step-0 .demo__social-btn-3, .demo__buttons.step-0 .demo__social-btn-4 {
  149.       -webkit-transform: translate3d(-50px, -50px, 0);
  150.               transform: translate3d(-50px, -50px, 0);
  151.     }
  152.     .demo__buttons.step-1 .demo__social-btn-1 {
  153.       -webkit-transform: translate3d(-50px, -50px, 0);
  154.               transform: translate3d(-50px, -50px, 0);
  155.     }
  156.     .demo__buttons.step-1 .demo__social-btn-2, .demo__buttons.step-1 .demo__social-btn-3, .demo__buttons.step-1 .demo__social-btn-4 {
  157.       -webkit-transform: translate3d(-50px, 50px, 0);
  158.               transform: translate3d(-50px, 50px, 0);
  159.     }
  160.     .demo__buttons.step-2 .demo__social-btn-1 {
  161.       -webkit-transform: translate3d(-50px, -50px, 0);
  162.               transform: translate3d(-50px, -50px, 0);
  163.     }
  164.     .demo__buttons.step-2 .demo__social-btn-2 {
  165.       -webkit-transform: translate3d(-50px, 50px, 0);
  166.               transform: translate3d(-50px, 50px, 0);
  167.     }
  168.     .demo__buttons.step-2 .demo__social-btn-3, .demo__buttons.step-2 .demo__social-btn-4 {
  169.       -webkit-transform: translate3d(50px, 50px, 0);
  170.               transform: translate3d(50px, 50px, 0);
  171.     }
  172.     .demo__buttons.step-3 .demo__social-btn-1 {
  173.       -webkit-transform: translate3d(-50px, -50px, 0);
  174.               transform: translate3d(-50px, -50px, 0);
  175.     }
  176.     .demo__buttons.step-3 .demo__social-btn-2 {
  177.       -webkit-transform: translate3d(-50px, 50px, 0);
  178.               transform: translate3d(-50px, 50px, 0);
  179.     }
  180.     .demo__buttons.step-3 .demo__social-btn-3 {
  181.       -webkit-transform: translate3d(50px, 50px, 0);
  182.               transform: translate3d(50px, 50px, 0);
  183.     }
  184.     .demo__buttons.step-3 .demo__social-btn-4 {
  185.       -webkit-transform: translate3d(50px, -50px, 0);
  186.               transform: translate3d(50px, -50px, 0);
  187.     }
  188.     .demo__social-btn {
  189.       position: absolute;
  190.       left: 65px;
  191.       top: 65px;
  192.       width: 70px;
  193.       height: 70px;
  194.       text-align: center;
  195.       line-height: 70px;
  196.       font-size: 30px;
  197.       background: white;
  198.       color: #261758;
  199.       border-radius: 50%;
  200.       cursor: pointer;
  201.       transition: all 0.2s ease;
  202.       z-index: 1000;
  203.     }
  204.     .demo__social-btn:hover {
  205.       color: #106279;
  206.       box-shadow: 0 0 15px white;
  207.     }
  208.     .demo__open-btn {
  209.       position: absolute;
  210.       left: 65px;
  211.       top: 65px;
  212.       width: 70px;
  213.       height: 70px;
  214.       text-align: center;
  215.       line-height: 70px;
  216.       font-weight: 700;
  217.       font-size: 30px;
  218.       font-family: sans-serif;
  219.       background: white;
  220.       color: #261758;
  221.       border-radius: 50%;
  222.       cursor: pointer;
  223.       transition: all 0.2s ease;
  224.       z-index: 1001;
  225.     }
  226.     .demo__open-btn:hover {
  227.       color: #106279;
  228.       box-shadow: 0 0 15px white;
  229.     }
  230.     
  231.     
  232.     /*
  233.     ---------------------------------------------
  234.     Start Modal SPP
  235.     -------------------------------------------------
  236.     */
  237.     /*
  238.     html.sppmodal-active, body.sppmodal-active {
  239.       overflow: hidden;
  240.     }
  241.     */
  242.     .sppmodal-container {
  243.       position: fixed;  /*Mettre à fixed si la classe sppmodal-active est appliqué à l'élément body*/
  244.       display: table;
  245.       height:100%;
  246.       width: 100%;
  247.       top: 0;
  248.       left: 0;
  249.       transform: scale(0);
  250.       z-index: 1000;
  251.     }
  252.     .sppmodal-container.one {
  253.       transform: scaleY(0.01) scaleX(0);
  254.       animation: unfoldIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  255.     }
  256.     .sppmodal-container.one .sppmodal-background .sppmodal {
  257.       transform: scale(0);
  258.       animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  259.     }
  260.     .sppmodal-container.one.out {
  261.       transform: scale(1);
  262.       animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  263.     }
  264.     .sppmodal-container.one.out .sppmodal-background .sppmodal {
  265.       animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  266.     }
  267.     .sppmodal-container .sppmodal-background{
  268.       display: table-cell;
  269.       background: rgba(247, 248, 251,0.8)!important;
  270.       text-align: center;
  271.       vertical-align: middle;
  272.     }
  273.     .sppmodal-container .sppmodal-background .sppmodal {
  274.         padding: 0px 0px 55px 0px;
  275.         display: inline-block;
  276.         position: relative;
  277.         min-height: 300px;
  278.         width: 500px;
  279.         font-family: Arial;
  280.         font-size: 13px;
  281.         font-weight: 400;
  282.         text-align: center;
  283.         line-height: 18px;
  284.         color:  #333;
  285.         background-color: #FFFFFF;
  286.         background-repeat: repeat;
  287.         background-position: left top;
  288.         border: 1px solid  #F1F3F9;
  289.         border-radius: 4px;
  290.         box-shadow: 0px 2px 5px 1px #999999;
  291.     }
  292.     .sppmodal-container .sppmodal-background .sppmodal h2 {
  293.       font-size: 25px;
  294.       line-height: 25px;
  295.       margin-bottom: 15px;
  296.     }
  297.     .sppmodal-container .sppmodal-background .sppmodal p {
  298.       font-size: 18px;
  299.       line-height: 22px;
  300.     }
  301.     .sppmodal-container .sppmodal-background .sppmodal .sppmodal-svg {
  302.       position: absolute;
  303.       top: 0;
  304.       left: 0;
  305.       height: 100%;
  306.       width: 100%;
  307.       border-radius: 3px;
  308.     }
  309.     .sppmodal-container .sppmodal-background .sppmodal .sppmodal-svg rect {
  310.       stroke: #fff;
  311.       stroke-width: 2px;
  312.       stroke-dasharray: 778;
  313.       stroke-dashoffset: 778;
  314.     }
  315.     @keyframes unfoldIn {
  316.       0% {
  317.         transform: scaleY(0.005) scaleX(0);
  318.       }
  319.       50% {
  320.         transform: scaleY(0.005) scaleX(1);
  321.       }
  322.       100% {
  323.         transform: scaleY(1) scaleX(1);
  324.       }
  325.     }
  326.     @keyframes unfoldOut {
  327.       0% {
  328.         transform: scaleY(1) scaleX(1);
  329.       }
  330.       50% {
  331.         transform: scaleY(0.005) scaleX(1);
  332.       }
  333.       100% {
  334.         transform: scaleY(0.005) scaleX(0);
  335.       }
  336.     }
  337.     @keyframes zoomIn {
  338.       0% {
  339.         transform: scale(0);
  340.       }
  341.       100% {
  342.         transform: scale(1);
  343.       }
  344.     }
  345.     @keyframes zoomOut {
  346.       0% {
  347.         transform: scale(1);
  348.       }
  349.       100% {
  350.         transform: scale(0);
  351.       }
  352.     }
  353.     /*
  354.     --------------------------------------
  355.     End Modal SPP
  356.     --------------------------------------
  357.     */
  358.     .silly_scrollbar {
  359.         height:750px;
  360.         -webkit-box-sizing: border-box;
  361.         padding:0 14px;
  362.         overflow:auto;
  363.         paddin-top: 15px;
  364.     }
  365.     .silly_scrollbar::-webkit-scrollbar {
  366.         width: 12px;
  367.     }
  368.      
  369.     .silly_scrollbar::-webkit-scrollbar-track {
  370.         -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
  371.         border-radius: 10px;
  372.     }
  373.      
  374.     .silly_scrollbar::-webkit-scrollbar-thumb {
  375.         border-radius: 10px;
  376.         -webkit-box-shadow: inset 0 0 6px red; 
  377.     }
  378.     .silly_scrollbar::-webkit-scrollbar-thumb:hover {
  379.         -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
  380.     }
  381.     .list-group-item {
  382.       user-select: none;
  383.     }
  384.     .list-group input[type="checkbox"] {
  385.       display: none;
  386.     }
  387.     .list-group input[type="checkbox"] + .list-group-item {
  388.       cursor: pointer;
  389.     }
  390.     .list-group input[type="checkbox"] + .list-group-item:before {
  391.       content: "\2713";
  392.       color: transparent;
  393.       font-weight: bold;
  394.       margin-right: 1em;
  395.     }
  396.     .list-group input[type="checkbox"]:checked + .list-group-item {
  397.       background-color: #0275D8;
  398.       color: #FFF;
  399.     }
  400.     .list-group input[type="checkbox"]:checked + .list-group-item:before {
  401.       color: inherit;
  402.     }
  403.     .list-group input[type="radio"] {
  404.       display: none;
  405.     }
  406.     .list-group input[type="radio"] + .list-group-item {
  407.       cursor: pointer;
  408.     }
  409.     .list-group input[type="radio"] + .list-group-item:before {
  410.       content: "\f096";
  411.       color: transparent;
  412.       font-weight: bold;
  413.       margin-right: 1em;
  414.       color: #333;
  415.       font-size: 25px!important;
  416.       font-weight: bold!important;
  417.       margin-top: 5px;
  418.     }
  419.     .list-group input[type="radio"]:checked + .list-group-item:before {
  420.       content: "\2713";
  421.       color: transparent;
  422.       font-weight: bold;
  423.       margin-right: 1em;
  424.       font-size: 16px!important;
  425.     }
  426.     .list-group input[type="radio"]:checked + .list-group-item {
  427.       background-color: #0275D8;
  428.       color: #FFF;
  429.     }
  430.     .list-group input[type="radio"]:checked + .list-group-item:before {
  431.       color: inherit;
  432.     }
  433.     .progressbar {
  434.       counter-reset: step;
  435.     }
  436.     .progressbar li {
  437.       list-style: none;
  438.       display: inline-block;
  439.       width: 30.33%;
  440.       position: relative;
  441.       text-align: center;
  442.       cursor: pointer;
  443.     }
  444.     .progressbar li:before {
  445.       content: counter(step);
  446.       counter-increment: step;
  447.       width: 30px;
  448.       height: 30px;
  449.       line-height : 30px;
  450.       border: 1px solid #ddd;
  451.       border-radius: 100%;
  452.       display: block;
  453.       text-align: center;
  454.       margin: 0 auto 0px auto;
  455.       background-color: #fff;
  456.       position: relative;
  457.       z-index: 1;
  458.     }
  459.     .progressbar li:after {
  460.       content: "";
  461.       position: absolute;
  462.       width: 100%;
  463.       height: 1px;
  464.       background-color: #ddd;
  465.       top: 15px;
  466.       left: -50%;
  467.       z-index : 0;
  468.     }
  469.     .progressbar li:first-child:after {
  470.       content: none;
  471.     }
  472.     .progressbar li.active {
  473.       color: green;
  474.       font-weight: bold;
  475.     }
  476.     .progressbar li.active:before {
  477.       border-color: green;
  478.     } 
  479.     .progressbar li.active + li:after {
  480.       background-color: green;
  481.     }
  482.     .disabled-btn{
  483.         cursor: not-allowed;
  484.         text-decoration: none;
  485.         text-align: center;
  486.         background: #D6D9E4!important; pointer-events: none;
  487.     }
  488.     .header-wave {
  489.       position: relative;
  490.       min-height: 200px;
  491.       background: transparent;
  492.       background-image: linear-gradient(155deg, #f4f4f4 0%, #f4f4f4 50%, #f4f4f4 100%);
  493.     }
  494.     .header-wave h1 {
  495.       color: white;
  496.     }
  497.     .svg-wave {
  498.       position: absolute;
  499.       bottom: 0;
  500.       width: 100%;
  501.       height: auto;
  502.     }
  503.         
  504.     .section-wave{
  505.         position: relative;
  506.         margin: 0;
  507.         padding: 0;
  508.         background: white;
  509.         width: 100%;
  510.         height: 200px;
  511.     }
  512.     
  513.     #worf{
  514.         position: absolute;
  515.         bottom: 0;
  516.         width: 100%;
  517.     }
  518.     
  519.     #worf path{
  520.       fill: url(#grad1)
  521.     }
  522.     section.section-2{
  523.         width: 100%;
  524.         height: 200px;
  525.         background: linear-gradient(to right, #dffdgg 0%,#f2f2f2 100%); 
  526.     }
  527. .popover {
  528.   position: relative;
  529.   z-index: 1;
  530.   box-sizing: border-box;
  531.   padding: 1em;
  532.   border: 1px solid #dadada;
  533.   background: #fff;
  534.   min-width: 100%;
  535. }
  536. .popover, .popover:before {
  537.   box-shadow: 0 0 2px rgba(0,0,0,0.2);  
  538. }
  539. .popover:before,
  540. .popover:after {
  541.   content: '';
  542.   display: block;
  543.   position: absolute;
  544.   width: 15px;
  545.   height: 15px;
  546.   border: 1px solid #dadada;
  547.   background: #fff;
  548.   -webkit-transform: rotate(45deg);
  549.   -moz-transform: rotate(45deg);
  550.   -ms-transform: rotate(45deg);
  551.   -o-transform: rotate(45deg);
  552.   transform: rotate(45deg);
  553. }
  554. .popover:before {
  555.   z-index: -1;
  556. }
  557. .popover.arrow-top:before,
  558. .popover.arrow-top:after {
  559.   bottom: 100%;
  560.   left: 20px;
  561.   margin-bottom: -7px; 
  562.   border-bottom: 0;
  563.   border-right: 0;
  564. }
  565. .popover.arrow-bottom:before,
  566. .popover.arrow-bottom:after {
  567.   top: 100%;
  568.   left: 20px;
  569.   margin-top: -7px; 
  570.   border-top: 0;
  571.   border-left: 0;
  572. }
  573. .popover.arrow-right:before,
  574. .popover.arrow-right:after {
  575.   top: 20px;
  576.   left: 100%;
  577.   margin-left: -7px; 
  578.   border-bottom: 0;
  579.   border-left: 0;
  580. }
  581. .popover.arrow-left:before,
  582. .popover.arrow-left:after {
  583.   top: 20px;
  584.   left: 0;
  585.   margin-left: -9px; 
  586.   border-top: 0;
  587.   border-right: 0;
  588. }
  589. .cardcode{border-radius:5px;box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.3);margin-bottom:20px}
  590. .cardcode.simple-image-cardcode{height:435px;background-size:cover!important;background-position:50%!important;position:relative;display:flex;justify-content:center;align-items:center}
  591. @media only screen and (max-width:800px){.cardcode.simple-image-cardcode{height:300px}}
  592. @media only screen and (max-width:600px){.cardcode.simple-image-cardcode{max-height:130px}.cardcode.simple-image-cardcode a h2{font-size:1.1rem!important}}
  593. .cardcode.simple-image-cardcode a{display:block;width:100%;text-decoration:none;color:#fff;z-index:4;text-align:center;height:100%;display:flex;justify-content:center;align-items:center}
  594. .cardcode.simple-image-cardcode a h2{font-size:3rem;width:80%}.cardcode.simple-image-cardcode:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);border-radius:5px}
  595. .cardcode.simple-image-cardcode.min-cardcode{width:100%;max-height:130px}.cardcode.simple-image-cardcode.min-cardcode h2{font-size:1.1rem}.cardcode.image-cardcode{width:100%;min-height:280px;position:relative;transition:all .5s;margin-bottom:50px;background-color:#fff}
  596. .cardcode.image-cardcode a.img{display:block;width:100%;text-align:center;height:150px}.cardcode.image-cardcode a.img span{display:block;margin:auto;width:95%;height:100%;box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.3);border-radius:5px;position:relative;top:-12px;transition:all .5s;background:url(/build/images/code.7e1bde1f.jpeg);background-size:cover!important;background-position:50%!important;background-repeat:no-repeat!important}
  597. .cardcode.image-cardcode a.title{color:#0f0f0f;text-decoration:none;transition:all .5s}.cardcode.image-cardcode a.title h2{font-size:1.2rem;padding-left:15px;padding-right:15px;margin-top:15px}
  598. .cardcode.image-cardcode a.title:hover{color:#585858}.cardcode.image-cardcode .infos{padding:20px;font-size:13px;display:flex;justify-content:space-between;color:#7b7b7b;position:absolute;bottom:0;left:-4px;right:-4px}
  599. .cardcode.image-cardcode .infos a{color:#7b7b7b;text-decoration:none;transition:all .5s}.cardcode.image-cardcode .infos a:hover{color:#949494}.cardcode.image-cardcode .infos span.stats span:not(:last-child){margin-right:15px}
  600. .cardcode.image-cardcode .infos span.stats i{margin-right:5px}.cardcode.image-cardcode:hover a.img span{transform:translateY(-7px)}
  601. /*===================== Begin Dropdowncarte ======================*/
  602. .dropdowncarte {
  603.     position: relative;
  604.     box-sizing: content-box;
  605.     max-width: 100%;
  606.     height: 1em;
  607.     padding: 18px 21px;
  608.     background-color: #fff;
  609.     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  610.   }
  611.   .dropdowncarte:hover svg {
  612.     transform: scale(1.1);
  613.   }
  614.   .dropdowncarte button {
  615.     position: absolute;
  616.     width: 100%;
  617.     height: 100%;
  618.     top: 0;
  619.     left: 0;
  620.     z-index: 3;
  621.     border: none;
  622.     outline: none;
  623.     background: none;
  624.     cursor: pointer;
  625.   }
  626.   .dropdowncarte button:focus ~ svg {
  627.     transform: rotate(-180deg);
  628.   }
  629.   .dropdowncarte .options {
  630.     position: absolute;
  631.     width: 100%;
  632.     top: 0;
  633.     left: 0;
  634.   }
  635.   .dropdowncarte input {
  636.     display: none;
  637.   }
  638.   .dropdowncarte input:checked + label {
  639.     display: block;
  640.     z-index: 2;
  641.     font-weight: 600;
  642.     transform: none !important;
  643.   }
  644.   .dropdowncarte label {
  645.     position: absolute;
  646.     width: 100%;
  647.     z-index: 1;
  648.     padding: 18px 21px;
  649.     line-height: 1;
  650.     background-color: #549cc4;
  651.     cursor: pointer;
  652.     color: #fff;
  653.     transition: background-color 0.2s, transform 0.2s ease;
  654.   }
  655.   .dropdowncarte label:hover {
  656.     background-color: #d6d6d6;
  657.   }
  658.   .dropdowncarte button:focus + .options input:not(:checked) + label, .dropdowncarte .options label:active, .dropdowncarte .options label:active ~ label {
  659.     transform: translateY(calc(var(--index) * 100%));
  660.   }
  661.   .dropdowncarte button:focus + .options input:checked + label ~ label, .dropdowncarte .options input:checked ~ label:active, .dropdowncarte .options input:checked ~ label:active ~ label {
  662.     transform: translateY(calc((var(--index) - 1) * 100%));
  663.   }
  664.   .dropdowncarte svg {
  665.     position: absolute;
  666.     width: 21px;
  667.     top: 25%;
  668.     right: 14px;
  669.     z-index: 2;
  670.     fill: currentColor;
  671.     transition: transform 0.1s;
  672.   }
  673.   .breadcrumbs-title{
  674.     font-family: Montserrat-ExtraBold;
  675.   }
  676.   .cover-text h2{
  677.       font-size: 25px!important;
  678.       font-family: OpenSans-SemiBold!important;
  679.       text-align: left;
  680.   }
  681.   .cover-text h4{
  682.       font-size: 13px!important;
  683.       font-family: OpenSans-Regular!important;
  684.       text-align: left;
  685.       color: green;
  686.   }
  687.   .position-current-user{
  688.     background: #444a92!important;
  689.     color: #fff!important;
  690.   }
  691.   .position-current-user strong{
  692.     color: #fff;
  693.   }
  694.   .position-current-user .ultra-small{
  695.     color: #ddd;
  696.   }
  697. /*======================End Dropdowncarte ===========================*/
  698. #demo {
  699.     margin: 20px auto;
  700.     max-width: 960px;
  701.   }
  702.   #demo h1 {
  703.     font-size: 2.4rem;
  704.     line-height: 3.2rem;
  705.     letter-spacing: 0;
  706.     font-weight: 300;
  707.     color: #212121;
  708.     text-transform: inherit;
  709.     margin-bottom: 1rem;
  710.     text-align: center;
  711.   }
  712.   #demo h2 {
  713.     font-size: 1.5rem;
  714.     line-height: 2.8rem;
  715.     letter-spacing: 0.01rem;
  716.     font-weight: 400;
  717.     color: #212121;
  718.     text-align: center;
  719.   }
  720.   .shadow-z-1 {
  721.     -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
  722.     -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
  723.     box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  724.   }
  725.   /* -- Material Design Table style -------------- */
  726.   .table {
  727.     width: 100%;
  728.     max-width: 100%;
  729.     margin-bottom: 2rem;
  730.     background-color: #fff;
  731.     color: #333;
  732.   }
  733.   .table > thead > tr,
  734.   .table > tbody > tr,
  735.   .table > tfoot > tr {
  736.     -webkit-transition: all 0.3s ease;
  737.     -o-transition: all 0.3s ease;
  738.     transition: all 0.3s ease;
  739.   }
  740.   .table > thead > tr > th,
  741.   .table > tbody > tr > th,
  742.   .table > tfoot > tr > th,
  743.   .table > thead > tr > td,
  744.   .table > tbody > tr > td,
  745.   .table > tfoot > tr > td {
  746.     text-align: left;
  747.     padding: 10px;
  748.     vertical-align: middle!important;
  749.     vertical-align: top;
  750.     border-top: 0;
  751.     -webkit-transition: all 0.3s ease;
  752.     -o-transition: all 0.3s ease;
  753.     transition: all 0.3s ease;
  754.   }
  755.   .table > thead > tr > th {
  756.     font-weight: 400;
  757.     color: #757575;
  758.     vertical-align: bottom;
  759.     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  760.   }
  761.   .table > caption + thead > tr:first-child > th,
  762.   .table > colgroup + thead > tr:first-child > th,
  763.   .table > thead:first-child > tr:first-child > th,
  764.   .table > caption + thead > tr:first-child > td,
  765.   .table > colgroup + thead > tr:first-child > td,
  766.   .table > thead:first-child > tr:first-child > td {
  767.     border-top: 0;
  768.   }
  769.   .table > tbody + tbody {
  770.     border-top: 1px solid rgba(0, 0, 0, 0.12);
  771.   }
  772.   .table .table {
  773.     background-color: #fff;
  774.   }
  775.   .table .no-border {
  776.     border: 0;
  777.   }
  778.   .table-condensed > thead > tr > th,
  779.   .table-condensed > tbody > tr > th,
  780.   .table-condensed > tfoot > tr > th,
  781.   .table-condensed > thead > tr > td,
  782.   .table-condensed > tbody > tr > td,
  783.   .table-condensed > tfoot > tr > td {
  784.     padding: 0.8rem;
  785.   }
  786.   .table-bordered {
  787.     border: 0;
  788.   }
  789.   .table-bordered > thead > tr > th,
  790.   .table-bordered > tbody > tr > th,
  791.   .table-bordered > tfoot > tr > th,
  792.   .table-bordered > thead > tr > td,
  793.   .table-bordered > tbody > tr > td,
  794.   .table-bordered > tfoot > tr > td {
  795.     border: 0;
  796.     border-bottom: 1px solid #e0e0e0;
  797.   }
  798.   .table-bordered > thead > tr > th,
  799.   .table-bordered > thead > tr > td {
  800.     border-bottom-width: 2px;
  801.   }
  802.   .table-striped > tbody > tr:nth-child(odd) > td,
  803.   .table-striped > tbody > tr:nth-child(odd) > th {
  804.     background-color: #f5f5f5;
  805.   }
  806.   .table-hover > tbody > tr:hover > td,
  807.   .table-hover > tbody > tr:hover > th {
  808.     background-color: rgba(0, 0, 0, 0.12);
  809.   }
  810.   @media screen and (max-width: 768px) {
  811.     .table-responsive-vertical > .table {
  812.       margin-bottom: 0;
  813.       background-color: transparent;
  814.     }
  815.     .table-responsive-vertical > .table > thead,
  816.     .table-responsive-vertical > .table > tfoot {
  817.       display: none;
  818.     }
  819.     .table-responsive-vertical > .table > tbody {
  820.       display: block;
  821.     }
  822.     .table-responsive-vertical > .table > tbody > tr {
  823.       display: block;
  824.       border: 1px solid #e0e0e0;
  825.       border-radius: 2px;
  826.       margin-bottom: 1.6rem;
  827.     }
  828.     .table-responsive-vertical > .table > tbody > tr > td {
  829.       background-color: #fff;
  830.       display: block;
  831.       vertical-align: middle;
  832.       text-align: right;
  833.     }
  834.     .table-responsive-vertical > .table > tbody > tr > td[data-title]:before {
  835.       content: attr(data-title);
  836.       float: left;
  837.       font-size: inherit;
  838.       font-weight: 400;
  839.       color: #757575;
  840.     }
  841.     .table-responsive-vertical.shadow-z-1 {
  842.       -webkit-box-shadow: none;
  843.       -moz-box-shadow: none;
  844.       box-shadow: none;
  845.     }
  846.     .table-responsive-vertical.shadow-z-1 > .table > tbody > tr {
  847.       border: none;
  848.       -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  849.       -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  850.       box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  851.     }
  852.     .table-responsive-vertical > .table-bordered {
  853.       border: 0;
  854.     }
  855.     .table-responsive-vertical > .table-bordered > tbody > tr > td {
  856.       border: 0;
  857.       border-bottom: 1px solid #e0e0e0;
  858.     }
  859.     .table-responsive-vertical > .table-bordered > tbody > tr > td:last-child {
  860.       border-bottom: 0;
  861.     }
  862.     .table-responsive-vertical > .table-striped > tbody > tr > td,
  863.     .table-responsive-vertical > .table-striped > tbody > tr:nth-child(odd) {
  864.       background-color: #fff;
  865.     }
  866.     .table-responsive-vertical > .table-striped > tbody > tr > td:nth-child(odd) {
  867.       background-color: #f5f5f5;
  868.     }
  869.     .table-responsive-vertical > .table-hover > tbody > tr:hover > td,
  870.     .table-responsive-vertical > .table-hover > tbody > tr:hover {
  871.       background-color: #fff;
  872.     }
  873.     .table-responsive-vertical > .table-hover > tbody > tr > td:hover {
  874.       background-color: rgba(0, 0, 0, 0.12);
  875.     }
  876.   }
  877.   .table-striped.table-mc-red > tbody > tr:nth-child(odd) > td,
  878.   .table-striped.table-mc-red > tbody > tr:nth-child(odd) > th {
  879.     background-color: #fde0dc;
  880.   }
  881.   .table-hover.table-mc-red > tbody > tr:hover > td,
  882.   .table-hover.table-mc-red > tbody > tr:hover > th {
  883.     background-color: #f9bdbb;
  884.   }
  885.   @media screen and (max-width: 767px) {
  886.     .table-responsive-vertical .table-striped.table-mc-red > tbody > tr > td,
  887.     .table-responsive-vertical .table-striped.table-mc-red > tbody > tr:nth-child(odd) {
  888.       background-color: #fff;
  889.     }
  890.     .table-responsive-vertical .table-striped.table-mc-red > tbody > tr > td:nth-child(odd) {
  891.       background-color: #fde0dc;
  892.     }
  893.     .table-responsive-vertical .table-hover.table-mc-red > tbody > tr:hover > td,
  894.     .table-responsive-vertical .table-hover.table-mc-red > tbody > tr:hover {
  895.       background-color: #fff;
  896.     }
  897.     .table-responsive-vertical .table-hover.table-mc-red > tbody > tr > td:hover {
  898.       background-color: #f9bdbb;
  899.     }
  900.   }
  901.   .table-striped.table-mc-pink > tbody > tr:nth-child(odd) > td,
  902.   .table-striped.table-mc-pink > tbody > tr:nth-child(odd) > th {
  903.     background-color: #fce4ec;
  904.   }
  905.   .table-hover.table-mc-pink > tbody > tr:hover > td,
  906.   .table-hover.table-mc-pink > tbody > tr:hover > th {
  907.     background-color: #f8bbd0;
  908.   }
  909.   @media screen and (max-width: 767px) {
  910.     .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr > td,
  911.     .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr:nth-child(odd) {
  912.       background-color: #fff;
  913.     }
  914.     .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr > td:nth-child(odd) {
  915.       background-color: #fce4ec;
  916.     }
  917.     .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr:hover > td,
  918.     .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr:hover {
  919.       background-color: #fff;
  920.     }
  921.     .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr > td:hover {
  922.       background-color: #f8bbd0;
  923.     }
  924.   }
  925.   .table-striped.table-mc-purple > tbody > tr:nth-child(odd) > td,
  926.   .table-striped.table-mc-purple > tbody > tr:nth-child(odd) > th {
  927.     background-color: #f3e5f5;
  928.   }
  929.   .table-hover.table-mc-purple > tbody > tr:hover > td,
  930.   .table-hover.table-mc-purple > tbody > tr:hover > th {
  931.     background-color: #e1bee7;
  932.   }
  933.   @media screen and (max-width: 767px) {
  934.     .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr > td,
  935.     .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr:nth-child(odd) {
  936.       background-color: #fff;
  937.     }
  938.     .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr > td:nth-child(odd) {
  939.       background-color: #f3e5f5;
  940.     }
  941.     .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr:hover > td,
  942.     .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr:hover {
  943.       background-color: #fff;
  944.     }
  945.     .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr > td:hover {
  946.       background-color: #e1bee7;
  947.     }
  948.   }
  949.   .table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) > td,
  950.   .table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) > th {
  951.     background-color: #ede7f6;
  952.   }
  953.   .table-hover.table-mc-deep-purple > tbody > tr:hover > td,
  954.   .table-hover.table-mc-deep-purple > tbody > tr:hover > th {
  955.     background-color: #d1c4e9;
  956.   }
  957.   @media screen and (max-width: 767px) {
  958.     .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr > td,
  959.     .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) {
  960.       background-color: #fff;
  961.     }
  962.     .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr > td:nth-child(odd) {
  963.       background-color: #ede7f6;
  964.     }
  965.     .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr:hover > td,
  966.     .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr:hover {
  967.       background-color: #fff;
  968.     }
  969.     .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr > td:hover {
  970.       background-color: #d1c4e9;
  971.     }
  972.   }
  973.   .table-striped.table-mc-indigo > tbody > tr:nth-child(odd) > td,
  974.   .table-striped.table-mc-indigo > tbody > tr:nth-child(odd) > th {
  975.     background-color: #e8eaf6;
  976.   }
  977.   .table-hover.table-mc-indigo > tbody > tr:hover > td,
  978.   .table-hover.table-mc-indigo > tbody > tr:hover > th {
  979.     background-color: #c5cae9;
  980.   }
  981.   @media screen and (max-width: 767px) {
  982.     .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr > td,
  983.     .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr:nth-child(odd) {
  984.       background-color: #fff;
  985.     }
  986.     .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr > td:nth-child(odd) {
  987.       background-color: #e8eaf6;
  988.     }
  989.     .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr:hover > td,
  990.     .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr:hover {
  991.       background-color: #fff;
  992.     }
  993.     .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr > td:hover {
  994.       background-color: #c5cae9;
  995.     }
  996.   }
  997.   .table-striped.table-mc-blue > tbody > tr:nth-child(odd) > td,
  998.   .table-striped.table-mc-blue > tbody > tr:nth-child(odd) > th {
  999.     background-color: #e7e9fd;
  1000.   }
  1001.   .table-hover.table-mc-blue > tbody > tr:hover > td,
  1002.   .table-hover.table-mc-blue > tbody > tr:hover > th {
  1003.     background-color: #d0d9ff;
  1004.   }
  1005.   @media screen and (max-width: 767px) {
  1006.     .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr > td,
  1007.     .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr:nth-child(odd) {
  1008.       background-color: #fff;
  1009.     }
  1010.     .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr > td:nth-child(odd) {
  1011.       background-color: #e7e9fd;
  1012.     }
  1013.     .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr:hover > td,
  1014.     .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr:hover {
  1015.       background-color: #fff;
  1016.     }
  1017.     .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr > td:hover {
  1018.       background-color: #d0d9ff;
  1019.     }
  1020.   }
  1021.   .table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) > td,
  1022.   .table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) > th {
  1023.     background-color: #e1f5fe;
  1024.   }
  1025.   .table-hover.table-mc-light-blue > tbody > tr:hover > td,
  1026.   .table-hover.table-mc-light-blue > tbody > tr:hover > th {
  1027.     background-color: #b3e5fc;
  1028.   }
  1029.   @media screen and (max-width: 767px) {
  1030.     .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr > td,
  1031.     .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) {
  1032.       background-color: #fff;
  1033.     }
  1034.     .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr > td:nth-child(odd) {
  1035.       background-color: #e1f5fe;
  1036.     }
  1037.     .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr:hover > td,
  1038.     .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr:hover {
  1039.       background-color: #fff;
  1040.     }
  1041.     .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr > td:hover {
  1042.       background-color: #b3e5fc;
  1043.     }
  1044.   }
  1045.   .table-striped.table-mc-cyan > tbody > tr:nth-child(odd) > td,
  1046.   .table-striped.table-mc-cyan > tbody > tr:nth-child(odd) > th {
  1047.     background-color: #e0f7fa;
  1048.   }
  1049.   .table-hover.table-mc-cyan > tbody > tr:hover > td,
  1050.   .table-hover.table-mc-cyan > tbody > tr:hover > th {
  1051.     background-color: #b2ebf2;
  1052.   }
  1053.   @media screen and (max-width: 767px) {
  1054.     .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr > td,
  1055.     .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr:nth-child(odd) {
  1056.       background-color: #fff;
  1057.     }
  1058.     .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr > td:nth-child(odd) {
  1059.       background-color: #e0f7fa;
  1060.     }
  1061.     .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr:hover > td,
  1062.     .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr:hover {
  1063.       background-color: #fff;
  1064.     }
  1065.     .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr > td:hover {
  1066.       background-color: #b2ebf2;
  1067.     }
  1068.   }
  1069.   .table-striped.table-mc-teal > tbody > tr:nth-child(odd) > td,
  1070.   .table-striped.table-mc-teal > tbody > tr:nth-child(odd) > th {
  1071.     background-color: #e0f2f1;
  1072.   }
  1073.   .table-hover.table-mc-teal > tbody > tr:hover > td,
  1074.   .table-hover.table-mc-teal > tbody > tr:hover > th {
  1075.     background-color: #b2dfdb;
  1076.   }
  1077.   @media screen and (max-width: 767px) {
  1078.     .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr > td,
  1079.     .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr:nth-child(odd) {
  1080.       background-color: #fff;
  1081.     }
  1082.     .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr > td:nth-child(odd) {
  1083.       background-color: #e0f2f1;
  1084.     }
  1085.     .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr:hover > td,
  1086.     .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr:hover {
  1087.       background-color: #fff;
  1088.     }
  1089.     .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr > td:hover {
  1090.       background-color: #b2dfdb;
  1091.     }
  1092.   }
  1093.   .table-striped.table-mc-green > tbody > tr:nth-child(odd) > td,
  1094.   .table-striped.table-mc-green > tbody > tr:nth-child(odd) > th {
  1095.     background-color: #d0f8ce;
  1096.   }
  1097.   .table-hover.table-mc-green > tbody > tr:hover > td,
  1098.   .table-hover.table-mc-green > tbody > tr:hover > th {
  1099.     background-color: #a3e9a4;
  1100.   }
  1101.   @media screen and (max-width: 767px) {
  1102.     .table-responsive-vertical .table-striped.table-mc-green > tbody > tr > td,
  1103.     .table-responsive-vertical .table-striped.table-mc-green > tbody > tr:nth-child(odd) {
  1104.       background-color: #fff;
  1105.     }
  1106.     .table-responsive-vertical .table-striped.table-mc-green > tbody > tr > td:nth-child(odd) {
  1107.       background-color: #d0f8ce;
  1108.     }
  1109.     .table-responsive-vertical .table-hover.table-mc-green > tbody > tr:hover > td,
  1110.     .table-responsive-vertical .table-hover.table-mc-green > tbody > tr:hover {
  1111.       background-color: #fff;
  1112.     }
  1113.     .table-responsive-vertical .table-hover.table-mc-green > tbody > tr > td:hover {
  1114.       background-color: #a3e9a4;
  1115.     }
  1116.   }
  1117.   .table-striped.table-mc-light-green > tbody > tr:nth-child(odd) > td,
  1118.   .table-striped.table-mc-light-green > tbody > tr:nth-child(odd) > th {
  1119.     background-color: #f1f8e9;
  1120.   }
  1121.   .table-hover.table-mc-light-green > tbody > tr:hover > td,
  1122.   .table-hover.table-mc-light-green > tbody > tr:hover > th {
  1123.     background-color: #dcedc8;
  1124.   }
  1125.   @media screen and (max-width: 767px) {
  1126.     .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr > td,
  1127.     .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr:nth-child(odd) {
  1128.       background-color: #fff;
  1129.     }
  1130.     .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr > td:nth-child(odd) {
  1131.       background-color: #f1f8e9;
  1132.     }
  1133.     .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr:hover > td,
  1134.     .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr:hover {
  1135.       background-color: #fff;
  1136.     }
  1137.     .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr > td:hover {
  1138.       background-color: #dcedc8;
  1139.     }
  1140.   }
  1141.   .table-striped.table-mc-lime > tbody > tr:nth-child(odd) > td,
  1142.   .table-striped.table-mc-lime > tbody > tr:nth-child(odd) > th {
  1143.     background-color: #f9fbe7;
  1144.   }
  1145.   .table-hover.table-mc-lime > tbody > tr:hover > td,
  1146.   .table-hover.table-mc-lime > tbody > tr:hover > th {
  1147.     background-color: #f0f4c3;
  1148.   }
  1149.   @media screen and (max-width: 767px) {
  1150.     .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr > td,
  1151.     .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr:nth-child(odd) {
  1152.       background-color: #fff;
  1153.     }
  1154.     .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr > td:nth-child(odd) {
  1155.       background-color: #f9fbe7;
  1156.     }
  1157.     .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr:hover > td,
  1158.     .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr:hover {
  1159.       background-color: #fff;
  1160.     }
  1161.     .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr > td:hover {
  1162.       background-color: #f0f4c3;
  1163.     }
  1164.   }
  1165.   .table-striped.table-mc-yellow > tbody > tr:nth-child(odd) > td,
  1166.   .table-striped.table-mc-yellow > tbody > tr:nth-child(odd) > th {
  1167.     background-color: #fffde7;
  1168.   }
  1169.   .table-hover.table-mc-yellow > tbody > tr:hover > td,
  1170.   .table-hover.table-mc-yellow > tbody > tr:hover > th {
  1171.     background-color: #fff9c4;
  1172.   }
  1173.   @media screen and (max-width: 767px) {
  1174.     .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr > td,
  1175.     .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr:nth-child(odd) {
  1176.       background-color: #fff;
  1177.     }
  1178.     .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr > td:nth-child(odd) {
  1179.       background-color: #fffde7;
  1180.     }
  1181.     .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr:hover > td,
  1182.     .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr:hover {
  1183.       background-color: #fff;
  1184.     }
  1185.     .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr > td:hover {
  1186.       background-color: #fff9c4;
  1187.     }
  1188.   }
  1189.   .table-striped.table-mc-amber > tbody > tr:nth-child(odd) > td,
  1190.   .table-striped.table-mc-amber > tbody > tr:nth-child(odd) > th {
  1191.     background-color: #fff8e1;
  1192.   }
  1193.   .table-hover.table-mc-amber > tbody > tr:hover > td,
  1194.   .table-hover.table-mc-amber > tbody > tr:hover > th {
  1195.     background-color: #ffecb3;
  1196.   }
  1197.   @media screen and (max-width: 767px) {
  1198.     .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr > td,
  1199.     .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr:nth-child(odd) {
  1200.       background-color: #fff;
  1201.     }
  1202.     .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr > td:nth-child(odd) {
  1203.       background-color: #fff8e1;
  1204.     }
  1205.     .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr:hover > td,
  1206.     .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr:hover {
  1207.       background-color: #fff;
  1208.     }
  1209.     .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr > td:hover {
  1210.       background-color: #ffecb3;
  1211.     }
  1212.   }
  1213.   .table-striped.table-mc-orange > tbody > tr:nth-child(odd) > td,
  1214.   .table-striped.table-mc-orange > tbody > tr:nth-child(odd) > th {
  1215.     background-color: #fff3e0;
  1216.   }
  1217.   .table-hover.table-mc-orange > tbody > tr:hover > td,
  1218.   .table-hover.table-mc-orange > tbody > tr:hover > th {
  1219.     background-color: #ffe0b2;
  1220.   }
  1221.   @media screen and (max-width: 767px) {
  1222.     .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr > td,
  1223.     .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr:nth-child(odd) {
  1224.       background-color: #fff;
  1225.     }
  1226.     .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr > td:nth-child(odd) {
  1227.       background-color: #fff3e0;
  1228.     }
  1229.     .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr:hover > td,
  1230.     .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr:hover {
  1231.       background-color: #fff;
  1232.     }
  1233.     .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr > td:hover {
  1234.       background-color: #ffe0b2;
  1235.     }
  1236.   }
  1237.   .table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) > td,
  1238.   .table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) > th {
  1239.     background-color: #fbe9e7;
  1240.   }
  1241.   .table-hover.table-mc-deep-orange > tbody > tr:hover > td,
  1242.   .table-hover.table-mc-deep-orange > tbody > tr:hover > th {
  1243.     background-color: #ffccbc;
  1244.   }
  1245.   @media screen and (max-width: 767px) {
  1246.     .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr > td,
  1247.     .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) {
  1248.       background-color: #fff;
  1249.     }
  1250.     .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr > td:nth-child(odd) {
  1251.       background-color: #fbe9e7;
  1252.     }
  1253.     .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr:hover > td,
  1254.     .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr:hover {
  1255.       background-color: #fff;
  1256.     }
  1257.     .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr > td:hover {
  1258.       background-color: #ffccbc;
  1259.     }
  1260.   }
  1261.   table tr:nth-of-type(even) {
  1262.       background-color: #F1F3F9!important;
  1263.   }
  1264.   table tr{
  1265.     font-family: Muli-Regular;
  1266.     font-size: 14px;
  1267.   }
  1268.   thead th {
  1269.     font-family: Muli-Bold!important;
  1270.     font-size: 15px!important;
  1271.     color: #283346!important;
  1272.   }
  1273.   body{
  1274.   font-family: Quicksand-Regular;
  1275. }
  1276. .menu-client > ul > li a{
  1277.   padding: 1.5em 1em!important;
  1278. }
  1279. /*
  1280. --------------Begin Accordion ------
  1281. */
  1282. .boxC12{
  1283.   width: 100%;
  1284.   margin: 0 auto;
  1285.   padding: 0px;
  1286. }
  1287. .boxC12 p{
  1288.     padding-bottom: 0px!important;
  1289.     margin-bottom: 0px!important;
  1290. }
  1291. details {
  1292.   width: 100%;
  1293.   margin-bottom: 20px;
  1294. }
  1295. details>p {
  1296.   padding: 20px;
  1297. }
  1298. summary {
  1299.   cursor:pointer;
  1300.   padding: 20px;
  1301.   background-color: #e8e8e8;
  1302.   box-shadow: 0 0 5px #333;
  1303.   display: flex;
  1304.   justify-content: space-between;
  1305.   align-items: center;
  1306. }
  1307. summary::marker {
  1308.   content: "";
  1309. }
  1310. .plusminus {
  1311.   position: relative;
  1312.   width: 1rem;
  1313.   height: 1rem;
  1314. }
  1315. .plusminus::before {
  1316.   content: "";
  1317.   position: absolute;
  1318.   width: 3px;
  1319.   height: 1rem;
  1320.   background-color: #bf2d2d;
  1321.   left: 50%;
  1322.   transform: translateX(-50%);
  1323. }
  1324. .plusminus::after {
  1325.   content: "";
  1326.   position: absolute;
  1327.   width: 1rem;
  1328.   height: 3px;
  1329.   background-color: #bf2d2d;
  1330.   top: 50%;
  1331.   transform: translateY(-50%);
  1332. }
  1333. details[open]  .plusminus::before {
  1334.   width: 0;
  1335.   height: 0;
  1336. }
  1337. /*----------------End Accordion
  1338. */
  1339. /*============ Begin Box Article ============*/
  1340. .title-bold {
  1341.     color: #000;
  1342.     font-size: 16px;
  1343.     display: block;
  1344. }
  1345. .title-blog blogdate, .title-bold {
  1346.     border-bottom: 1px #e4e4e4 solid;
  1347.     overflow: hidden;
  1348.     text-transform: uppercase;
  1349.     font-weight: 700;
  1350.     padding-top: 5px;
  1351.     line-height: 42px;
  1352.     margin-bottom: 20px;
  1353. }
  1354. .inner-profile {
  1355.     padding-left: 20px;
  1356.     padding-right: 20px;
  1357.     overflow: hidden;
  1358.     padding-bottom: 10px;
  1359. }
  1360. .box {
  1361.     border: 1px solid #e4e4e4;
  1362.     padding: 5px;
  1363.     background: #fff;
  1364.     box-shadow: 0px 2px 5px 0px #D4D8DE;
  1365.     margin-bottom: 10px;
  1366. }
  1367. .title-bold span {
  1368.     border-bottom: 2px #289fcd solid;
  1369. }
  1370. .title-bold span, .title-bold-notline span {
  1371.     margin-left: 10px;
  1372.     padding-left: 8px;
  1373.     padding-right: 8px;
  1374.     display: block;
  1375. }
  1376. .all-forum-profile img, .inner-forum-profile img, .title-bold span {
  1377.     float: left;
  1378. }
  1379. /*============= Begin Blog Article ===================*/
  1380. *--------------------------------------------------------------
  1381. # Blog
  1382. --------------------------------------------------------------*/
  1383. .row-featured .blog{
  1384.   padding: 30px 5px!important;
  1385.   max-width: 100%!important;
  1386. }
  1387. .blog .blog-pagination {
  1388.   margin-top: 15px;
  1389.   color: #555555;
  1390.   background-color: #fff;
  1391. }
  1392. .blog .blog-pagination ul {
  1393.   display: flex;
  1394.   padding: 0;
  1395.   margin: 0;
  1396.   list-style: none;
  1397. }
  1398. .blog .blog-pagination li {
  1399.   margin: 0 5px;
  1400.   transition: 0.3s;
  1401.   border-radius: 10px;
  1402. }
  1403. .blog .blog-pagination li a {
  1404.   color: var(--color-default);
  1405.   padding: 7px 16px;
  1406.   display: flex;
  1407.   align-items: center;
  1408.   justify-content: center;
  1409. }
  1410. .blog .blog-pagination li.active,
  1411. .blog .blog-pagination li:hover {
  1412.   background: var(--color-primary);
  1413.   color: #fff;
  1414. }
  1415. .blog .blog-pagination li.active a,
  1416. .blog .blog-pagination li:hover a {
  1417.   color: var(--color-white);
  1418. }
  1419. /*--------------------------------------------------------------
  1420. # Blog Posts List
  1421. --------------------------------------------------------------*/
  1422. .blog .posts-list article {
  1423.   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  1424.   padding: 30px;
  1425.   height: 100%;
  1426.   border-radius: 10px;
  1427.   overflow: hidden;
  1428.   background-color: #fff;
  1429. }
  1430. .blog .posts-list article:hover{
  1431.   border-color: transparent;
  1432.     transform: translateY(-5px);
  1433.     box-shadow: 0 .5rem 1rem rgba(0,0,0,0.15);
  1434.     cursor: pointer;
  1435. }
  1436. .blog .posts-list .post-img {
  1437.   max-height: 240px;
  1438.   margin: -30px -30px 15px -30px;
  1439.   overflow: hidden;
  1440. }
  1441. .blog .posts-list .post-category {
  1442.   font-size: 16px;
  1443.   color: #555555;
  1444.   margin-bottom: 10px;
  1445. }
  1446. .blog .posts-list .title {
  1447.   font-size: 22px;
  1448.   font-weight: 700;
  1449.   padding: 0;
  1450.   margin: 0 0 20px 0;
  1451. }
  1452. .blog .posts-list .title a {
  1453.   color: var(--color-default);
  1454.   transition: 0.3s;
  1455.   text-decoration: none;
  1456. }
  1457. .blog .posts-list .title a:hover {
  1458.   color: var(--color-primary);
  1459. }
  1460. .blog .posts-list .post-author-img {
  1461.   width: 50px;
  1462.   border-radius: 50%;
  1463.   margin-right: 15px;
  1464. }
  1465. .blog .posts-list .post-author-list {
  1466.   font-weight: 600;
  1467.   margin-bottom: 5px;
  1468. }
  1469. .blog .posts-list .post-date {
  1470.   font-size: 14px;
  1471.   color: #3c3c3c;
  1472.   margin-bottom: 0;
  1473. }
  1474.     </style>
  1475.     <link rel="stylesheet" href="{{ asset('templatehome/notify/themes/alertify.core.css') }}" />
  1476.     <link rel="stylesheet" href="{{ asset('templatehome/notify/themes/alertify.default.css') }}" id="toggleCSS" />
  1477.     <script src="{{ asset('templatehome/notify/lib/alertify.min.js') }}"></script>
  1478.     <script>
  1479.         function resetNotif(){
  1480.             $("#toggleCSS").attr("href", "{{ asset('templatehome/notify/themes/alertify.default.css') }}");
  1481.             alertify.set({
  1482.                 labels : {
  1483.                     ok     : "OK",
  1484.                     cancel : "Cancel"
  1485.                 },
  1486.                 delay : 5000,
  1487.                 buttonReverse : false,
  1488.                 buttonFocus   : "ok"
  1489.             });
  1490.         }
  1491.     </script>
  1492.     {% endblock %}
  1493. </head> 
  1494. <body id="home" class="html-ltr">
  1495.   {{ render(controller("App\\Controller\\General\\Template\\MenuController::menubare", {'position': 'offerts'})) }}
  1496.     <div id="outer-wrapper">
  1497.        <main>
  1498.           {% block body %}
  1499.                 
  1500.           {% endblock %}
  1501.        </main>
  1502.       {{ render(controller("App\\Controller\\General\\Template\\MenuController:footer", {'position': 'offerts'})) }}
  1503.     </div>
  1504. <div class="content-alert-action-factory-user" value="0" name="0" style="display: none;"></div>
  1505. <div class="panel-result-action-factory-user" style="display: none; position: fixed; z-index: 90000; width: 100%; text-align: center; top: 40%;">
  1506.     <span style="display: inline-block; width: 80px; height: 80px; background: transparent; text-align: center; padding-top: 25px;">
  1507.         <div data-w-id="bdd6bb74-6a76-cc2b-93ad-7ae71601b802" data-animation-type="lottie" data-src="https://assets2.lottiefiles.com/datafiles/kaSuzs8QVBUsk3j/data.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>
  1508.     </span>
  1509. </div>
  1510. <div class="modal fade" data-backdrop="static" id="open-modalSelect-reinitialize" style="padding-top: 50px;">
  1511. <div class="modal-dialog">
  1512.     <div class="modal-content">
  1513.         <div class="modal-header color-bottom" style="border-bottom: 4px solid #37c0fb; display: block!important;">
  1514.             <button type="button" class="close custom-close-popup" style="float: right!important;">&times;</button>
  1515.             <h3 class="modal-title" style="margin: 0px; font-size: 22px;"> Initialisation du mot de passe</h3>
  1516.         </div>
  1517.         <div class="modal-body">
  1518.             <div class="wait-account-verification-affiliate" style="text-align: center; height: 100px; padding-top: 30px; color: #333;">
  1519.                 Patientez un moment pendant la vérification de votre session.</br>
  1520.                 <img src="{{ asset('template/images/loader1.gif') }}" alt="image" style="height: 40px; width: 40px;">
  1521.             </div>
  1522.             <div class="form-coustom-reset-password" style="text-align: left; display: none; margin-bottom: 30px;">
  1523.                 <div class="col-md-10 col-sm-12 col-md-offset-1" style="color: #333;">
  1524.                  <div style="border-bottom: 1px solid #ddd; margin-bottom: 15px; font-size: 20px;">Identification du compte</div>
  1525.                  <form method="post" action="#" class="form-check-identifiant">
  1526.                     <div class="form-group form-group-resset">
  1527.                         <input type="text" class="form-control" placeholder="Rentrez l'email du compte" required="">
  1528.                     </div>
  1529.                     
  1530.                     <div class="alert alert-resset alert-block alert-danger" style="display:none">
  1531.                     <h4>Erreur !</h4>
  1532.                     Nous n'avons pu identifier un compte avec cette adresse.
  1533.                     </div>
  1534.                     
  1535.                     <div class="form-group">
  1536.                         <button  class="btn btn-primary" style="background: #e34520;">Envoyer</button>
  1537.                     </div>
  1538.                  </form>
  1539.                 </div>
  1540.                 <div class="clearfix"></div>
  1541.             </div>        
  1542.         </div>
  1543.         <div class="modal-footer" style="color: #333;">
  1544.             {% include 'Theme/General/Template/Menu/social.html.twig' %}
  1545.         </div>
  1546.     </div>
  1547. </div>
  1548. </div>
  1549. <div id="sppmodal-container" class="sppmodal-container">
  1550.   <div class="sppmodal-background">
  1551.     <div class="silly_scrollbar">
  1552.     <div class="sppmodal">
  1553.         
  1554.         <a href="#!" class="pull-right close-sppmodal" style="position: absolute; top: 7px; right: 7px;">
  1555.             <img src="{{ asset('template/images/close.svg') }}" style="height: 22px;"/>
  1556.         </a>
  1557.         
  1558.         <div class="wait-account-verification" style="padding-top: 2px; margin-top: -3px; margin-right: -1px; margin-left: -1px;">
  1559.             <img src="{{ asset('template/images/user-bg.jpg') }}" alt="image" style="width: 100%; border-radius: 5px 5px 0px 0px;">
  1560.             
  1561.             <div class="text-center" style="margin-top: 60px;">
  1562.                 <img src="{{ asset('template/images/loader1.gif') }}" alt="image" style="height: 30px; width: 40px;">
  1563.                 
  1564.                 <div>Chargement en cours ...</div>
  1565.             </div>
  1566.         </div>
  1567.         
  1568.         <div class="sppmodal-content"></div>
  1569.         
  1570.         <div style="position: absolute; bottom: 0px; width: 100%; padding: 15px 10px; border-top: 1px solid #ddd; background: #f7f7f7;">
  1571.             {% include 'Theme/General/Template/Menu/social.html.twig' %}
  1572.         </div>
  1573.     </div>
  1574.     </div>
  1575.   </div>
  1576. </div>
  1577. <!--[if !IE]><!-->
  1578. <script type="text/javascript" src="{{ asset('templatehome/js/common-protocol.e63d930b4412.js') }}" charset="utf-8"></script>
  1579. <!--<![endif]-->
  1580. <script type="text/javascript" src="{{ asset('templatehome/js/stub-attribution.bf7c7a8615d5.js') }}" charset="utf-8"></script>
  1581. <!--[if !IE]><!-->
  1582. <script type="text/javascript" src="{{ asset('templatehome/js/home.c5483f81f59a.js') }}" charset="utf-8"></script>
  1583. <!--===============================================================================================-->
  1584. <script src="{{ asset('template/login/vendor/bootstrap/js/popper.js') }}"></script>
  1585. <script src="{{ asset('template/login/vendor/bootstrap/js/bootstrap.min.js') }}"></script>
  1586. <!--===============================================================================================-->
  1587. {% block srcjavascript %}
  1588. {% endblock %}
  1589. <script type="text/javascript">
  1590. $(function(){
  1591.     $('.open-spp-modal').click(function(){
  1592.       $('.sppmodal-content').hide();
  1593.       $('.wait-account-verification').show();
  1594.       $('#sppmodal-container').removeClass('out').addClass('one');
  1595.       $('body').addClass('sppmodal-active');
  1596.       
  1597.       $.post('{{ path('produit_produit_ajouter_product_panier', {'position': 'duree'}) }}',function(data){
  1598.           if(data != 0)
  1599.           {
  1600.               $('.wait-account-verification').hide();
  1601.               $('.sppmodal-content').show();
  1602.               $('.sppmodal-content').html(data);
  1603.           }else{
  1604.               resetNotif();
  1605.               alertify.alert("Echec, Une erreur a été rencontrée. Essayez à nouveau !");
  1606.               
  1607.               $('#sppmodal-container').addClass('out');
  1608.               $('body').removeClass('sppmodal-active');
  1609.           }
  1610.         });
  1611.     })
  1612.         
  1613.     $('.close-sppmodal').click(function(){
  1614.         resetNotif();
  1615.         alertify.confirm("Êtes-vous certain de vouloir annuler cette opération ?", function (e) {
  1616.             if(e){
  1617.                 $('#sppmodal-container').addClass('out');
  1618.                 $('body').removeClass('sppmodal-active');
  1619.             } else {
  1620.                 alertify.success("Opération annulée avec succès !");
  1621.             }
  1622.         });
  1623.     });
  1624.     {% block javascript %}
  1625.         
  1626.     {% endblock %}
  1627. });
  1628. </script>
  1629. </body>
  1630. </html>