/** ============================================================================================== **/
/** ============================ Botón para abrir el "menu-sideslide" ============================ **/
/** ============================================================================================== **/
#menu-open-button {
	display: block;
	position: absolute;
	width: 25px;
	height: 25px;
	top: 17px;
	left: 17px;
	background: linear-gradient(	#750600 0%, transparent 0%, 
											transparent 16%, #750600 16%, 
											#750600 28%, transparent 28%,
											transparent 44%, #750600 44%,
											#750600 56%, transparent 56%,
											transparent 72%, #750600 72%,
											#750600 84%, transparent 84%);
	border: none;
	color: transparent;
}
#menu-open-button:focus, #menu-open-button:hover {
	opacity: 0.6;
	outline: none; 
   text-decoration: none; 
}
/** ############################################################################################## **/



/** ============================================================================================== **/
/** ============================ Botón para cerrar el "menu-sideslide" =========================== **/
/** ============================================================================================== **/
#menu-close-button {
	display: block;
	width: 16px;
	height: 16px;
	position: absolute;
	top: 10px;
	right: 10px;
	overflow: hidden;
	text-indent: 16px;
	font-size: 12px;
	border: none;
	background: transparent;
	color: transparent;
}
#menu-close-button::before,
#menu-close-button::after {
	content: '';
	position: absolute;
	width: 3px;
	height: 100%;
	top: 0;
	left: 50%;
	background: #bdc3c7;
}
#menu-close-button::before {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
#menu-close-button::after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
/** ############################################################################################## **/



/** ============================================================================================== **/
/** ================================== Logo del "menu-sideslide" ================================= **/
/** ============================================================================================== **/
#menu-sideslide a.logo {
	top: 4px;
	z-index: 1;
}
#menu-sideslide a.logo img {
	width: 54px;
	height: 54px;
}
/** ############################################################################################## **/



/** ============================================================================================== **/
/** ================================ Menu lateral "menu-sideslide" =============================== **/
/** ============================================================================================== **/
#menu-sideslide {
	position: fixed;
	z-index: 99999;
	width: 220px;
	height: 100%;
	background: #750600;
	overflow: auto;
	-webkit-box-shadow: inset -40px 0px 40px 0px rgba(0,0,0,0.2), 0px 0px 20px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: inset -40px 0px 40px 0px rgba(0,0,0,0.2), 0px 0px 20px 0px rgba(0,0,0,0.3);
	box-shadow: inset -40px 0px 40px 0px rgba(0,0,0,0.2), 0px 0px 20px 0px rgba(0,0,0,0.3);
	-webkit-transform: translate3d(-240px,0,0);
	-moz-transform: translate3d(-240px,0,0);
	-o-transform: translate3d(-240px,0,0);
	-ms-transform: translate3d(-240px,0,0);
	transform: translate3d(-240px,0,0);
	-webkit-transition: -webkit-transform 0.6s;
	-moz-transition: -moz-transform 0.6s;
	-o-transition: -o-transform 0.6s;
	-ms-transition: -ms-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-moz-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-o-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-ms-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
#menu-sideslide a {
	color: #f2f2f2;
}
#menu-sideslide a:hover,
#menu-sideslide a:focus,
#menu-sideslide li.active a {
	color: #ababab;
}
/** ############################################################################################## **/



/** ============================================================================================== **/
/** ==================================== Menu lateral "idioma" =================================== **/
/** ============================================================================================== **/
#menu-sideslide .nav-lang {
	position: absolute;
	right: 10px;
	top: 32px;
}
#menu-sideslide .nav-lang ul {
    float: right;
    list-style: none;
    padding: 0px;
    margin: 0px;
    text-align: left;
    display: inline-block;
}
#menu-sideslide .nav-lang li {
    float: left;
    display: block;
}
#menu-sideslide .nav-lang li a {
	display: block;
	font-size: 12px; 
	line-height: 18px; 
	padding-left: 10px;
	padding-right: 10px;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-o-transition: color 0.3s;
	-ms-transition: color 0.3s;
	transition: color 0.3s;
}
#menu-sideslide .nav-lang li:not(:last-child) a {
	background: url(../images/lang-border-right.png) no-repeat scroll right 6px transparent;
}
#menu-sideslide .nav-lang li:first-child a {
   padding-left: 0px;
}
#menu-sideslide .nav-lang li:last-child a {
   padding-right: 0px;
}
#menu-sideslide .nav-lang li.active a {
   font-weight: 600;
}
/** ############################################################################################## **/



/** ============================================================================================== **/
/** ================================== Menu lateral "principal" ================================== **/
/** ============================================================================================== **/
#menu-sideslide .nav-main {
	padding: 54px 0 0;
}
#menu-sideslide .nav-main ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	-webkit-transform: translate3d(-100%,0,0);
	-moz-transform: translate3d(-100%,0,0);
	-o-transform: translate3d(-100%,0,0);
	-ms-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	border-top: 1px solid rgba(0, 0, 0, 0.2);
}
#menu-sideslide .nav-main li {
	width: 100%;
	padding: 0;
	margin: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
