@font-face {
    font-family: "Raleway";
    src: url("../fonts/raleway-bold.woff");
    font-display: fallback; /* Define how the browser behaves during download */
    font-display: swap;
}


.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-innovacion-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-innovacion-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-innovacion :hover > .img-innovacion-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: 110%;
}

.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-innovacion :hover > .img-innovacion-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: 165%;
    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********/