S Header

<header class="container-fluid fixed-top bg bg-color-white px-0 position position-z-3">
    <div class="container py-lg-2">
        <div class="row align-items-center justify-content-between">
            <div class="col-7 col-lg-2">
                <img src='../../../img/logo.png' alt="logo" class="img img-auto img-w" />
            </div>
            <div class="menu col-12 col-lg-10 p-0 d-lg-flex flex-lg-wrap">
                <nav class="list list-none d-flex flex-wrap align-items-center col-12 col-lg-7 order-lg-1">
                    <li class="item px-3 px-lg-2 col-12 col-lg-auto text-center">
                        <p class="text text-size-1-2 text-size-lg-1 m-0">Inicio</p>
                    </li>
                    <li class="item px-3 px-lg-2 col-12 col-lg-auto text-center active">
                        <p class="text text-size-1-2 text-size-lg-1 m-0">Hoteles</p>
                    </li>
                    <li class="item px-3 px-lg-2 col-12 col-lg-auto text-center">
                        <p class="text text-size-1-2 text-size-lg-1 m-0">Destinos</p>
                    </li>
                    <li class="item px-3 px-lg-2 col-12 col-lg-auto text-center">
                        <p class="text text-size-1-2 text-size-lg-1 m-0">Motivos de viaje</p>
                    </li>
                </nav>
                <div class="booking col-12 align-self-end col-lg-2 px-5 px-lg-1 mb-3 mb-lg-0 order-lg-4">
                    <button class="btn btn-round btn-round-primary text text-size-1-2 text-size-lg-1 px-3 px-lg-2 py-2 py-lg-1 mb-2 mb-lg-0 w-100 text text-uppercase text-w-bold">tus reservas</button>
                </div>
                <div class="social d-flex flex-wrap align-self-end align-self-lg-center px-4 justify-content-between pt-2 pt-lg-0 px-lg-1 order-lg-2">
                    <a href="" class="d-inline-block btn btn-reset ml-lg-1">
                        <img src="../../../img/icon_ins.png" alt="" class="img img-auto img-h-1-5">
                    </a>
                    <a href="" class="d-inline-block btn btn-reset ml-lg-1">
                        <img src="../../../img/icon_tw.png" alt="" class="img img-auto img-h-1-5">
                    </a>
                    <a href="" class="d-inline-block btn btn-reset ml-lg-1">
                        <img src="../../../img/icon_fb.png" alt="" class="img img-auto img-h-1-5">
                    </a>
                </div>
                <div class="c-menu-lenguage col-1 d-none d-lg-block order-lg-3 mr-0 ml-2 position-relative">
                    <span class="btn text ">
                        <i class="icon fas fa-globe-americas mr-2 d-none"></i> ES <i class="icon fas fa-chevron-down mr-2 "></i>
                    </span>
                    <div class="wrapper position-absolute bg bg-color-white">
                        <ul class="list list-none m-0 p-0 pl-0">
                            <li class="item ">
                                <a href="#" class="btn text ">EN</a>
                            </li>
                            <li class="item ">
                                <a href="#" class="btn text ">FR</a>
                            </li>
                            <li class="item ">
                                <a href="#" class="btn text ">DE</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="icons col-auto ml-auto d-lg-none">
                <button class="btn btn-reset text text-size-1-5 btn-open-menu">
                    <span class="icon icon-size-1-5 open">
                        <i class="fa fa-bars"></i>
                    </span>
                    <span class="icon icon-size-1-5 icon-color-primary close">
                        <i class="fa fa-times"></i>
                    </span>
                </button>
            </div>
        </div>
    </div>
</header>