templates/Accueil/PageAccueil.html.twig line 1

Open in your IDE?
  1. {#
  2. /*
  3.  * Autheur: Mansouri Omayma
  4.  * Email:chkiouamaha@gmail.com
  5.  * Date de création :13/12/2019
  6.  * Date de modification: 30/03/2020 par Wattas Amani
  7.  * Description: Page accueil
  8.  *
  9. */#}
  10. {% extends 'Accueil/layoutAccueil.html.twig' %}
  12. {%block Head %}
  13.     {{ parent() }}
  14.     {%block  LinksCss %}
  15.         {{ parent() }}
  16.         <style>@import "compass/css3";
  18. /* Slider */
  20. .slick-slider {
  21.   position: relative;
  22.   display: block;
  23.   box-sizing: border-box;
  24.   -moz-box-sizing: border-box;
  25.   -webkit-touch-callout: none;
  26.   -webkit-user-select: none;
  27.   -khtml-user-select: none;
  28.   -moz-user-select: none;
  29.   -ms-user-select: none;
  30.   user-select: none;
  31.   -ms-touch-action: none;
  32.   touch-action: none;
  33.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  34. }
  36. .slick-list {
  37.   position: relative;
  38.   overflow: hidden;
  39.   display: block;
  40.   margin: 0;
  41.   padding: 0;
  42.   &:focus {
  43.     outline: none;
  44.   }
  45.   .slick-loading & {
  46.     background: white url(./ajax-loader.gif) center center no-repeat;
  47.   }
  48.   &.dragging {
  49.     cursor: pointer;
  50.     cursor: hand;
  51.   }
  52. }
  54. .slick-slider .slick-list,
  55. .slick-track,
  56. .slick-slide,
  57. .slick-slide img {
  58.   -webkit-transform: translate3d(0, 0, 0);
  59.   -moz-transform: translate3d(0, 0, 0);
  60.   -ms-transform: translate3d(0, 0, 0);
  61.   -o-transform: translate3d(0, 0, 0);
  62.   transform: translate3d(0, 0, 0);
  63. }
  65. .slick-track {
  66.   position: relative;
  67.   left: 0;
  68.   top: 0;
  69.   display: block;
  70.   zoom: 1;
  71.   &:before,
  72.   &:after {
  73.     content: "";
  74.     display: table;
  75.   }
  76.   &:after {
  77.     clear: both;
  78.   }
  79.   .slick-loading & {
  80.     visibility: hidden;
  81.   }
  82. }
  84. .slick-slide {
  85.   float: left;
  86.   height: 100%;
  87.   min-height: 1px;
  88.   img {
  89.     display: block;
  90.     &.slick-loading {
  91.       background: white url(./ajax-loader.gif) center center no-repeat;
  92.       padding-bottom: 100%;
  93.     }
  94.   }
  95.   display: none;
  96.   &.dragging img {
  97.     pointer-events: none;
  98.   }
  99.   .slick-initialized & {
  100.     display: block;
  101.   }
  102.   .slick-loading & {
  103.     visibility: hidden;
  104.   }
  105.   .slick-vertical & {
  106.     display: block;
  107.     height: auto;
  108.     border: 1px solid transparent;
  109.   }
  110. }
  114. /* Arrows */
  116. .slick-prev,
  117. .slick-next {
  118.   position: absolute;
  119.   display: block;
  120.   height: 20px;
  121.   width: 20px;
  122.   line-height: 0;
  123.   font-size: 0;
  124.   cursor: pointer;
  125.   background: transparent;
  126.   color: transparent;
  127.   top: 50%;
  128.   margin-top: -10px;
  129.   padding: 0;
  130.   border: none;
  131.   outline: none;
  132.   &:focus {
  133.     outline: none;
  134.   }
  135.   &.slick-disabled:before {
  136.     opacity: 0.25;
  137.   }
  138. }
  140. .slick-prev:before,
  141. .slick-next:before {
  142.   font-family: "slick";
  143.   font-size: 20px;
  144.   line-height: 1;
  145.   color: white;
  146.   opacity: 0.85;
  147.   -webkit-font-smoothing: antialiased;
  148.   -moz-osx-font-smoothing: grayscale;
  149. }
  151. .slick-prev {
  152.   left: 0px;
  153.       display:none  !important ;
  154.   &:before {
  155.     content: "\2190";
  156.         display:none  !important ;
  157.   }
  158. }
  160. .slick-next {
  161.   right: 0x;
  162.    display:none  !important ;
  163.   &:before {
  164.     content: "\2192";
  165.    
  166.   }
  167. }
  169. /* Dots */
  171. .slick-slider {
  172.   margin-bottom: 30px;
  173. }
  175. .slick-dots {
  176.   position: absolute;
  177.   bottom: -45px;
  178.   list-style: none;
  179.   display: none !important ;
  180.   text-align: center;
  181.   padding: 0px;
  182.   width: 100%;
  183.   li {
  184.     position: relative;
  185.     display: inline-block;
  186.     height: 20px;
  187.     width: 20px;
  188.     margin: 0px 5px;
  189.     padding: 0px;
  190.     cursor: pointer;
  191.     button {
  192.       border: 0;
  193.       background: transparent;
  194.       display: block;
  195.       height: 20px;
  196.       width: 20px;
  197.       outline: none;
  198.       line-height: 0;
  199.       font-size: 0;
  200.       color: transparent;
  201.       padding: 5px;
  202.       cursor: pointer;
  203.       outline: none;
  204.       &:focus {
  205.         outline: none;
  206.       }
  207.       &:before {
  208.         position: absolute;
  209.         top: 0;
  210.         left: 0;
  211.         content: "\2022";
  212.         width: 20px;
  213.         height: 20px;
  214.         font-family: "slick";
  215.         font-size: 6px;
  216.         line-height: 20px;
  217.         text-align: center;
  218.         color: black;
  219.         opacity: 0.25;
  220.         -webkit-font-smoothing: antialiased;
  221.         -moz-osx-font-smoothing: grayscale;
  222.       }
  223.     }
  224.     &.slick-active button:before {
  225.       opacity: 0.75;
  226.     }
  227.   }
  228. }
  231. .content {
  232.   width: 80%;
  233.   margin: auto;
  234. }
  238. /* Dots */
  240. .slick-slider {
  241.   margin-bottom: 30px;
  242. }
  244. .slick-dots {
  245.   position: absolute;
  246.   bottom: -45px;
  247.   list-style: none;
  248.    display: none !important ;
  249.   text-align: center;
  250.   padding: 0px;
  251.   width: 100%;
  252.   li {
  253.     position: relative;
  254.     display: inline-block;
  255.     height: 20px;
  256.     width: 20px;
  257.     margin: 0px 5px;
  258.     padding: 0px;
  259.     cursor: pointer;
  260.     button {
  261.       border: 0;
  262.       background: transparent;
  263.       display: block;
  264.       height: 20px;
  265.       width: 20px;
  266.       outline: none;
  267.       line-height: 0;
  268.       font-size: 0;
  269.       color: transparent;
  270.       padding: 5px;
  271.       cursor: pointer;
  272.       outline: none;
  273.       &:focus {
  274.         outline: none;
  275.       }
  276.       &:before {
  277.         position: absolute;
  278.         top: 0;
  279.         left: 0;
  280.         content: "\2022";
  281.         width: 20px;
  282.         height: 20px;
  283.         font-family: "slick"; 
  284.         /* font-size: 6px; */
  285.         font-size: 20px;
  286.         line-height: 20px;
  287.         text-align: center;
  288.         /* color: black; */
  289.         color: white;
  290.         opacity: 0.25;
  291.         -webkit-font-smoothing: antialiased;
  292.         -moz-osx-font-smoothing: grayscale;
  293.       }
  294.     }
  295.     &.slick-active button:before {
  296.       opacity: 0.75;
  297.     }
  298.   }
  299. }
  300.  </style> 
  301.    {% endblock %}
  302. {% endblock %}
  303. {%block Header %}
  304.     {{ parent() }}
  305. {% endblock %}
  306. {%block Content %}
  307.     <!-- slider_area_start -->
  308.     <div class="slider_area sliderHeader" style="position: relative;">
  309.         <div class="slider_active owl-carousel SliderOWL">
  310.             <div class="single_slider sliderArea d-flex align-items-center ">
  312.                 <div class="container contentSliderArea no-padding">
  313.                     <div class="row no-margin wrapperSlider">
  314.                         <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-xs-6 no-padding back_Slider " style="background: linear-gradient(0.25turn, transparent, #FFFFFF),url('{{ site.slide1.image.path }}');"></div>
  315.                         <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-6  no-padding contentSlider">
  316.                             <div class="slider_text content_TexteSlider">
  317.                                 <h3 class="titleSlider"> {{ site.slide1.libele }}</h3>
  318.                                 <p class="texteSlider">{{ site.slide1.description }}</p>
  319.                                 {#  <div class="video_service_btn">#}
  320.                                 {# <img src="{{ asset('Accueil/imagesAccueil/slider/flecheSlider.svg')}}" >#}
  321.                                 {#    </div>#}
  323.                             </div>
  324.                         </div>
  325.                     </div>
  326.                 </div>
  327.             </div>
  328.             <div class="single_slider sliderArea d-flex align-items-center ">
  329.                 <div class="container contentSliderArea no-padding">
  330.                     <div class="row no-margin wrapperSlider">
  332.                         <div class="col-xl-4  col-lg-4 col-md-6 col-sm-6 col-xs-6 no-padding back_Slider2 " style="background: linear-gradient(0.25turn, transparent, #FFFFFF),url('{{ site.slide2.image.path }}');"> </div>
  333.                         <div class="col-xl-6  col-lg-6 col-md-6 col-sm-6 col-xs-6 no-padding contentSlider">
  335.                             <div class="slider_text content_TexteSlider">
  336.                                 <h3 class="titleSlider">{{ site.slide2.libele }} </h3>
  337.                                 <p class="texteSlider">{{ site.slide2.description }}</p>
  338.                                 {# <div class="video_service_btn">#}
  339.                                 {#    <img src="{{ asset('Accueil/imagesAccueil/slider/flecheSlider.svg')}}" >#}
  340.                                 {# </div>#}
  342.                             </div>
  343.                         </div>
  344.                     </div>
  345.                 </div>
  346.             </div>
  347.         </div>
  348.         
  349.         <div class="Divanimation">
  350.             <img src="/images/LineAnimation.png" class="MyLineFirstPosition" >
  351.                 <img src="/images/ArrowAnimation.png" class="MyImgFirstPosition">
  352.                     {#<svg xmlns="http://www.w3.org/2000/svg" width="558.258" height="158.466" viewBox="0 0 558.258 158.466">
  353.                       <path id="Tracé_42" data-name="Tracé 42" d="M847.5,545.769s59.34,26.774,147.142,20.945c144.6-9.6,124.309-65.453,88.792-61.089s-36.363,54.108,56.658,40.144,88.827-115.071,39.745-91.634c-56.658,27.054,14.324,112.933,110.779,102.979C1451.289,540.533,1394.63,410.5,1394.63,410.5" transform="translate(-847.089 -410.101)" fill="none" stroke="#41a2aa" stroke-miterlimit="10" stroke-width="2" stroke-dasharray="4 4 4 4"/>
  354.                     </svg>#}
  355.                     </div>
  356.                     </div>
  357.                     <!-- slider_area_end -->
  359.                     <div> <img class="logoCenter" src="{{ asset ('Accueil/imagesAccueil/logoHeader.svg')}}" >    </div>
  361.                     <!-- about wrap  -->
  362.                     <div class="about_wrap_area aboutWrapper">
  363.                         <div class="container no-padding">
  364.                             <div class="row no-margin">
  365.                                 <div class="col-xl-4 col-md-4 col-lg-4 no-padding">
  366.                                     <div class="single_service_wrap text-center vignetteContent">
  367.                                         <img class="imageParent" src="{{ asset('Accueil/imagesAccueil/son_sejour.svg')}}" >
  368.                                             <h3 class="titreVignette">Vous êtes parent,</h3>
  369.                                             <p class="txtVignette">Accédez aux photos et aux messages <br/>du séjour de votre enfant </br> créez et personnalisez vos produits souvenirs</p>
  370.                                             <a href="{{path('app_back_Parent')}}" class=" btnparent btnconnection-Vignette btnconnection-VignetteAcc">Je me connecte</a>
  371.                                     </div>
  372.                                 </div>
  373.                                 <div class="col-xl-4 col-md-4 col-lg-4 no-padding">
  374.                                     <div class="single_service_wrap text-center vignetteContent">
  375.                                         <img class="imageAcc" src="{{ asset('Accueil/imagesAccueil/espceAcc.svg')}}" >
  376.                                             <h3 class="titreVignette titreAcc" >Vous êtes accompagnateur</h3>
  377.                                             <h2 style="display:none">On vous donne des nouvelles</h2>
  378.                                             <h2 style="display:none">Boite vocale</h2>
  379.                                               <h2 style="display:none">Donner des nouvelles aux familles gratuitement </h2>
  380.                                             <h2 style="display:none">Album photo, impression livre photos, livraison gratuite </h2>
  381.                                             <p class="txtVignette txtAcc">Déposez vos photos et vos messages <br/>
  382.                                                 pour donner des nouvelles</br> aux familles </br> créez vos séjours</p>
  383.                                             <a href="{{path('app_back_Acommpa')}}" class="btnconnection-Vignette btnconnection-VignetteAcc">Je me connecte</a>
  384.                                     </div>
  385.                                 </div>
  386.                                 <div class="col-xl-4 col-md-4 col-lg-4 no-padding">
  387.                                     <div class="single_service_wrap text-center vignetteContent">
  388.                                         <img class="imagePartenaire" src="{{ asset('Accueil/imagesAccueil/espcPart.svg')}}" >
  389.                                             <h3 class="titreVignette titrePartenaire">Vous êtes partenaire </h3>
  390.                                             <p class="txtVignette txtPartenaire">ou souhaitez le devenir,
  391.                                                 <br/>Consultez et gérez les données de vos séjours<br/>  créez l'ensemble de vos séjours </p>
  392.                                             <a href="{{path('app_login_back_Partenaire')}}" class="btnconnection-Vignette btnconnection-VignettePart">Je me connecte</a>
  393.                                     </div>
  394.                                 </div>
  395.                             </div>
  396.                         </div>
  397.                     </div>
  398.                     <!--/ about wrap  -->
  401.                     <!-- service_area_start -->
  402.                        <div class="project_area Historique_Wrapper">
  403.                         <div class="container Historique_Content">
  404.                             <div class="row">
  405.                                 <div class="col-xl-12">
  406.                                     <div class="project_info text-center">
  407.                                     <h2> 5sur5sejour la plateforme sécurisée dédiée aux séjours scolaires, colonies, camps de vacances ou séjours à l'étranger.
  408.                                         </h2><br><br>
  409.                                            <p class="paragHistorique_p2"> Plus de vingt ans de savoir-faire rassemblé sur un même et unique site : c’est cela 5sur5sejour. 
  410.                                             <br>
  411.                                           5sur5 sejour permet aux familles de suivre les aventures de leur enfant parti en séjour scolaire ou en colonie au travers des photos et des messages vocaux postés par l'accompagnateur sur notre plateforme sécurisée.<br> 
  412.                                          <br> Les parents pourront ensuite conserver un souvenir de ces moments grâce à notre gamme de produits photos.
  413.                                           </p>
  414.                                       
  415.                                         {#<a href="#" class="boxed-btn3-white">Contact Us</a>#}
  416.                                     </div>
  417.                                 </div>
  418.                             </div>
  419.                         </div>
  420.                     </div>
  421.                
  422.                     <!-- project  -->
  423.                  
  424.                     <!--/ project  -->
  425.                     <!-- service_area_end -->
  426.                     <!-- service_area_start -->
  427.                     <div class=" service_area a_la_une_area">
  429.                         <div class="row no-margin">
  430.                             <div class="col-xl-12">
  431.                                 <div class="text-center">
  432.                                     <h3 class="title_a_la_une"><a {#href="{{boltHost}}"#} style="color:#41a2aa;">Nous travaillons pour et avec vous... </a></h3>
  435.                                     <h6 class="blog">Notre plateforme 5sur5sejour.com vous permettra de déposer vos photos et vidéos, vos messages audio et localiser vos activités sur une carte. Les parents pourront suivre le séjour de leurs enfants grâce au code séjour que vous leur aurez transmis.
  436. Pour vous, un outil simple, intuitif et sécurisé.
  437. Pour les parents, un outil de création facile à utiliser pour des tirages de qualité.</h6>
  439.                                 </div>
  440.                             </div>
  441.                         </div>
  442.                         <div class="row no-margin actualiteArea">
  443.                      
  444.                                 <div class="col-xl-4 col-md-4  col-sm-12 col-xs-12">
  445.                                     <div class="single_service service_bg_1">
  446.                                         <div class="service_hover a_la_une_Image"  style="background-image:url('{{ asset('Accueil/imagesAccueil/happyF.png')}}') !important"> </div>
  447.                                           <div class="col-md-12 col-xs-12 col-sm-12">
  448.                                           <div class="col-md-6 col-xs-6 col-sm-6  no-padding" style="float: right;">
  449.                                                 <div class="titleright">100% sécurisée </div>
  450.                                           </div>  
  451.                                         </div>
  452.                                         <h3 class="titleAct">Plateforme sécurisée </h3>
  454.                                         <h4 class="sous_titleAct">5sur5sejour est complètement sécurisée,dédiée
  455. aux séjours scolaires, colonies, camps de vacances ou séjours à l'étranger, il n'y a  aucun risque de voir les photos se promener sur la Toile.</h4>
  456.                                         <div class="btnsavoir">    <a class="btnconnection-savoirplus" href="{{path('app_back_Acommpa')}}"> Créer mon séjour </a> </div> 
  457.                                     </div>
  458.                                 </div>
  459.                               <div class="col-xl-4 col-md-4  col-sm-12 col-xs-12">
  460.                                     <div class="single_service service_bg_1">
  461.                                         <div class="service_hover a_la_une_Image"   style="background-image:url('{{ asset('Accueil/imagesAccueil/happyk.png')}}') !important"> </div>
  462.                                           <div class="col-md-12 col-xs-12 col-sm-12">
  463.                                           <div class="col-md-6 col-xs-6 col-sm-6  no-padding" style="float: right;">
  464.                                                 <div class="titleright">Rassurez les familles </div>
  465.                                           </div>  
  466.                                         </div>
  467.                                         <h3 class="titleAct">Communication 24h/24 </h3>
  469.                                         <h4 class="sous_titleAct"> Offrez aux familles la possibilité de consulter les photos de leurs enfants, d'écouter les messages vocaux 24h/24</h4>
  470.                                         <div class="btnsavoir">    <a class="btnconnection-savoirplus" href="{{path('app_back_Acommpa')}}"> Créer mon séjour </a> </div> 
  471.                                     </div>
  472.                                 </div>
  473.                                     <div class="col-xl-4 col-md-4  col-sm-12 col-xs-12">
  474.                                     <div class="single_service service_bg_1">
  475.                                         <div class="service_hover a_la_une_Image"   style="background-image:url('{{ asset('Accueil/imagesAccueil/happyprof.png')}}') !important"> </div>
  476.                                           <div class="col-md-12 col-xs-12 col-sm-12">
  477.                                           <div class="col-md-6 col-xs-6 col-sm-6  no-padding" style="float: right;">
  478.                                                 <div class="titleright">Simple comme un jeu d'enfant   </div>
  479.                                           </div>  
  480.                                         </div>
  481.                                         <h3 class="titleAct">Price en main facile</h3>
  483.                                         <h4 class="sous_titleAct">
  484. Au gré de ses envies, l'accompagnateur peut ajouter des photos ou vidéos, des légendes et des messages audio sans avoir de quelconques connaissances techniques</h4>
  485.                                         <div class="btnsavoir">    <a class="btnconnection-savoirplus" href="{{path('app_back_Acommpa')}}"> Créer mon séjour </a> </div> 
  486.                                     </div>
  487.                                 </div>
  489.                         </div>
  490.                         <!-- service_area_end -->
  491.                         <div class="row no-margin" style="display:none">
  492.                             <div class="optionGroupe col-md-7  col-xs-12 col-sm-12 no-padding" style ="cursor:pointer;">
  493.                                 <div class="row no-margin  col-xs-6 col-sm-6 no-padding rowProd">
  494.                                     <div class="Produit Groupe col-xs-6 col-sm-6">
  495.                                         <h3 class="titreProduit" onclick='location.href="{{path('album',{'id':"ALL"})}}"'>Nos Produits </h3>
  496.                                         <ul style="list-style: none;">
  497.                                           
  498.                                                 {% for produit in produit %}
  499.                                                     {% if produit.labeleType!="Connexion" %}
  501.                                                         <li class="listeOption" {% if app.user %}  onclick='location.href="{{path('albumParent',{'id':produit.labeleType})}}"' {% else %}  onclick='location.href="{{path('album',{'id':produit.labeleType})}}"'{% endif %}>{{produit.labeleType}}</li>
  504.                                                     {% endif %}
  505.                                                 {% endfor %}
  507.                                         </ul>
  508.                                     </div>
  510.                                     <div class="Produit Groupe col-xs-6 col-sm-6">
  512.                                         <h3 class="titreProduit">En savoir plus </h3>
  513.                                         <ul style="list-style: none;">
  514.                                             <li class="listeOption" onclick='location.href = "{{path('album',{'id':'ALL'})}}";'>liste des prix
  515.                                             </li>
  516.                                                           {% if app.user %}
  517.                                            <li class="listeOption">Suivi des commandes</li>
  518.                                              {% endif %}
  519.                                         </ul>
  520.                                     </div>
  521.                                 </div>
  522.                                 <div class="row no-margin  col-xs-6 col-sm-6 no-padding rowProd">
  524.                                     <div class="Produit Groupe col-xs-6 col-sm-6" style="text-align:center;">
  525.                                         <h3 class="titreProduit titrePayemet">Option de paiement </h3>
  526.                                         <img class="payement" src="/images/SVG/Optionde paiement.svg">
  527.                                     </div>
  528.                                     <div class="Produit Groupe col-xs-6 col-sm-6" style='text-align:center;'>
  529.                                         <h3 class="titreProduit titrePayemet">Retrouvez-nous  </h3>
  530.                                         <a class="liensociaux" target="_blank" href="https://www.instagram.com/5sur5sejour/?hl=fr"><img class="linked" src="/images/IconInsta.png"></a>
  531.                                          <a class="liensociaux" target="_blank" href="https://www.facebook.com/5sur5sejour-100176545867454"><img class="facebook" src="/images/fbk.svg"></a>
  532.                                                     </div>
  533.                                                     </div>
  534.                                                     </div>
  535.                                                     </div>
  536.                                                     </div>
  538.                                                 {% endblock %}
  539.                                                 {%block Footer %}
  540.                                                     {{ parent() }}
  541.                                                 {% endblock %}
  543.                                                 {% block javascript %}
  544.                                                     {{ parent() }}
  545.                                                     <script></script>
  546.                                                     <script>
  548.                                                         $(window).load(function () {
  549.                                                             //Dès qu'on clique sur #b1, on applique hide() au titre
  552.                                                             //Dès qu'on clique sur #b1, on applique show() au titre
  553.                                                             $("#voir").click(function () {
  554.                                                                 $(".paragHistorique_p2").show();
  555.                                                             });
  556.                                                             $("#voir").click(function () {
  557.                                                                 $("#voir").hide();
  558.                                                             });
  559.                                                             $('.MyImgFirstPosition').addClass('Myimg');
  560.                                                             $('.MyLineFirstPosition').addClass('MyLine');
  562.                                                             $('.MyLineFirstPosition').removeClass('MyLineFirstPosition');
  564.                                                         });
  565.                                                     </script>
  566.                                                     <script> $(document).ready(function() {
  568.                                                 $('.responsive').slick({
  569.                                                     // dots: true,
  570.                                                     infinite: true,
  571.                                                     speed: 300,
  572.                                                     slidesToShow: 5,
  573.                                                     slidesToScroll: 1,
  574.                                                     autoplay: true,
  575.                                                     responsive: [{
  576.                                                         breakpoint: 1100,
  577.                                                         settings: {
  578.                                                             slidesToShow: 4,
  579.                                                             slidesToScroll: 1,
  580.                                                                autoplay: true,
  581.                                                             // centerMode: true,
  583.                                                         }
  585.                                                     }, {
  586.                                                         breakpoint: 800,
  587.                                                         settings: {
  588.                                                             slidesToShow: 3,
  589.                                                             slidesToScroll: 2,
  590.                                                             dots: true,
  591.                                                                autoplay: true,
  592.                                                             infinite: true,
  594.                                                         }
  597.                                                     }, {
  598.                                                         breakpoint: 600,
  599.                                                         settings: {
  600.                                                             slidesToShow: 2,
  601.                                                             slidesToScroll: 2,
  602.                                                             dots: true,
  603.                                                             infinite: true,
  604.                                                                autoplay: true,
  606.                                                         }
  607.                                                     }, {
  608.                                                         breakpoint: 480,
  609.                                                         settings: {
  610.                                                             slidesToShow: 1,
  611.                                                             slidesToScroll: 1,
  612.                                                             dots: true,
  613.                                                             infinite: true,
  614.                                                             autoplay: true,
  615.                                                             autoplaySpeed: 2000,
  616.                                                         }
  617.                                                     }]
  618.                                                 });
  621.                                             });</script> 
  622.                                                 {% endblock %}