/* MENU - Navegacion*/
#nav{position:fixed; top:0; right:-60px; z-index:20; height:100%; background:#000; }

/* Arrows */
#nav #arrows   { margin:30px 0 0; position:absolute; bottom:20px; right:0;  }
#nav #arrows li{ margin: auto; margin:0; }
#nav #arrows a { background: url(../images/arrow_up_dw.png) 0 0; margin:4px 0 0; display:block; width:25px; height:36px; }
#nav #arrows a.arw_up   { background-position: 0 0;}
#nav #arrows a.arw_down { background-position: 0 -36px;}

#nav #arrows a.arw_up:hover   { background-position: 25px 0;}
#nav #arrows a.arw_down:hover { background-position: 25px -36px;}

/* Dots */
#nav #dots ul { margin:0; z-index: 200; height:400px; position:absolute; top:20px; right:0; z-index:999999999; }
#nav #dots ul li {
	float:right;
	margin:5px 0 0 0;
	text-align:right;
	clear: right;
}
#nav #dots ul li a {
	border:2px solid #FFF;
	width: 21px; height: 21px;
	background-color: transparent;
	cursor: pointer;
	display: block;
	margin: 0;
	line-height:21px;
	color:#FFF;
	font-weight:400;
	font-size:13px;
	text-align:center;
	opacity:.6;
	
	-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;
	-webkit-transition: all .4s ease-out;-moz-transition: all .4s ease-out;-ms-transition: all .4s ease-out;-o-transition: all .4s ease-out;transition: all .4s ease-out;
}
#nav #dots ul li:hover a { opacity:1; background:#FFF; color:#535353; }
#nav #dots ul li span, #nav #dots ul li.active span {
	background: transparent url(../images/nav_arrow_small.png) 100% 50% no-repeat;
	color: #4AA638;
	display: none;
	font-style:normal; font-weight: 400;
	right:30px;
	padding: 8px 28px 10px 6px;
	position: absolute;
	white-space: nowrap;
	font-size:15px;
	margin-top:-4px;
}
#nav #dots ul li span .left   { height:35px; width:10px; background:#FF0000; position: absolute; top:2px ; left:-10px; display: inline-block; background:url(../images/nav_arrow_small.png) left top no-repeat;}
#nav #dots ul li.active span  { right:30px; }
#nav #dots ul li:hover span   { display: block; }

#nav #dots ul li.link_01.active a, #nav #dots ul li.link_02.active a, #nav #dots ul li.link_03.active a, #nav #dots ul li.link_04.active a, #nav #dots ul li.link_05.active a ,#nav #dots ul li.link_06.active a, 
#nav #dots ul li.link_07.active a, #nav #dots ul li.link_08.active a, #nav #dots ul li.link_09.active a, #nav #dots ul li.link_10.active a, #nav #dots ul li.link_11.active a ,#nav #dots ul li.link_12.active a,
#nav #dots ul li.link_13.active a, #nav #dots ul li.link_14.active a, #nav #dots ul li.link_15.active a, #nav #dots ul li.link_16.active a, #nav #dots ul li.link_17.active a ,#nav #dots ul li.link_18.active a
{ font-size:14px; background:#000; font-weight:400; opacity:1; color:#FFF;}


/* MENU - Contenido */

nav { 
	height:300x; width:45px;
	position:fixed;
	top:50%; left:-65px;
	display:block;
	z-index:999;
	margin:-150px 0 0; padding:0;
}
nav ul{ margin:0; padding:0; float:left;}
nav ul li{ display: block; float:left; clear:left;}
nav ul li a{ 
	height:45px;
	width:45px;
	float: left;
	text-decoration: none;
	color: #666;
	background:url(../images/bg_nav.png) 0 0 no-repeat;
	margin:2px 0;
	left:0;
	position:relative;
	z-index:900;
	
	-webkit-transition: all .4s ease-out;-moz-transition: all .4s ease-out;-ms-transition: all .4s ease-out;-o-transition: all .4s ease-out;transition: all .4s ease-out;
}
nav ul li a.lk_01 { background-position: -45px 0; }
nav ul li a.lk_02 { background-position: -45px -45px; }
nav ul li a.lk_03 { background-position: -45px -90px; }
nav ul li a.lk_04 { background-position: -45px -135px; }
nav ul li a.lk_05 { background-position: -45px -180px; }
nav ul li a.lk_06 { background-position: -45px -225px; }
 
nav ul li a.lk_01:hover { background-position: 0  0; }
nav ul li a.lk_02:hover { background-position: 0 -45px; }
nav ul li a.lk_03:hover { background-position: 0 -90px; }
nav ul li a.lk_04:hover { background-position: 0 -135px; }
nav ul li a.lk_05:hover { background-position: 0 -180px; }
nav ul li a.lk_06:hover { background-position: 0 -225px; }

nav ul li span {
	background: transparent url(../images/nav_arrow.png) left 50% no-repeat;
	color: #535353;
	font-style:normal; font-weight: 300;
	left:40px; 
	padding: 8px 10px 10px 13px;
	margin-top:5px;
	position: absolute;
	white-space: nowrap;
	font-size:18px;
	z-index:10;
	opacity:0;
	margin-left:-520px;
	
	-webkit-transition: all .6s ease-out;-moz-transition: all .6s ease-out;-ms-transition: all .6s ease-out;-o-transition: all .6s ease-out;transition: all .6s ease-out;
}
nav ul li span .right  { height:35px; width:10px; position: absolute; top:3px ; right:-10px; display: inline-block; background: url(../images/nav_arrow.png) right bottom no-repeat;}
nav ul li:hover span   { display: block; opacity:1; margin-left:0; }


/* SECCIONES .. SECCIONES .. SECCIONES .. SECCIONES .. SECCIONES .. SECCIONES .. SECCIONES .. SECCIONES .. SECCIONES .. SECCIONES .. SECCIONES .. SECCIONES .. SECCIONES .. SECCIONES ..  */

#section_01 { background: url(../images/lk_01.jpg) 0 0 repeat; }
#section_02 { background: url(../images/lk_02.jpg) 0 0 repeat; }
#section_03 { background: url(../images/lk_03.jpg) 0 0 repeat; }
#section_04 { background: url(../images/lk_04.jpg) 0 0 repeat; }
#section_05 { background: url(../images/lk_05.jpg) 0 0 repeat; }
#section_06 { background: url(../images/lk_06.jpg) 0 0 repeat; }
#section_07 { background: url(../images/lk_01.jpg) 0 0 repeat; }
#section_08 { background: url(../images/lk_02.jpg) 0 0 repeat; }
#section_09 { background: url(../images/lk_03.jpg) 0 0 repeat; }
#section_10 { background: url(../images/lk_04.jpg) 0 0 repeat; }
#section_11 { background: url(../images/lk_05.jpg) 0 0 repeat; }
#section_12 { background: url(../images/lk_06.jpg) 0 0 repeat; }
#section_13 { background: url(../images/lk_01.jpg) 0 0 repeat; }
#section_14 { background: url(../images/lk_02.jpg) 0 0 repeat; }
#section_15 { background: url(../images/lk_03.jpg) 0 0 repeat; }

.img_right{ float:right; margin:0 0 15px 20px; width:210px;}

@media (max-width: 768px) { #nav #arrows { bottom:50px; } }
@media (max-width: 568px) { #nav, nav { display:none; } }
@media (max-width: 480px) { #nav, nav { display:none; } }
@media (max-width: 320px) { #nav, nav { display:none; } }