.nav {
  width: 500px;
  height:700px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  float: left;
  position: relative;
  margin-right:  20px;
}
.nav:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.nav:after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 0;
  right: 0;
  top: 100%;
  border-right: 1px solid #3e5edf;
  transition: all 0.5s;transition-delay: 0.5s;
}
.nav.active:after {
  top: 0;
}

.radial-nav {
  position: relative;
  display: inline-block;
  width: 70px;
  height: 70px;
  -webkit-transform-origin: center center;
}
.radial-nav .menu {
  border: none !important;
  position: relative;
  width: 70px;
  height: 70px;
  z-index: 100;
  transition: all 0.5s;
  display: table-cell;
  vertical-align: middle;
}
.radial-nav .menu:active {
  -webkit-transform: rotate(-15deg);
}
.radial-nav li:not(.menu) {
  position: absolute;
  left: 0;
  width: 70px;
  height: 70px;
  border-radius: 70px;
  border: 1px solid transparent;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  transition: all 0.5s;
  z-index: 1;
}
.radial-nav li:not(.menu).selected {
  -webkit-transform: rotate(0deg) translateX(120px) rotate(0deg);
  border: 1px solid #5151F1;

}
.radial-nav li:not(.menu).selected a {
  opacity: 1;
    color:#e68a8a;
}
.radial-nav li:not(.menu):before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.radial-nav li:not(.menu) a {
  display: inline-block;
  vertical-align: middle;
  opacity: 0;
  -webkit-transition: all 0.5s;
}
.radial-nav.expanded li:not(.menu) {
  border: 1px solid #5151F1;
}
.radial-nav.expanded li:not(.menu):hover {
  background-color: #5151F1;
}
.radial-nav.expanded li:nth-child(1) {
  -webkit-transform: translateY(-120px);
}
.radial-nav.expanded li:nth-child(2) {
  -webkit-transform: rotate(-45deg) translateX(120px) rotate(45deg);
}
.radial-nav.expanded li:nth-child(3) {
  -webkit-transform: translateX(120px);
}
.radial-nav.expanded li:nth-child(4) {
  -webkit-transform: rotate(45deg) translateX(120px) rotate(-45deg);
}
.radial-nav.expanded li:nth-child(5) {
  -webkit-transform: translateY(120px);
}
.radial-nav.expanded li:nth-child(6) {
  -webkit-transform: rotate(135deg) translateX(120px) rotate(-135deg);
}
.radial-nav.expanded li:nth-child(7) {
  -webkit-transform: rotate(180deg) translateX(120px) rotate(-180deg);
}
.radial-nav.expanded li:nth-child(8) {
  -webkit-transform: rotate(225deg) translateX(120px) rotate(-225deg);
}
.radial-nav.expanded li a {
  opacity: 1;
}
.radial-nav.expanded .icon-menu {

  border-color: #d3d5d6;   /*Color menu laterales seleccionado e invertido Gris*/
  -webkit-transform: rotate(90deg);
}
.radial-nav.expanded .icon-menu:before {
  border-color: #d3d5d6; /*Color menu del medio seleccionado e invertido gris */
}
.radial-nav.expanded .menu:active {
  -webkit-transform: rotate(15deg) !important;
}

.icon-menu {
  display: inline-block;
  border-top: 3px solid #E68A8A;   /*Linea  superior menu Rosados */
  border-bottom: 3px solid #E68A8A;   /*Linea inferior menu Rosados */
  width: 30px;
  height: 30px;
  margin-left: -45px; /* esto lo puse para alinear el icono (3 barras) dentro del circulo*/
  cursor: pointer;
  -webkit-transition: all 0.3s;
}
.icon-menu:before {
    color: #f1f1f1;
  content: "";
  display: inline-block;
  border-bottom: 3px solid #E68A8A;  /*Linea del medio menu Rosados */
  width: 100%;
  -webkit-transition: all 0.3s;
}
.icon-menu:hover {
  border-color: #ffc0c0; /*Linea del medio menu Rosa claro */
}
.icon-menu:hover:before {
  border-color: #ffc0c0; /*Linea del medio menu Rosa claro */
}


body, html {
      height: 100%;
      margin: 0;
      /*  overflow-x: hidden;  /* no muestra las barras de desplazamiento ancho x */
      overflow-y: hidden; /* no muestra la barra desplazamiento de alto y*/
      background-color: #2d2dc2;
      font-family: Arial, Helvetica, sans-serif;
      color: #d1d1d1; /* color gris clarito*/
}


a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}



.content {
  overflow: hidden;
}

.content .item {
  opacity: 0; /* aqui va el delay  de borrado*/
  transition: all 0.5s;
  transition-delay: 1.3s;
  position:absolute;
   z-index: -2; /*esto fue agregado por Julian  para que funcione el iframe de Video Youtube*/
}
.content .item.active {
  opacity: 1;
  position: static;
}
.content .item h1 {
  font-size: 25px;
  margin-bottom: 0.3em;
}
*/

/**************************************************************/
/*Desde Aqui persiana Quienes somos, Comodicades, Servicios */
/**************************************************************/
/*@import url(https://fonts.googleapis.com/css?family=Open+Sans);*/

html{
    width:100%;
    height:100%;
}

/*
Da el efecto al contenedor y características genéricas, que en este caso
daría un efecto de animación de movimiento del contenedor con un tiempo en milisegundos.
Usando varias composiciones del parámetro transition de CSS3 para su correcta visualización en diferentes navegadores web.
*/

.efecto{
    overflow:hidden;
    position:relative;
    width:60%; /* se cambio de 100% a 70% ya que el ancho de pantalla se pasaba de largo */
    height:0;
    top:0%; /* totalmente nuevo*/
    transition: all 500ms ease-out;
}

#SlideContenedor{
    position:absolute;
    width:65%;
    height:90%;
    color:#f0f0f0;
    top:0%; /* totalmente nuevo*/
    overflow:hidden;
}

#SlideContenedor1{
    background-color:#2d2dc2; /*azul*/
    color:#f0f0f0;
    position:absolute;
    top:0%; /* totalmente nuevo*/
}

#SlideContenedor2{
  background-color:#2d2dc2;  /*azul*/
  color:#f0f0f0; /*Blanco Mate*/
  position:absolute;
  top:0%;
}

#SlideContenedor3{
    background-color:#2d2dc2;
    color:#f0f0f0; /*Blanco Mate*/
    position:absolute;
    top:0%;
}
/*
pseudo-clase de CSS, se activa cuando el target de un elemento se activa, como ejemplo,
cuando pinchamos un link y este nos posiciona a una parte concreta del texto de esa misma página en la que estamos.*/

.efecto:target{
    height:100%;
}

/*Este código anterior interpreta que el contenedor donde aparezca la clase .efecto debe
tener una altura del 100% de la pantalla. importante ya que si cambiamos el valor a 0px
ocultaría la ventana, también en le caso que fuera 50% solo interpretaría que debe mostrar un 50%
del alto del elemento o contenedor con respecto al tamaño de pantalla.
*/

#desarrollofrontend a{
    padding: 0px;
    border:none;
}

#desarrollofrontend{
    padding: 10px 0px 1px 0px;
    background: #00bdff;
    color: white;
    width: 100%;
    bottom: 0px;
    position: fixed;
    padding-left: 15px;
}

.lista ul  {   /*alinear un Array en una sola linea */

}
.lista li
{
  vertical-align:middle;
  text-decoration:none;
   list-style-type: none;
   display: inline;
   padding-right: 5px;
}