@extends('master')
@section('style')
<link rel='stylesheet' href="{{mix('/assets/css/app.css')}}" type='text/css' media='all' />
@endsection
@section('content')
<section class="main-title-section-wrapper default" style="">
    <div class="container">
        <div class="main-title-section">
            <h1>Membresía</h1>
        </div>
        <div class="breadcrumb"><a href="/">Inicio</a><span class="fa default"></span><span class="current">Membresía</span></div>
        @include('partials.submenu')
    </div>
</section>
<!-- ** Container ** -->
<div class="container">
    <section id="primary" class="content-full-width">
        <div id="post-12" class="post-12 page type-page status-publish hentry">
            <div class="vc_row wpb_row vc_row-fluid safari-hack vc_row-o-equal-height vc_row-o-content-middle vc_row-flex">
                <div class="wpb_column vc_column_container vc_col-sm-12">
                    <div class="vc_column-inner ">
                        <div class="wpb_wrapper">
                            <div class="ult-animation  ult-animate-viewport  ult-no-mobile " data-animate="fadeInDown" data-animation-delay="0.5" data-animation-duration="1" data-animation-iteration="1" style="opacity:1;-webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; transition-delay: 0.5s;" data-opacity_start_effect="">
                                <div class="dt-sc-title with-right-border-decor aligncenter animated fadeInDown" style="opacity:1;-webkit-animation-delay:0.5s;-webkit-animation-duration:1s;-webkit-animation-iteration-count:1; -moz-animation-delay:0.5s;-moz-animation-duration:1s;-moz-animation-iteration-count:1; animation-delay:0.5s;animation-duration:1s;animation-iteration-count:1;test">
                                    <h6>JUNEDAP</h6>
                                    <h2>Programa de Membresía</h2>
                                </div>
                            </div>
                            <div class="ult-spacer spacer-64f4e2fd886f3" data-id="64f4e2fd886f3" data-height="60" data-height-mobile="60" data-height-tab="60" data-height-tab-portrait="" data-height-mobile-landscape="" style="clear:both;display:block;"></div>
                        </div>
                    </div>
                </div>
                <div class="wpb_column vc_column_container vc_col-sm-3">
                    <div class="vc_column-inner vc_custom_1493805059752">
                        <div class="wpb_wrapper">
                            <div class="ult-animation  ult-animate-viewport  ult-no-mobile " data-animate="fadeInLeft" data-animation-delay="0.8" data-animation-duration="1" data-animation-iteration="1" style="opacity:1;-webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; transition-delay: 0.8s;" data-opacity_start_effect="">
                                <div class="dt-sc-icon-box type2 alignright no-icon animated fadeInLeft" style="opacity:1;-webkit-animation-delay:0.8s;-webkit-animation-duration:1s;-webkit-animation-iteration-count:1; -moz-animation-delay:0.8s;-moz-animation-duration:1s;-moz-animation-iteration-count:1; animation-delay:0.8s;animation-duration:1s;animation-iteration-count:1;test">
                                    <div class="icon-content">
                                        <h4>Descuentos <strong> Exclusivos </strong> <i> .01 </i></h4>
                                        <p>Ser parte de este programa te ofrece exclusivos descuentos para disfrutar solo o en familia.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="ult-spacer spacer-64f4e2fd888d6" data-id="64f4e2fd888d6" data-height="38" data-height-mobile="38" data-height-tab="38" data-height-tab-portrait="" data-height-mobile-landscape="" style="clear:both;display:block;"></div>
                            <div class="ult-animation  ult-animate-viewport  ult-no-mobile " data-animate="fadeInLeft" data-animation-delay="1.1" data-animation-duration="1" data-animation-iteration="1" style="opacity:1;-webkit-transition-delay: 1.1s; -moz-transition-delay: 1.1s; transition-delay: 1.1s;" data-opacity_start_effect="">
                                <div class="dt-sc-icon-box type2 alignright no-icon animated fadeInLeft" style="opacity:1;-webkit-animation-delay:1.1s;-webkit-animation-duration:1s;-webkit-animation-iteration-count:1; -moz-animation-delay:1.1s;-moz-animation-duration:1s;-moz-animation-iteration-count:1; animation-delay:1.1s;animation-duration:1s;animation-iteration-count:1;test">
                                    <div class="icon-content">
                                        <h4>Actividades <strong> Académicas </strong> <i> .02 </i></h4>
                                        <p>Capacitación permanente ya sea gratuita o con descuentos especiales</p>
                                    </div>
                                </div>
                            </div>
                            <div class="ult-spacer spacer-64f4e2fd8894a" data-id="64f4e2fd8894a" data-height="38" data-height-mobile="38" data-height-tab="38" data-height-tab-portrait="" data-height-mobile-landscape="" style="clear:both;display:block;"></div>
                            <div class="ult-animation  ult-animate-viewport  ult-no-mobile " data-animate="fadeInLeft" data-animation-delay="1.4" data-animation-duration="1" data-animation-iteration="1" style="opacity:1;-webkit-transition-delay: 1.4s; -moz-transition-delay: 1.4s; transition-delay: 1.4s;" data-opacity_start_effect="">
                                <div class="dt-sc-icon-box type2 alignright no-icon animated fadeInLeft" style="opacity:1;-webkit-animation-delay:1.4s;-webkit-animation-duration:1s;-webkit-animation-iteration-count:1; -moz-animation-delay:1.4s;-moz-animation-duration:1s;-moz-animation-iteration-count:1; animation-delay:1.4s;animation-duration:1s;animation-iteration-count:1;test">
                                    <div class="icon-content">
                                        <h4>Actividades <strong> Deportivas </strong> <i> .03 </i></h4>
                                        <p>Encuentros deportivos de fútbol, básquet y voley a nivel local, regional y nacional.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main-circle wpb_column vc_column_container vc_col-sm-6 vc_col-has-fill">
                    <div class="vc_column-inner vc_custom_1493873433275">
                        <div class="wpb_wrapper">
                            <div class="ult-animation  ult-animate-viewport  ult-no-mobile " data-animate="zoomInDown" data-animation-delay="1.7" data-animation-duration="1" data-animation-iteration="1" style="opacity:1;-webkit-transition-delay: 1.7s; -moz-transition-delay: 1.7s; transition-delay: 1.7s;" data-opacity_start_effect="">
                                <div class="info-wrapper ult-adjust-bottom-margin animated zoomInDown" style="opacity:1;-webkit-animation-delay:1.7s;-webkit-animation-duration:1s;-webkit-animation-iteration-count:1; -moz-animation-delay:1.7s;-moz-animation-duration:1s;-moz-animation-iteration-count:1; animation-delay:1.7s;animation-duration:1s;animation-iteration-count:1;test">
                                    <div id="info-circle-wrapper-64f4e2fd88bd6" data-uniqid="64f4e2fd88bd6" class="info-circle-wrapper  info-circle-responsive " data-half-percentage="70" data-circle-type="full-circle" style="margin-top: 20px; margin-bottom: 20px;">
                                        <div class="info-c-full-br" style="border: 1px dashed rgb(226, 226, 226); width: 200%; opacity: 1; height: 418px;" data-start-degree="90" data-divert="" data-info-circle-angle="full" data-responsive-circle="on" data-responsive-breakpoint="800" data-launch="" data-launch-duration="1" data-launch-delay="0.2" data-slide-true="false" data-slide-duration="3" data-icon-size="10" data-icon-show="not-show" data-icon-show-size="" data-highlight-style="info-circle-highlight-style" data-focus-on="hover" data-slide-number="1">
                                            <div class="icon-circle-list">
                                                <div class="info-circle-icons" style="background: rgb(67, 201, 198); color: rgb(255, 255, 255); font-size: 10px; height: 20px; width: 20px; margin: -10px; line-height: 20px; opacity: 1; left: -3.76928e-07px; top: -210px;"><i class=" info-circle-icon"></i></div>
                                                <div class="info-details" data-icon-class="ult-info-circle-icon">
                                                    <div class="info-circle-def">
                                                        <div class="info-circle-sub-def">
                                                            <div class="responsive-font-class ult-responsive">
                                                                <h3 data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class h3.new-cust-responsive-class" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" class="info-circle-heading h3-membresia ult-responsive new-cust-responsive-class" style="font-weight:bold;">Descuentos Exclusivos</h3>
                                                                <div class="info-circle-text " style="font-weight:bold;"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="info-circle-icons " style="background: rgb(255, 51, 102); color: rgb(255, 255, 255); font-size: 10px; height: 20px; width: 20px; margin: -10px; line-height: 20px; opacity: 1; left: 148.492px; top: -148.492px;"><i class="none info-circle-icon"></i></div>
                                                <div class="info-details" data-icon-class="ult-info-circle-icon">
                                                    <div class="info-circle-def">
                                                        <div class="info-circle-sub-def">
                                                            <i class="none info-circle-icon"></i>
                                                            <div class="responsive-font-class ult-responsive">
                                                                <h3 data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class h3.new-cust-responsive-class" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" class="info-circle-heading h3-membresia ult-responsive new-cust-responsive-class" style="font-weight:bold;">Actividades Académicas</h3>
                                                                <div class="info-circle-text " style="font-weight:bold;"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="info-circle-icons " style="background: rgb(255, 246, 6); color: rgb(255, 255, 255); font-size: 10px; height: 20px; width: 20px; margin: -10px; line-height: 20px; opacity: 1; left: 210px; top: -7.53857e-07px;"><i class="none info-circle-icon"></i></div>
                                                <div class="info-details" data-icon-class="ult-info-circle-icon">
                                                    <div class="info-circle-def">
                                                        <div class="info-circle-sub-def">
                                                            <i class="none info-circle-icon"></i>
                                                            <div class="responsive-font-class ult-responsive">
                                                                <h3 data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class h3.new-cust-responsive-class" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" class="info-circle-heading h3-membresia ult-responsive new-cust-responsive-class" style="font-weight:bold;">Actividades Deportivas</h3>
                                                                <div class="info-circle-text " style="font-weight:bold;"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="info-circle-icons " style="background: rgb(15, 184, 205); color: rgb(255, 255, 255); font-size: 10px; height: 20px; width: 20px; margin: -10px; line-height: 20px; opacity: 1; left: 148.492px; top: 148.492px;"><i class="none info-circle-icon"></i></div>
                                                <div class="info-details" data-icon-class="ult-info-circle-icon">
                                                    <div class="info-circle-def">
                                                        <div class="info-circle-sub-def">
                                                            <i class="none info-circle-icon"></i>
                                                            <div class="responsive-font-class ult-responsive">
                                                                <h3 data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class h3.new-cust-responsive-class" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" class="info-circle-heading h3-membresia ult-responsive new-cust-responsive-class" style="font-weight:bold;">Actividades Sociales</h3>
                                                                <div class="info-circle-text " style="font-weight:bold;"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="info-circle-icons info-circle-highlight-style info-circle-active" style="background: rgb(245, 53, 55); color: rgb(255, 255, 255); font-size: 10px; height: 20px; width: 20px; margin: -10px; line-height: 20px; opacity: 1; left: 1.1e-06px; top: 210px;"><i class="none info-circle-icon"></i></div>
                                                <div class="info-details" data-icon-class="ult-info-circle-icon">
                                                    <div class="info-circle-def">
                                                        <div class="info-circle-sub-def">
                                                            <div class="responsive-font-class ult-responsive">
                                                                <h3 data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class h3.new-cust-responsive-class" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" class="info-circle-heading h3-membresia ult-responsive new-cust-responsive-class" style="font-weight:bold;">Actividades de Proyección Social</h3>
                                                                <div class="info-circle-text " style="font-weight:bold;"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="info-circle-icons " style="background: rgb(167, 200, 34); color: rgb(255, 255, 255); font-size: 10px; height: 20px; width: 20px; margin: -10px; line-height: 20px; opacity: 1; left: -148.492px; top: 148.492px;"><i class="none info-circle-icon"></i></div>
                                                <div class="info-details" data-icon-class="ult-info-circle-icon">
                                                    <div class="info-circle-def">
                                                        <div class="info-circle-sub-def">
                                                            <i class="none info-circle-icon"></i>
                                                            <div class="responsive-font-class ult-responsive">
                                                                <h3 data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class h3.new-cust-responsive-class" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" class="info-circle-heading h3-membresia ult-responsive new-cust-responsive-class" style="font-weight:bold;">Bicicleteadas</h3>
                                                                <div class="info-circle-text " style="font-weight:bold;"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="info-circle-icons " style="background: rgb(254, 197, 20); color: rgb(255, 255, 255); font-size: 10px; height: 20px; width: 20px; margin: -10px; line-height: 20px; opacity: 1; left: -210px; top: 1.5e-06px;"><i class="none info-circle-icon"></i></div>
                                                <div class="info-details" data-icon-class="ult-info-circle-icon">
                                                    <div class="info-circle-def">
                                                        <div class="info-circle-sub-def">
                                                            <i class="none info-circle-icon"></i>
                                                            <div class="responsive-font-class ult-responsive">
                                                                <h3 data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class h3.new-cust-responsive-class" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" class="info-circle-heading h3-membresia ult-responsive new-cust-responsive-class" style="font-weight:bold;">Maratónes</h3>
                                                                <div class="info-circle-text " style="font-weight:bold;"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="info-circle-icons " style="background: rgb(79, 36, 158); color: rgb(255, 255, 255); font-size: 10px; height: 20px; width: 20px; margin: -10px; line-height: 20px; opacity: 1; left: -148.492px; top: -148.492px;"><i class="none info-circle-icon"></i></div>
                                                <div class="info-details" data-icon-class="ult-info-circle-icon">
                                                    <div class="info-circle-def">
                                                        <div class="info-circle-sub-def">
                                                            <i class="none info-circle-icon"></i>
                                                            <div class="responsive-font-class ult-responsive">
                                                                <h3 data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class h3.new-cust-responsive-class" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" class="info-circle-heading h3-membresia ult-responsive new-cust-responsive-class" style="font-weight:bold;">Libros</h3>
                                                                <div class="info-circle-text " style="font-weight:bold;"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="info-cirlce-wrap-7677" class="info-c-full circle-noicon" style="background-color:;color:#ffffff;width:60%;height:60%;margin:20%;">
                                                <div class="info-c-full-wrap" style="opacity: 1;">
                                                    <div class="info-circle-def">
                                                        <div class="info-circle-sub-def">
                                                            <div class="responsive-font-class ult-responsive">
                                                                <h3 data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class h3.new-cust-responsive-class" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" class="info-circle-heading h3-membresia ult-responsive new-cust-responsive-class" style="font-weight:bold;">Actividades de Proyección Social</h3>
                                                                <div class="info-circle-text " style="font-weight:bold;"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="smile_icon_list_wrap " data-content_bg="" data-content_color="#ffffff">
                                            <ul id="info-cirlce-wrap-7677" class="smile_icon_list left circle with_bg">
                                                <li class="icon_list_item ult-info-circle-icon" style="font-size:30px;">
                                                    <div class="icon_list_icon" style="font-size: 10px; width: 10px; height: 10px; line-height: 1; background-color: rgb(67, 201, 198); color: rgb(255, 255, 255); border: 0px none rgb(255, 255, 255);"><i class=" info-circle-icon"></i></div>
                                                    <div class="icon_description" style="font-size: 10px; color: rgb(255, 255, 255);">
                                                        <div class="responsive-font-class ult-responsive" data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class *" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" style="font-weight:bold;">
                                                            <h3 data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class h3.new-cust-responsive-class" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" class="h3-membresia ult-responsive new-cust-responsive-class" style="font-weight:bold;">Descuentos Exclusivos</h3>
                                                        </div>
                                                    </div>
                                                    <div class="icon_list_connector" style=" border-style:dashed;border-color:#e2e2e2; left:5px; top:10px;">
                                                    </div>
                                                </li>
                                                <li class="icon_list_item ult-info-circle-icon" style="font-size:30px;">
                                                    <div class="icon_list_icon" style="font-size: 10px; width: 10px; height: 10px; line-height: 1; background-color: rgb(255, 51, 102); color: rgb(255, 255, 255); border: 0px none rgb(255, 255, 255);"><i class="none info-circle-icon"></i></div>
                                                    <div class="icon_description" style="font-size: 10px; color: rgb(255, 255, 255);">
                                                        <div class="responsive-font-class ult-responsive" data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class *" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" style="font-weight:bold;">
                                                            <h3 data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class h3.new-cust-responsive-class" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" class="h3-membresia ult-responsive new-cust-responsive-class" style="font-weight:bold;">Actividades Académicas</h3>
                                                        </div>
                                                    </div>
                                                    <div class="icon_list_connector" style=" border-style:dashed;border-color:#e2e2e2; left:5px; top:10px;">
                                                    </div>
                                                </li>
                                                <li class="icon_list_item ult-info-circle-icon" style="font-size:30px;">
                                                    <div class="icon_list_icon" style="font-size: 10px; width: 10px; height: 10px; line-height: 1; background-color: rgb(255, 246, 6); color: rgb(255, 255, 255); border: 0px none rgb(255, 255, 255);"><i class="none info-circle-icon"></i></div>
                                                    <div class="icon_description" style="font-size: 10px; color: rgb(255, 255, 255);">
                                                        <div class="responsive-font-class ult-responsive" data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class *" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" style="font-weight:bold;">
                                                            <h3 data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class h3.new-cust-responsive-class" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" class="h3-membresia ult-responsive new-cust-responsive-class" style="font-weight:bold;">Actividades Deportivas</h3>
                                                        </div>
                                                    </div>
                                                    <div class="icon_list_connector" style=" border-style:dashed;border-color:#e2e2e2; left:5px; top:10px;">
                                                    </div>
                                                </li>
                                                <li class="icon_list_item ult-info-circle-icon" style="font-size:30px;">
                                                    <div class="icon_list_icon" style="font-size: 10px; width: 10px; height: 10px; line-height: 1; background-color: rgb(15, 184, 205); color: rgb(255, 255, 255); border: 0px none rgb(255, 255, 255);"><i class="none info-circle-icon"></i></div>
                                                    <div class="icon_description" style="font-size: 10px; color: rgb(255, 255, 255);">
                                                        <div class="responsive-font-class ult-responsive" data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class *" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" style="font-weight:bold;">
                                                            <h3 data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class h3.new-cust-responsive-class" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" class="h3-membresia ult-responsive new-cust-responsive-class" style="font-weight:bold;">Actividades Sociales</h3>
                                                        </div>
                                                    </div>
                                                    <div class="icon_list_connector" style=" border-style:dashed;border-color:#e2e2e2; left:5px; top:10px;">
                                                    </div>
                                                </li>
                                                <li class="icon_list_item ult-info-circle-icon" style="font-size:30px;">
                                                    <div class="icon_list_icon" style="font-size: 10px; width: 10px; height: 10px; line-height: 1; background-color: rgb(245, 53, 55); color: rgb(255, 255, 255); border: 0px none rgb(255, 255, 255);"><i class="none info-circle-icon"></i></div>
                                                    <div class="icon_description" style="font-size: 10px; color: rgb(255, 255, 255);">
                                                        <div class="responsive-font-class ult-responsive" data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class *" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" style="font-weight:bold;">
                                                            <h3 data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class h3.new-cust-responsive-class" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" class="h3-membresia ult-responsive new-cust-responsive-class" style="font-weight:bold;">Actividades de Proyección Social</h3>
                                                        </div>
                                                    </div>
                                                    <div class="icon_list_connector" style=" border-style:dashed;border-color:#e2e2e2; left:5px; top:10px;">
                                                    </div>
                                                </li>
                                                <li class="icon_list_item ult-info-circle-icon" style="font-size:30px;">
                                                    <div class="icon_list_icon" style="font-size: 10px; width: 10px; height: 10px; line-height: 1; background-color: rgb(167, 200, 34); color: rgb(255, 255, 255); border: 0px none rgb(255, 255, 255);"><i class="none info-circle-icon"></i></div>
                                                    <div class="icon_description" style="font-size: 10px; color: rgb(255, 255, 255);">
                                                        <div class="responsive-font-class ult-responsive" data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class *" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" style="font-weight:bold;">
                                                            <h3 data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class h3.new-cust-responsive-class" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" class="h3-membresia ult-responsive new-cust-responsive-class" style="font-weight:bold;">Bicicleteadas</h3>
                                                        </div>
                                                    </div>
                                                    <div class="icon_list_connector" style=" border-style:dashed;border-color:#e2e2e2; left:5px; top:10px;">
                                                    </div>
                                                </li>
                                                <li class="icon_list_item ult-info-circle-icon" style="font-size:30px;">
                                                    <div class="icon_list_icon" style="font-size: 10px; width: 10px; height: 10px; line-height: 1; background-color: rgb(254, 197, 20); color: rgb(255, 255, 255); border: 0px none rgb(255, 255, 255);"><i class="none info-circle-icon"></i></div>
                                                    <div class="icon_description" style="font-size: 10px; color: rgb(255, 255, 255);">
                                                        <div class="responsive-font-class ult-responsive" data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class *" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" style="font-weight:bold;">
                                                            <h3 data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class h3.new-cust-responsive-class" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" class="h3-membresia ult-responsive new-cust-responsive-class" style="font-weight:bold;">Maratónes</h3>
                                                        </div>
                                                    </div>
                                                    <div class="icon_list_connector" style=" border-style:dashed;border-color:#e2e2e2; left:5px; top:10px;">
                                                    </div>
                                                </li>
                                                <li class="icon_list_item ult-info-circle-icon" style="font-size:30px;">
                                                    <div class="icon_list_icon" style="font-size: 10px; width: 10px; height: 10px; line-height: 1; background-color: rgb(79, 36, 158); color: rgb(255, 255, 255); border: 0px none rgb(255, 255, 255);"><i class="none info-circle-icon"></i></div>
                                                    <div class="icon_description" style="font-size: 10px; color: rgb(255, 255, 255);">
                                                        <div class="responsive-font-class ult-responsive" data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class *" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" style="font-weight:bold;">
                                                            <h3 data-ultimate-target="#info-cirlce-wrap-7677 .responsive-font-class h3.new-cust-responsive-class" data-responsive-json-new="{&quot;font-size&quot;:&quot;&quot;,&quot;line-height&quot;:&quot;&quot;}" class="h3-membresia ult-responsive new-cust-responsive-class" style="font-weight:bold;">Libros</h3>
                                                        </div>
                                                    </div>
                                                    <div class="icon_list_connector" style=" border-style:dashed;border-color:#e2e2e2; left:5px; top:10px;">
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="wpb_column vc_column_container vc_col-sm-3">
                    <div class="vc_column-inner vc_custom_1493805049889">
                        <div class="wpb_wrapper">
                            <div class="ult-spacer spacer-64f4e2fd88fc4" data-id="64f4e2fd88fc4" data-height="38" data-height-mobile="38" data-height-tab="38" data-height-tab-portrait="" data-height-mobile-landscape="" style="clear:both;display:block;"></div>                            
                            <div class="ult-animation  ult-animate-viewport  ult-no-mobile " data-animate="fadeInRight" data-animation-delay="0.8" data-animation-duration="1" data-animation-iteration="1" style="opacity:1;-webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; transition-delay: 0.8s;" data-opacity_start_effect="">
                                <div class="dt-sc-icon-box type2 no-icon animated fadeInRight" style="opacity:1;-webkit-animation-delay:0.8s;-webkit-animation-duration:1s;-webkit-animation-iteration-count:1; -moz-animation-delay:0.8s;-moz-animation-duration:1s;-moz-animation-iteration-count:1; animation-delay:0.8s;animation-duration:1s;animation-iteration-count:1;test">
                                    <div class="icon-content">
                                        <h4><i> 04. </i> Actividades <strong> Sociales </strong></h4>
                                        <p>Organización con almuerzos y orquestas musicales a distintos eventos.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="ult-spacer spacer-64f4e2fd88f54" data-id="64f4e2fd88f54" data-height="38" data-height-mobile="38" data-height-tab="38" data-height-tab-portrait="" data-height-mobile-landscape="" style="clear:both;display:block;"></div>
                            <div class="ult-animation  ult-animate-viewport  ult-no-mobile " data-animate="fadeInRight" data-animation-delay="1.1" data-animation-duration="1" data-animation-iteration="1" style="opacity:1;-webkit-transition-delay: 1.1s; -moz-transition-delay: 1.1s; transition-delay: 1.1s;" data-opacity_start_effect="">
                                <div class="dt-sc-icon-box type2 no-icon animated fadeInRight" style="opacity:1;-webkit-animation-delay:1.1s;-webkit-animation-duration:1s;-webkit-animation-iteration-count:1; -moz-animation-delay:1.1s;-moz-animation-duration:1s;-moz-animation-iteration-count:1; animation-delay:1.1s;animation-duration:1s;animation-iteration-count:1;test">
                                    <div class="icon-content">
                                        <h4><i> 05. </i> Actividades de <strong> Proyección Social</strong></h4>
                                        <p>En cooperación con municipalidades y gobiernos regionales la realización de jornadas médicas y consultorías jurídicas gratuitas.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="ult-spacer spacer-64f4e2fd88fc4" data-id="64f4e2fd88fc4" data-height="38" data-height-mobile="38" data-height-tab="38" data-height-tab-portrait="" data-height-mobile-landscape="" style="clear:both;display:block;"></div>
                            <div class="ult-animation  ult-animate-viewport  ult-no-mobile " data-animate="fadeInRight" data-animation-delay="1.4" data-animation-duration="1" data-animation-iteration="1" style="opacity:1;-webkit-transition-delay: 1.4s; -moz-transition-delay: 1.4s; transition-delay: 1.4s;" data-opacity_start_effect="">
                                <div class="dt-sc-icon-box type2 no-icon animated fadeInRight" style="opacity:1;-webkit-animation-delay:1.4s;-webkit-animation-duration:1s;-webkit-animation-iteration-count:1; -moz-animation-delay:1.4s;-moz-animation-duration:1s;-moz-animation-iteration-count:1; animation-delay:1.4s;animation-duration:1s;animation-iteration-count:1;test">
                                    <div class="icon-content">
                                        <h4><i> 06. </i> Mucho <strong> más... </strong></h4>
                                        <p>Bicicleteadas, maratónes, libros, etc</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="wpb_column vc_column_container vc_col-sm-12">
                    <div class="vc_column-inner ">
                        <div class="wpb_wrapper">
                            <div class="ult-spacer spacer-64f4e2fd89432" data-id="64f4e2fd89432" data-height="100" data-height-mobile="100" data-height-tab="100" data-height-tab-portrait="" data-height-mobile-landscape="" style="clear:both;display:block;"></div>
                        </div>
                    </div>
                </div>


 
                    <div class="wpb_column vc_column_container vc_col-sm-12" style="margin-bottom: 50px">
                        <div style="width: 100%!important;">
                            <div class="vc_column-inner" style="margin-bottom: 20px">
                                <div class="wpb_wrapper">
                                    <div class="ult-animation  ult-animate-viewport  ult-no-mobile " data-animate="fadeInDown" data-animation-delay="0.5" data-animation-duration="1" data-animation-iteration="1" style="opacity:1;-webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; transition-delay: 0.5s;" data-opacity_start_effect="">
                                        <div class="dt-sc-title with-right-border-decor aligncenter animated fadeInDown" style="opacity:1;-webkit-animation-delay:0.5s;-webkit-animation-duration:1s;-webkit-animation-iteration-count:1; -moz-animation-delay:0.5s;-moz-animation-duration:1s;-moz-animation-iteration-count:1; animation-delay:0.5s;animation-duration:1s;animation-iteration-count:1;test">
                                            <h6>JUNEDAP</h6>
                                            <h4>Nuestros Planes</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>                            
                            @if(!empty($planes))
                                @foreach ($planes as $i => $item)
                                <div class="wpb_column vc_column_container vc_col-sm-3" style="margin-bottom: 50px;">
                                    <div class="vc_column-inner">
                                        <div class="wpb_wrapper">
                                            <div class="dt-sc-pr-tb-col type2">
                                                <div class="plain_image">
                                                    <img src="{{config('app.cdn_files') . '/membership/' . $item->image}}" style="max-width: 225px">
                                                </div>                                     
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            @endif
                            <br>
                            <center style="margin: 20px; color: #8D2115">Somos la <strong>JUNEDAP</strong>, Uniendo a la <strong> comunidad jurídica peruana... </strong> en una gran familia</center>
                        </div>
                    </div>


            </div>
        </div>
    </section>
    <!-- **Primary - End** -->        
</div>
<!-- **Container - End** -->
@endsection
@section('scripts')
@endsection