 <!-- #Menu superior -->
<style>
@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-bold.woff");
  font-display: fallback; /* Define how the browser behaves during download */
}


.floating-menu{
    /*border-radius: 50px;*/
    z-index: 999;
    /*padding-top: 10px;
    padding-bottom: 10px;*/
    left: 0;
    position: fixed;
    display: block;
    top: 50%;
    /*webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);*/
    transform: translateY(-50%);
    overflow: visible;
    max-width: 70px;
    -webkit-transition: width 0.5s;
}
/*
.floating-menu ul ul{
    transition: all 0.1s linear;
    opacity: 0;
    position: absolute;
    visibility: hidden;
}*/


.main-menu {
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: inline-block;
    white-space: nowrap;
}

.floating-menu li{
    position: relative;
}

.main-menu li a {
    display: block;
    color: #fff;
    border-radius: 70px;
    position: relative;
    -o-transition: none;
    transition: none;
    -webkit-transition: width 0.5s;
    overflow: visible;
    z-index:998;
}
/****************Menú principal********************/
.img-home-ico,.img-nuestro-ico,.img-oferta-ico,.img-comunidad-ico,.img-contacto-ico,
.img-instituto-ico,.img-modelo-ico,.img-hemeroteca-ico,
.img-secciones-ico,.img-departamentos-ico,.img-costos-ico,
.img-preescolar-ico,.img-primaria-ico,.img-secundaria-ico,.img-prepa-ico,
.img-idiomas-ico,.img-deportes-ico,.img-coe-ico,.img-pastoral-ico,
.img-teresiana-ico,.img-stj-ico,.img-red-ico,.img-asociaciones-ico
{
    width: 100%;
}

.img-home-letter,.img-nuestro-letter,.img-oferta-letter,.img-comunidad-letter,.img-contacto-letter,
.img-instituto-letter,.img-modelo-letter,.img-hemeroteca-letter,
.img-secciones-letter,.img-departamentos-letter,.img-costos-letter,
.img-preescolar-letter,.img-primaria-letter,.img-secundaria-letter,.img-prepa-letter,
.img-idiomas-letter,.img-deportes-letter,.img-coe-letter,.img-pastoral-letter,
.img-teresiana-letter,.img-stj-letter,.img-red-letter,.img-asociaciones-letter
{
    display: none;
}

/****************Menú principal********************/
/****************Submenú instituto********************/

/****************Submenú instituto********************/
/***********************************************/
/************Este evento mueve el li para adelante, en el menú hace que se deslice a la derecha***************/
/*.floating-menu li:hover{
    transform: scale(1.2);
    left: 20px;
    transition: transforms 5, opacity 0;
    cursor: pointer;

}*/
.li-home :hover> .img-home-letter,
.li-nuestro :hover> .img-nuestro-letter,
.li-oferta :hover> .img-oferta-letter,
.li-comunidad :hover> .img-comunidad-letter,
.li-contacto :hover> .img-contacto-letter,
.li-instituto :hover> .img-instituto-letter,
.li-modelo :hover> .img-modelo-letter,
.li-hemeroteca :hover> .img-hemeroteca-letter,
.li-secciones :hover> .img-secciones-letter,
.li-departamentos :hover> .img-departamentos-letter,
.li-costos :hover> .img-costos-letter,
.li-preescolar :hover> .img-preescolar-letter,
.li-primaria :hover> .img-primaria-letter,
.li-secundaria :hover> .img-secundaria-letter,
.li-prepa :hover> .img-prepa-letter,
.li-idiomas :hover> .img-idiomas-letter,
.li-deportes :hover> .img-deportes-letter,
.li-coe :hover> .img-coe-letter,
.li-pastoral :hover> .img-pastoral-letter,
.li-teresiana :hover> .img-teresiana-letter,
.li-stj :hover> .img-stj-letter,
.li-red :hover> .img-red-letter,
.li-asociaciones :hover> .img-asociaciones-letter
{
    display: block;
    width: 100%;
}

.main-menu li :hover
{
    left: 15px;
    /********Por ahora no deseo que tenga efecto***********/
    /*transition:all .5s ease-in-out;
    -webkit-transform: rotateX(360deg);
    -webkit-transform-style: preserve-3d;
    transform: rotateX(360deg);
    transform-style: preserve-3d;*/
}

.li-home :hover> .img-home-ico,
.li-nuestro :hover> .img-nuestro-ico,
.li-oferta :hover> .img-oferta-ico,
.li-comunidad :hover> .img-comunidad-ico, 
.li-contacto :hover> .img-contacto-ico,
.li-instituto :hover> .img-instituto-ico,
.li-modelo :hover> .img-modelo-ico,
.li-hemeroteca :hover> .img-hemeroteca-ico,
.li-secciones :hover> .img-secciones-ico,
.li-departamentos :hover> .img-departamentos-ico,
.li-costos :hover> .img-costos-ico,
.li-preescolar :hover> .img-preescolar-ico,
.li-primaria :hover> .img-primaria-ico,
.li-secundaria :hover> .img-secundaria-ico,
.li-prepa :hover> .img-prepa-ico,
.li-idiomas :hover> .img-idiomas-ico,
.li-deportes :hover> .img-deportes-ico,
.li-coe :hover> .img-coe-ico,
.li-pastoral :hover> .img-pastoral-ico,
.li-teresiana :hover> .img-teresiana-ico,
.li-stj :hover> .img-stj-ico,
.li-red :hover> .img-red-ico,
.li-asociaciones :hover> .img-asociaciones-ico
{
    display: none;
}
/************SubMenu***************/
.submenu-nuestro{
    list-style: none;
    width: 165%;
    position: absolute;
    transform: translate(30%,-66%);
    display: none;
    z-index: 997;
}
.submenu-oferta{
    list-style: none;
    width: 165%;
    position: absolute;
    transform: translate(30%,-66%);
    display: none;
    z-index: 997;
}
.sub-submenu-secciones{
    list-style: none;
    width: 150%;
    position: absolute;
    transform: translate(30%,-63%);
    display: none;
    z-index: 996;
}
.sub-submenu-departamentos{
    list-style: none;
    width: 150%;
    position: absolute;
    transform: translate(30%,-63%);
    display: none;
    z-index: 996;
}
.submenu-pastoral{
    list-style: none;
    width: 160%;
    position: absolute;
    transform: translate(30%,-63%);
    display: none;
    z-index: 996;
}
/************SubMenu***************/
/***********Para mostrar los submenu********/
ul.main-menu li:hover ul.submenu-oferta,
ul.main-menu li:hover ul.submenu-nuestro,
ul.main-menu li:hover ul.submenu-pastoral
{
    display: block;
}
/***********Para mostrar los sub submenu********/
ul.submenu-oferta li:hover ul.sub-submenu-secciones,
ul.submenu-oferta li:hover ul.sub-submenu-departamentos
{
    display: block;
}
/****************Para que se quede fija la pestaña*******/
.floating-menu li:hover a, .floating-menu li a:focus{
    left: 15px;
    cursor: pointer;
}
.main-menu li a:hover {
    width: 100%;
}
/********Para mostrar el submenu********/