Menu Complete

<div class="main-menu-container">
    <div class="row column medium-12">
        <div class="navigation_offcanvas_bar hide-for-large row">
            <div class="columns small-3">
                <div class="burger">
                    <span class="b1"></span>
                    <span class="b2"></span>
                    <span class="b3"></span>
                </div>
            </div>
            <div class="columns small-6 text-center">
                <label for="target_menu">
                    Info per <svg class="icon icon-drop-down" style="vertical-align: text-bottom" data-element="icon" data-category="general">
                        <use xlink:href="#drop-down"></use>
                    </svg>

                </label>
            </div>
            <div class="columns small-3 text-right">
                <a href="">English</a>
            </div>
        </div>
        <nav class="navigation_container">
            <div class="navigation_offcanvas_innerbar hide-for-large-up">
                <div class="cross">
                    <span class="b1"></span>
                    <span class="b2"></span>
                </div>
            </div>
            <ul class="row navigation no-style">
                <div class="navigation_bg">
                    <li>
                        <h3><label for="nav0">University</label></h3>
                        <span class="form__element__bar"></span>
                    </li>
                    <li>
                        <h3><label for="nav1">Education</label></h3>
                        <span class="form__element__bar"></span>
                    </li>
                    <li>
                        <h3><label for="nav2">Research</label></h3>
                        <span class="form__element__bar"></span>
                    </li>
                    <li>
                        <h3><label for="nav3">News &amp; Events</label></h3>
                        <span class="form__element__bar"></span>
                    </li>
                    <li class="search hide-for-medium-only hide-for-small-only">
                        <form class="form">
                            <div class="form__element">
                                <input class="font--M" type="text" value="" required="">
                                <span class="form__element__bar"></span>
                                <label class="font--M">Search</label>
                            </div>
                        </form>
                        <div class="search-icon with-calendar">
                            <svg class="icon icon-search" data-element="icon" data-category="general">
                                <use xlink:href="#search"></use>
                            </svg>
                        </div>
                        <div class="show_calendar">
                            <svg class="icon icon-calendar" data-element="icon" data-category="general">
                                <use xlink:href="#calendar"></use>
                            </svg>
                        </div>
                    </li>
                </div>
            </ul>
            <div class="navigation-placeholder"></div>
            <div class="navigation_submenues row">
                <div>
                    <input type="radio" name="nav-lvl-1" id="nav0">
                    <div class="submenu_title">
                        <i class="back"></i>
                        University
                    </div>
                    <ul class="submenu">
                        <li>
                            <a href="">title_2_0 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                    <use xlink:href="#external-link"></use>
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="">title_2_1 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                    <use xlink:href="#external-link"></use>
                                </svg>
                            </a>
                        </li>
                        <li>
                            <input type="radio" name="" id="nav-title_2_2">
                            <label for="nav-title_2_2">
                                title_2_2
                                <svg class="icon icon-drop-right" data-element="icon" data-category="general">
                                    <use xlink:href="#drop-right"></use>
                                </svg>
                                <i class="arrow"><span class="b1"></span><span class="b2"></span><span class="b3"></span></i>
                            </label>
                            <ul class="submenu">
                                <li>
                                    <a href="">title_3_0 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="">title_3_1 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <input type="radio" name="" id="nav-title_2_3">
                            <label for="nav-title_2_3">
                                title_2_3
                                <svg class="icon icon-drop-right" data-element="icon" data-category="general">
                                    <use xlink:href="#drop-right"></use>
                                </svg>
                                <i class="arrow"><span class="b1"></span><span class="b2"></span><span class="b3"></span></i>
                            </label>
                            <ul class="submenu">
                                <li>
                                    <a href="">title_3_0</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="">title_2_4 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                    <use xlink:href="#external-link"></use>
                                </svg>
                            </a>
                        </li>
                    </ul>
                </div>
                <div>
                    <input type="radio" name="nav-lvl-1" id="nav1">
                    <div class="submenu_title">
                        <i class="back"></i>
                        Education
                    </div>
                    <ul class="submenu">
                        <li>
                            <input type="radio" name="" id="nav-title_2_0">
                            <label for="nav-title_2_0">
                                title_2_0
                                <svg class="icon icon-drop-right" data-element="icon" data-category="general">
                                    <use xlink:href="#drop-right"></use>
                                </svg>
                                <i class="arrow"><span class="b1"></span><span class="b2"></span><span class="b3"></span></i>
                            </label>
                            <ul class="submenu">
                                <li>
                                    <a href="">title_3_0</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="">title_2_1 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                    <use xlink:href="#external-link"></use>
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="">title_2_2</a>
                        </li>
                        <li>
                            <a href="">title_2_3 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                    <use xlink:href="#external-link"></use>
                                </svg>
                            </a>
                        </li>
                        <li>
                            <input type="radio" name="" id="nav-title_2_4">
                            <label for="nav-title_2_4">
                                title_2_4
                                <svg class="icon icon-drop-right" data-element="icon" data-category="general">
                                    <use xlink:href="#drop-right"></use>
                                </svg>
                                <i class="arrow"><span class="b1"></span><span class="b2"></span><span class="b3"></span></i>
                            </label>
                            <ul class="submenu">
                                <li>
                                    <a href="">title_3_0 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="">title_3_1 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="">title_3_2 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="">title_3_3 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="">title_3_4 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="">title_3_5 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="">title_2_5 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                    <use xlink:href="#external-link"></use>
                                </svg>
                            </a>
                        </li>
                        <li>
                            <input type="radio" name="" id="nav-title_2_6">
                            <label for="nav-title_2_6">
                                title_2_6
                                <svg class="icon icon-drop-right" data-element="icon" data-category="general">
                                    <use xlink:href="#drop-right"></use>
                                </svg>
                                <i class="arrow"><span class="b1"></span><span class="b2"></span><span class="b3"></span></i>
                            </label>
                            <ul class="submenu">
                                <li>
                                    <a href="">title_3_0</a>
                                </li>
                                <li>
                                    <a href="">title_3_1 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="">title_3_2</a>
                                </li>
                                <li>
                                    <a href="">title_3_3 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div>
                    <input type="radio" name="nav-lvl-1" id="nav2">
                    <div class="submenu_title">
                        <i class="back"></i>
                        Research
                    </div>
                    <ul class="submenu">
                        <li>
                            <input type="radio" name="" id="nav-title_2_0">
                            <label for="nav-title_2_0">
                                title_2_0
                                <svg class="icon icon-drop-right" data-element="icon" data-category="general">
                                    <use xlink:href="#drop-right"></use>
                                </svg>
                                <i class="arrow"><span class="b1"></span><span class="b2"></span><span class="b3"></span></i>
                            </label>
                            <ul class="submenu">
                                <li>
                                    <a href="">title_3_0 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="">title_3_1</a>
                                </li>
                                <li>
                                    <a href="">title_3_2 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="">title_3_3 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="">title_3_4 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="">title_3_5 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="">title_2_1 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                    <use xlink:href="#external-link"></use>
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="">title_2_2 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                    <use xlink:href="#external-link"></use>
                                </svg>
                            </a>
                        </li>
                        <li>
                            <input type="radio" name="" id="nav-title_2_3">
                            <label for="nav-title_2_3">
                                title_2_3
                                <svg class="icon icon-drop-right" data-element="icon" data-category="general">
                                    <use xlink:href="#drop-right"></use>
                                </svg>
                                <i class="arrow"><span class="b1"></span><span class="b2"></span><span class="b3"></span></i>
                            </label>
                            <ul class="submenu">
                                <li>
                                    <a href="">title_3_0 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="">title_3_1 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="">title_3_2 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="">title_3_3</a>
                                </li>
                                <li>
                                    <a href="">title_3_4</a>
                                </li>
                                <li>
                                    <a href="">title_3_5</a>
                                </li>
                                <li>
                                    <a href="">title_3_6</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <input type="radio" name="" id="nav-title_2_4">
                            <label for="nav-title_2_4">
                                title_2_4
                                <svg class="icon icon-drop-right" data-element="icon" data-category="general">
                                    <use xlink:href="#drop-right"></use>
                                </svg>
                                <i class="arrow"><span class="b1"></span><span class="b2"></span><span class="b3"></span></i>
                            </label>
                            <ul class="submenu">
                                <li>
                                    <a href="">title_3_0 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="">title_3_1 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="">title_3_2</a>
                                </li>
                                <li>
                                    <a href="">title_3_3 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="">title_3_4 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="">title_3_5</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div>
                    <input type="radio" name="nav-lvl-1" id="nav3">
                    <div class="submenu_title">
                        <i class="back"></i>
                        News &amp; Events
                    </div>
                    <ul class="submenu">
                        <li>
                            <a href="">title_2_0 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                    <use xlink:href="#external-link"></use>
                                </svg>
                            </a>
                        </li>
                        <li>
                            <input type="radio" name="" id="nav-title_2_1">
                            <label for="nav-title_2_1">
                                title_2_1
                                <svg class="icon icon-drop-right" data-element="icon" data-category="general">
                                    <use xlink:href="#drop-right"></use>
                                </svg>
                                <i class="arrow"><span class="b1"></span><span class="b2"></span><span class="b3"></span></i>
                            </label>
                            <ul class="submenu">
                                <li>
                                    <a href="">title_3_0 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="">title_3_1</a>
                                </li>
                                <li>
                                    <a href="">title_3_2</a>
                                </li>
                                <li>
                                    <a href="">title_3_3</a>
                                </li>
                                <li>
                                    <a href="">title_3_4</a>
                                </li>
                                <li>
                                    <a href="">title_3_5 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                                <li>
                                    <a href="">title_3_6 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="">title_2_2 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                    <use xlink:href="#external-link"></use>
                                </svg>
                            </a>
                        </li>
                        <li>
                            <input type="radio" name="" id="nav-title_2_3">
                            <label for="nav-title_2_3">
                                title_2_3
                                <svg class="icon icon-drop-right" data-element="icon" data-category="general">
                                    <use xlink:href="#drop-right"></use>
                                </svg>
                                <i class="arrow"><span class="b1"></span><span class="b2"></span><span class="b3"></span></i>
                            </label>
                            <ul class="submenu">
                                <li>
                                    <a href="">title_3_0 <svg class="icon icon-external-link" style="vertical-align: text-center" data-element="icon" data-category="general">
                                            <use xlink:href="#external-link"></use>
                                        </svg>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="navigation_submenues_placeholder"></div>
        </nav>
        <div class="shade"></div>
    </div>