#menu-sideslide .nav-main li a {
	border-left: 3px solid transparent;
	text-decoration: none;
	width: 100%;
	display: inline-block;
	padding: 16px;
	-webkit-transform: translate3d(-100%,0,0);
	-moz-transform: translate3d(-100%,0,0);
	-o-transform: translate3d(-100%,0,0);
	-ms-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0);
}
#menu-sideslide .nav-main li a:hover {
	text-decoration: none;
	background-color: rgba(255, 255, 255, 0.05); /* Will lighten any background colour you set. */
	/*border-left: 5px solid;  Removes transparent colour, so border colour will be the same as link hover colour. */
}
#menu-sideslide .nav-main li.active a {
	text-decoration: none;
	/*background-color: rgba(255, 255, 255, 0.05); /* Will lighten any background colour you set. */
	border-left: 5px solid; /* Removes transparent colour, so border colour will be the same as link hover colour. */
}
#menu-sideslide .nav-main ul, 
#menu-sideslide .nav-main a {
	-webkit-transition: -webkit-transform 0s 0.4s;
	-moz-transition: -moz-transform 0s 0.4s;
	-o-transition: -o-transform 0s 0.4s;
	-ms-transition: -ms-transform 0s 0.4s;
	transition: transform 0s 0.4s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-moz-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-o-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-ms-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
#menu-sideslide .nav-main a:nth-child(2) {
	-webkit-transform: translate3d(0,1000px,0);
	-moz-transform: translate3d(0,1000px,0);
	-o-transform: translate3d(0,1000px,0);
	-ms-transform: translate3d(0,1000px,0);
	transform: translate3d(0,1000px,0);
}
#menu-sideslide .nav-main a:nth-child(3) {
	-webkit-transform: translate3d(0,1500px,0);
	-moz-transform: translate3d(0,1500px,0);
	-o-transform: translate3d(0,1500px,0);
	-ms-transform: translate3d(0,1500px,0);
	transform: translate3d(0,1500px,0);
}
#menu-sideslide .nav-main a:nth-child(4) {
	-webkit-transform: translate3d(0,2000px,0);
	-moz-transform: translate3d(0,2000px,0);
	-o-transform: translate3d(0,2000px,0);
	-ms-transform: translate3d(0,2000px,0);
	transform: translate3d(0,2000px,0);
}
#menu-sideslide .nav-main a:nth-child(5) {
	-webkit-transform: translate3d(0,2500px,0);
	-moz-transform: translate3d(0,2500px,0);
	-o-transform: translate3d(0,2500px,0);
	-ms-transform: translate3d(0,2500px,0);
	transform: translate3d(0,2500px,0);
}
#menu-sideslide .nav-main a:nth-child(6) {
	-webkit-transform: translate3d(0,3000px,0);
	-moz-transform: translate3d(0,3000px,0);
	-o-transform: translate3d(0,3000px,0);
	-ms-transform: translate3d(0,3000px,0);
	transform: translate3d(0,3000px,0);
}
/** ############################################################################################## **/



/** ============================================================================================== **/
/** ============ Animaciones a realizar cuando se anade la clase "show-menu-sideslide" =========== **/
/** ============================================================================================== **/
.show-menu-sideslide #menu-sideslide {
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-transition: -webkit-transform 0.6s;
	-moz-transition: -moz-transform 0.6s;
	-o-transition: -o-transform 0.6s;
	-ms-transition: -ms-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-moz-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-o-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-ms-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.show-menu-sideslide #menu-sideslide .nav-main ul,
.show-menu-sideslide #menu-sideslide .nav-main a {
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-transition: -webkit-transform 0.8s;
	-moz-transition: -moz-transform 0.8s;
	-o-transition: -o-transform 0.8s;
	-ms-transition: -ms-transform 0.8s;
	transition: transform 0.8s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-moz-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-o-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-ms-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.show-menu-sideslide #menu-sideslide .nav-main a {
	-webkit-transition-duration: 0.9s;
	-moz-transition-duration: 0.9s;
	-o-transition-duration: 0.9s;
	-ms-transition-duration: 0.9s;
	transition-duration: 0.9s;
}
.show-menu-sideslide #main-container::before {
	z-index: 99998;
	opacity: 1;
	-webkit-transition: opacity 0.8s;
	-moz-transition: opacity 0.8s;
	-o-transition: opacity 0.8s;
	-ms-transition: opacity 0.8s;
	transition: opacity 0.8s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-moz-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-o-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-ms-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
/** ############################################################################################## **/