* {
  box-sizing:border-box;
}
html,body{height:100%;}
body {
  margin:0;
  padding:0;
  background-color:#fff;
  overflow-y: scroll;
  overflow-x: hidden;
}
#content {
	max-width:1024px;
	margin:0px;
	padding:0px;
}
a {
  text-decoration:none;
}
.nav {
  position: fixed;
  width:25%;
  height:100%;
  min-height:100%;
  top:0;
  padding-top:20px;
  background-color: #525252;
  font-family: 'Oswald', sans-serif;
  text-shadow: 1px 1px #000000;
  background-image:url(../images/back_navy_bottom.png);
  background-repeat:no-repeat;
  background-position:left bottom;
  font-size:.7em;
  font-weight:300;
}
.nav img{
	display:block;
	width:auto;
	margin:0px auto;
	padding-bottom:20px;
}

   .nav__item {
     display:block;
     width:96%;
     margin:0 auto;
     position:relative;
	 padding:3%;
     border-bottom:.5px solid rgba(59, 62, 61, 1);
     background-color:transparent;
     font-family: 'Lato', sans-serif;
     text-align:center;
     color:rgba(235, 235, 235, 1);
   }
   .nav__item:hover {
     color: #999;
   }
 
       .current:before {
          content:"";
          width:0;
          height:0;
          position:absolute;
          border-top:17px solid transparent;
          border-right:15px solid #fff;
          border-bottom:17px solid transparent;
          top:0px;
          right:-6px; 
          z-index:4;
       }
      .current:after {
          content:"";
          width:0;
          height:0;
          position:absolute;
          border-top:16.5px solid transparent;
          border-right:17px solid #333;
          border-bottom:17px solid transparent;
          top:.5px;
          right:-3px;
          z-index:1;  
      }
  .menu-toogle {
	  display:none;
  }

.main-w {
  width:75%;
  float:right;
  display:block;
  min-height:90vh;
  margin-bottom:2em;
  position:relative;
}   
.header-w {
	display:block;
	width:100%;
	height:180px;
	width:auto;
	background-image: url(../images/back_left_top.png);
	background-repeat:no-repeat;
	background-position: -80px top;
      text-align:center;
      position:relative;
	}
        img.back_left_top:before {
          content:"O";
          width:15px;
          height:15px;
          position:absolute;
          background-color:white;
          border-radius:100%;
          color:#A9BC00;
          font-size:120%;
          font-wheight:bolder;
          font-family:verdana;
          left:42vw;
          top:9vw;     
        }
        img.back_left_top:after {
          content:"O";
          width:15px;
          height:15px;
          position:absolute;
          background-color:white;
          border-radius:100%;
          color:#A9BC00;
          font-size:120%;
          font-wheight:bolder;
          font-family:verdana;
          left:50.8vw;
          top:9vw; 
        }
    .featured-img {
      margin:3em 6vw 0 0;
      border:4px solid white;
      border-radius:100%;
    }
    .header-w__description {
      width:90%;
	  position: relative;
      max-height:90vh;
      margin:0 auto;
      padding:1em;
      text-align: left;
      color: #333;
	  font-family: 'Oswald', sans-serif;
	  display:block;
    }
	.header-w__description p, li{
		font-weight:300;
		text-align:justify;
		display:block;
		font-size:.95em;
		margin:.9em 0px;
    }
	.header-w__description ul{
		display:block;
		list-style-position: outside;
    }
	.header-w__description ul li{
		display:block;
		list-style-position: outside;
    }
	.header-w__description ul.sub-indice{
		display:block;
		list-style-position: outside;
		margin-left:2em;
    }
	.header-w__description ul.sub-indice li{
		list-style-type:circle;
    }
    .logo-redes {
		display:block;
		position:absolute;
		bottom:5%;
		width:100%;
		margin:0px auto;
	}
	.logo-redes img{
		display:block;
		margin:0px auto;
	}
	.logo-redes ul{
		display:block;
		margin:0px auto;
		width:200px;
	}
	.logo-redes ul li{
		display:block;
		list-style:none;
		float:left;
		text-align:center;
		width:20%;
	}
	.main-w #contenido {
		width:100%;
		height:65vh;
		display:block;
		padding:2% 0px 0px 0px;
	}
	.main-w #contenido_2 {
		width:100%;
		height:500px;
		display:block;
		padding:0px;
	}
    .clear {
		clear:both;
		
	}

@media screen and (max-width:960px) {
.nav {
  position:absolute;
  height:100%;
  max-height:100%;
  width:250px;
  left:-250px; 
  padding-top:20px;
  background-color: #525252;
  transition:all .5s ease;
  font-weight:300;
}

  .checkbox {
      display:none; 
    }
    .checkbox:checked ~ .nav {
      left:0px; 
      position:fixed;
    }
    .checkbox:checked ~ .main-w {
      margin-left:250px;
    }
    .checkbox:checked ~ .menu-toogle { 
      left:250px;
      position:fixed;
    }
	.menu-toogle {
	display: block;
    position:absolute; 
    width: 35px;
    line-height:1.1;
    text-align:center;
    top:0px; 
    left:0px; 
    background-color: #142b25;
    transition: all .5s ease; 
    z-index:10;
	cursor:pointer;
  }
    .menu-toogle::before {
      content:"☰";
      font-size:2em;
      color:white;
    }
.main-w {
  width:100%;
  transition: all .5s ease;
  float:none;
  
}  
.main-w #contenido {
		min-height:150%;
	}
	
	
}
@media only screen and (min-width:1224px) {
	.nav {
	  width:350px;
	  font-weight:300;
	}
	
	.main-w {
	  max-width:73%;
	  float: left;
	  left:350px;
	  display:block;
	  position:absolute;
	  top:0px;
	} 
	.menu-toogle {
	  display:none;
  } 
  .current:before {
          right:-7px;
       }
      .current:after {
          right:-4px; 
      }
	  .logo-redes {
		display:block;
		position:absolute;
		bottom:5%;
		width:100%;
		margin:0px auto;
	}
	.logo-redes img{
		display:block;
		margin:0px auto;
	}
	.logo-redes ul{
		display:block;
		margin:0px auto;
		width:200px;
	}
	.logo-redes ul li{
		display:block;
		list-style:none;
		float:left;
		text-align:center;
		width:25%;
	}
	.main-w #contenido {
		width:100%;
		height:65vh;
		display:block;
		padding:5% 0px 0px 0px;
	}
    .clear {
		clear:both;
		
	}
	
}