</div>

<div class="vertical_calendar">
    <div class="close_calendar">
        <svg class="icon icon-close" data-element="icon" data-category="general">
            <use xlink:href="#close"></use>
        </svg>
    </div>
    <div class="title"></div>
    <div class="date_container">
        <div class="day">20</div>
        <div class="smartphone_day">20.12 </div>
        <div class="month">February</div>
        <div class="events">
        </div>
    </div>
    <div class="date_container">
        <div class="day">20</div>
        <div class="smartphone_day">20.12 </div>
        <div class="month">September</div>
        <div class="events">
            <div class="event">
                <a href="">
                    <p><strong>quidem voluptatem tempora</strong></p>
                    Sit vitae officia temporibus.
                </a>
            </div>
            <div class="event">
                <a href="">
                    <p><strong>sunt sit velit</strong></p>
                    Quos rerum praesentium voluptas ipsum amet.
                </a>
            </div>
            <div class="event">
                <a href="">
                    <p><strong>fugit non tempore</strong></p>
                    Ullam est eaque repellat.
                </a>
            </div>
        </div>
    </div>
    <div class="date_container">
        <div class="day">14</div>
        <div class="smartphone_day">14.12 </div>
        <div class="month">September</div>
        <div class="events">
            <div class="event">
                <a href="">
                    <p><strong>eaque sint porro</strong></p>
                    Quibusdam quaerat similique ipsa exercitationem officia eligendi maxime.
                </a>
            </div>
            <div class="event">
                <a href="">
                    <p><strong>rerum suscipit nesciunt</strong></p>
                    Et enim accusantium.
                </a>
            </div>
        </div>
    </div>
    <div class="date_container">
        <div class="day">10</div>
        <div class="smartphone_day">10.12 </div>
        <div class="month">October</div>
        <div class="events">
        </div>
    </div>
    <div class="complete_link_v">
        <a href="">Vai al calendario completo</a>
    </div>
</div>
<div class="shade"></div>