/*
CIEL Ingeniería
//// Menú opciones 
*/

/*Container*/
.container { padding-left: 0px !important; padding-right: 0px !important; }
.bordeMenu { border-top: 4px solid #fbba00; border-bottom: none; }

/**Elementos barra menú*/
.headerMenu { max-height: inherit !important; background: rgba(0, 0, 0, 0) linear-gradient(to right,#13a54f,#1aa64d,#3dad3f,#53b237,#5cb433,#5cb433,#62b531,#75b929,#87bd22) repeat scroll 0% 0%; }
.borderMenu { border-color: transparent !important; color: white !important; }
div > ul > li > a { color: white !important; }

/*lateral navbar*/
.headerLateral { padding-top: 13%; }
.urlnav { margin: 0px 0px !important; padding-left: 8% !important; }
.termNav { padding-top: 50%; cursor: pointer; }
.urlnav > li > a { text-align: right; border-bottom: 1px solid rgba(53, 56, 58, 0.53); }
.urlnav > li { padding-right: 4%; }
.navbar-nav { margin: 0px !important; }
.navbar { border: 0px !important; }

/*Iconos responsive*/
.spanIcon { color: #ffffff !important; font-size: 130%; padding: 0% !important; }
.btnClose { display: block; }
.iconNav { float: right; top: -29px !important; cursor: pointer; }

/*Seleccion Item*/
.elemento:hover { background: rgb(112, 184, 43); }

/*Desplegar opciones menú**/
.posicionLateralHeader { width: 100%; position: absolute; margin-left: 0px !important; }
.lateral { position: fixed; margin-right: 10% !important; font-size: 13px; margin-bottom: -300%; border-color: transparent; position: fixed; z-index: 999; }
.image { background-repeat: no-repeat; background-position-y: 49px; background-image: url('../App_Themes/Verde/Image/back_menu_2.png'); background-size: cover; -moz-box-shadow: inset 0px 850px 500px -500px #fff; -webkit-box-shadow: inset 0px 850px 500px -500px #fff; -o-box-shadow: inset 0px 850px 500px -500px #fff; box-shadow: inset 0px 650px 300px -500px #fff; }
.degrade { background: rgba(0, 0, 0, 0) linear-gradient(to right,#13a54f,#1aa64d,#3dad3f,#53b237,#5cb433,#5cb433,#62b531,#75b929,#87bd22); opacity: 0.7; }
.toogle { position: relative; display: block; float: right !important; padding: 4px 4px 4px 4px; margin-right: 20px; margin-bottom: 8px; background-image: none; background-color: transparent; border: 1px solid transparent; border-color: transparent !important; }
#btnClose { display: block; left: 87%; margin: 5% 4%; cursor: pointer; }
#elementoslateral { display: none; }

/*Cambio de resolución web*/
@media (min-width: 768px) {
    .headerLateral { padding-top: 0% !important; }
    .termNav { padding-top: 0% !important; }
    .urlnav > li > a { border-bottom: none; }
    .urlnav > li { padding-right: 0%; }
    .divisionNav { padding-top: 0%; }
    .navbar-nav,
    .lateral { position: static; display: block !important; font-size: 12px; width: 150% !important; left: 13% !important; margin-right: 2% !important; }
    .toogle { display: none; }
    .iconNav { display: none !important; }
    #btnClose { display: none; }
    #elementoslateral { display: none; }
    .urlnav { height: initial !important; padding-left: 200px !important; }
    .navbar-brand { padding: 1px 1px !important; }
    .degrade { opacity: 1; }
    .bordeMenu { border-top: none; border-bottom: 4px solid #fbba00; }
    .usuario { left: 9%; }
}

/*Resolución ancho barra lateral según pantalla*/
@media (max-width:460px) {
    #imgLogo { width: 30% !important; }
     .usuario { left: 10%; }
}

@media (max-width:514px) and (min-width:460px) {
    /*.borderMenu { width: 84% !important; }*/
    #imgLogo { width: 20% !important; }
     .usuario { left: 10%; }
}

@media (max-width:768px) and (min-width:515px) {
    /*.borderMenu { width: 60% !important; }*/
    #imgLogo { width: 20% !important; }
     .usuario { left: 10%; }
}

@media (min-width:768px) {
    #imgLogo { width: 9% !important; }
    .usuario { left: 18%; }
}

/*Resolución alto barra lateral según pantalla*/
@media (max-height:369px) {
    #elementoslateral { height: 300px; overflow-x: hidden; overflow-y: auto; }
}

@media (max-height:656px) and (min-height:602px) {
    .termNav { padding-top: 54%; }
    .usuario { left: 10%; }
}

@media (max-height:601px) and (min-height:515px) {
    .termNav { padding-top: 37%; }
    .usuario { left: 10%; }
}

@media (max-height:516px) and (min-height:476px) {
    .termNav { padding-top: 20%; }
    .usuario { left: 10%; }
}

@media (max-height:477px) and (min-height:450px) {
    .termNav { padding-top: 13%; }
    .usuario { left: 10%; }
}

@media (max-height:451px) and (min-height:398px) {
    .termNav { padding-top: 0%; }
}

@media (max-height:451px) and (min-height:200px) {
    .termNav { padding-top: 0%; }
    .headerLateral { padding-top: 0%; }
}